enabled.2019.02.20ReactとIonicでアプリ開発ができる@ionic/reactを触ってみたdevionicreactどうも、クロスプラットフォーム開発の夢を捨てきれない@mottox2です。Xamarinなどがありますが、つい最近にメジャーバージョンアップされたIonicをReactで書けるという話を聞いたので触ってみました。0.0.4(alpha)での動作を元にしているので、すぐに役立たない記事になると思うのでその当たりはご承知いただけると嬉しいです。Ionicは初見です。@ionic/reactを使って進めていくようです。0.0.4のREADME.mdを見ながらやっていきます。https://www.npmjs.com/package/@ionic/react/v/0.0.4README.mdを見ると、次のようなことが書いてありました。@ionic/coreを入れて開発を進める。create-react-appをベースにしてTypeScriptを使うのがおすすめだよ。Appのコードを見た方が早いよ。サンプルコードを見ながらcreate-react-appを使って簡単なアプリケーションを作ってみようと思います。プロジェクトの設定プロジェクトの設定create-react-appでTypeScriptということで毎度おなじみのcreate-react-appのコマンドを叩いてみます。dependencyとしてreact-routerとreact-router-domが必要らしいのでreact-router-domもインストールしておきます。1src/index.jsにregisterIonicの記述を追加します。document.getElementById('root'));準備は整ったので適当にUIを作っていきます。Ionicの知識はないのでドキュメントを頼りにします。AngularとReactの差分ですが、ドキュメントのion-appはIonAppに対応します。src/App.jsを次のように変更しました。UIコンポーネントは@ionic/react、全体のスタイルは@iconic/coreの方から呼び出します。startを実行すると、次のように表示されました。無事IonicのコンポーネントをReactで呼び出すことができました。capacitorの追加capacitorの追加それでは今作ったものをiOSで動かしてみましょう。cordovaの後継として開発されているcapacitorを利用します。initを実行します。initするとAppNameとAppIDの入力を求められるので適当に入力します。入力が終わるとcapacitor.config.jsonというファイルが生成されるので、その中のwebDirをwwwからbuildに書き換えます。buildを行いReactのアプリケーションをビルドしましょう。ビルドされたものはbuild/に保存されます。保存されていることが確認したら次のコマンドを実行してios用のプロジェクトを生成します。ios設定が正しければiosディレクトリが生成されます。StatusBarとかぶってしまったので、divタグにmarginTopをつける感じで暫定対応しています。読むといいかもというアドバイスをいただきました。見ていった結果iPhoneのsafe-area-inset(iPhoneのノッチに対応する部分の数値を検出するもの)のコードにたどり着きそれが有効になっていないことがわかりました。調べた結果safe-area-insetを有効にするには、viewportを適切に設定する必要があるとわかりviewport-fit=coverを設定することで上記の問題は解決しました。さいごにさいごにそもそも日本語情報には期待していないのですが、英語情報ですら今はライブラリのREADME.mdとサンプルアプリが1つみたいな状況です。ネイティブな機能に関してはまだ触ってないので、暇な時に触れればいいかなと思っています。JSでアプリを書くという意味ではReactにはすでにReactNativeが存在しているので、流行るのかはわかりません。ReactNativeはNativeからWeb、IonicはDOMからNativeと思想が違うのでそういった面では面白いと思いました。Vueはなかなか相性が良さそうです。(WeexやVueNativeよりは筋がよさそう)ただし、私はIonic初心者なので経験者でなにか言いたいことがあればTwitterやDMで連絡もらえると嬉しいです。react-routerはreact-router-domの依存ライブラリなのでreact-router-domを入れておけば問題ありません。技術書展8に向けてWordとPandocを使って同人誌を作っています。PandocではWordのテンプレートを用意して、その中にMarkdownで書いたコンテンツを流し込みます。この構成で大事なのがW2020/02/16event技術書展8でSPAの技術に関する同人誌を出す予定です技術書展7、技書博1に続いて技術書展8や技書博3に向けて、つのぶえ出版として新作を書いています。今回は「フロントエンドの技術選定」「仕組みの理解」あたりをテーマに考えています。ReactとV2020/02/02diaryタスク消化のためにひとり合宿をやってきた3泊4日をかけて名古屋でタスク消化合宿を行った。簡単にまとめると、普段の環境では進捗が見えやすく、達成感を得られるプログラミングをやりがちですが合宿の場を用意することで普段進みにくいタスクを消化す2020/01/26PROFILE@mottox2WEBエンジニア都内でフリーランスエンジニア・デザイナーとしてWebサービスやスマホアプリを作っています。新規事業の爆速立ち上げや、使いやすいSPAの開発が得意です。