poriweb

備忘録とか

お試しIonic React

Ionic Framework React

IonicFrameworkについて、最近よく耳にするので、自分も試したかったためプロジェクト作成→PWA→iOSビルドまでやってみました。

ionicframework.com

やったことは完全に ドキュメント (Installing Ionic - Ionic Documentation) の流れなので、内容については細かくは書きませんが、ざっくり説明すると

  1. npmでPCに @ionic/cli を入れる
  2. ionicコマンドでプロジェクトを作る
  3. npmで @ionic/react and @ionic/react-router を入れる
  4. ionic serve してweb開発する(まんまreact scriptsですね)
  5. githubにpushし、netlifyにデプロイしてPWAを実機(iPhone)で試す
  6. ionicコマンドで capacitor add ios する
  7. capacitor.config.json の appId(Bundle ID)をセットする(store公開しないので適当に)
  8. macOS最新化
  9. Xcode最新版インストール
  10. cocoapods最新版インストール
  11. Xcodeでプロジェクト開く
  12. エミュレータ&実機ビルド確認

をしました。 ただ、実際には8をやる前に実機ビルドしようとして、pod installがコケたり、ダークモードのコードがうまく動作しなかったりといったことで軽くハマっているので前後関係がちょっと違います。全部最新化されていればハマりポイントは少なくサクッといけそうだなぁという印象です。ネイティブのAPIなどはまだ触っていないので、その辺触り出したらどの程度ハマるか・・・。

リポジトリは下記です。

github.com

所感(触って10h程度です。前述の通りネイティブのAPIはまだ触っていません。)

  • ドキュメントしっかりしていたのでwebでの開発に入るまではサクッといけたので、単なるWebアプリでも採用して良いのではないかという印象です。(ただパッケージの依存性などの制約がどの程度あるかなどはわかりませんが、そこはもう使う以上はIonic Wayに乗っかるべきですね。最悪Ionicだけを剥がすこともできそうなのは👍)
  • ネイティブにビルドするためにどの程度コードの書き方への制約があるのかまだよくわかっていませんが、表面的な部分では普通にReact書いてそのままiOSアプリ作れる感覚がとてもGoodでした。
  • Xcode周りはSwift開発ほどの知識は不要とはいえ、CocoaPodsなどを全く知らない状態からやるとハマって抜け出せなくなる場合もありえるのかな？と思いましたが、逆にIonicからネイティブビルド環境に触れる足掛かりにするのもありかなと。この手の「ハイブリッドアプリやクロスプラットフォームのフレームワークはそのネイティブアプリビルド環境の知識がないとキツイ問題」はどこでも同じだとは思いますので。

というわけで技術選定時に問題がなければプロダクションでも積極的に使っていきたいなーという気持ちは今のところ結構強いです。