- 最適なクロスプラットフォームのモバイル開発フレームワークを探している中で、Flutter、React Native、Ionicが目に留まった
- 3つのフレームワークはいずれも、単一のコードベースで複数プラットフォーム上の良好なパフォーマンスを約束している
- APIを活用して基本データを画面に表示するモバイルアプリを3種類のバージョンで作成し、比較してみた
- アプリの要件: 画面読み込み時に国の情報を表示、ローディングスピナー、新しいランダムな国を取得するボタン、国の一覧は一度だけ取得
Flutter
- Flutterは2017年にGoogleが作ったオープンソースフレームワークで、単一のコードベースから複数プラットフォーム向けのネイティブアプリケーションを作成する。Dart言語ベース
- Flutterのドキュメントとチュートリアルを1時間学習した後に開発を開始
- 開発環境の設定とエミュレーターの起動はスムーズだった
- 4時間で基本機能を備えたアプリを作成
- Android Studioの提案機能が開発に大いに役立った
- Hot Reload機能により変更を即座に確認でき、開発時間の短縮につながった
- ただし、「すべてがウィジェット」という概念のためネストが多く、スタイルと要素が混在していて直感的ではない
React Native
- Metaが2015年に作ったオープンソースのJavaScriptフレームワークで、ネイティブAndroidおよびiOSアプリケーションを構築できる
- Reactライブラリの使用経験があり、VS Codeのインストールもすでに完了していた
- 開発環境の設定プロセスは複雑でわかりにくかった（Expo GoとReact Native CLIの違いを理解する必要があった）
- 2.5時間でアプリを完成させたが、画像表示の問題解決には苦労した
- Reactのコンポーネントベースのアーキテクチャのおかげで、コードは簡潔でモジュール化されている
- JSXを使ってコンポーネントのUIをHTMLに似たコードで記述できる
Ionic
- Ionicは2012年に作られたオープンソースのモバイルUIツールキットで、単一のコードベースからモダンで高品質なクロスプラットフォームモバイルアプリを構築できる
- React、Vue、Angularで開発可能
- 豊富なUIコンポーネントと魅力的なユーザーインターフェースを提供
- Ionicの動画とガイドを30分学習した後に開発を開始
- Angular版でアプリを開発し、慣れ親しんだ開発エコシステムのおかげで素早く開発できた
- 初期設定時に生成される多数のJSONおよびTypeScriptの設定ファイルはやや負担に感じられた
- 2時間でアプリを完成
- UIの実装は容易で、ドキュメントもよく整備されている
- HTMLテンプレートを使ってUIとロジックを分離できる
- SpinnerやFloating Action ButtonのようなUIコンポーネントのおかげでUI実装が容易だった
比較: Flutter、React Native、Ionic
- コードスタイルと言語
- JavaScriptベースのフレームワークはコードの可読性とシンプルさで優勢
- Flutterのネストされたコードスタイルはやや混乱しやすく、読みにくい
- ReactとAngularのテンプレートのどちらを好むかは個人の好みによる
- エコシステム
- 2024年4月時点で、米国でインストールされた上位500アプリのうち12.57%がReact Native、5.24%がFlutter、0.52%がIonicで作られている
- React Nativeは高い自由度を提供する一方で、設定やツール利用に混乱を招くことがある
- Flutterは採用率が上昇中で、GitHubの公開リポジトリ数も多い
- ツール
- Hot Reload
- ブラウザでは、3つのフレームワークすべてがコード変更時に素早くアプリをリロードする
- Android端末やシミュレーターでは、FlutterのHot Reloadが最も速い
- リモートデバッグ
- Flutter DevToolsは直感的で、多彩な機能を提供する
- IonicはChrome Developer Toolsに似たインターフェースで、デバッグしやすい
- React NativeもReact DevToolsを提供するが、リモートデバッグではFlutterやIonicに後れを取る
- アプリサイズ
- Ionic: 3.2MB、Flutter: 18.1MB、React Native: 25.2MB
- インストール後に占有する容量はそれぞれ9.61MB、34.66MB、55.47MB
- ユーザー体験
- FlutterとIonicはプラットフォームに合ったUIコンポーネントを提供し、一貫したユーザー体験を保証する
- React Nativeは追加ライブラリに依存する必要がある
- パフォーマンス
- Flutterはネイティブコードにコンパイルされるため、React Nativeより高速だと予想される
- IonicはWebView上で動作するため、パフォーマンスはやや遅くなる可能性がある
結論
- Flutterのコードスタイルについてさらに深掘りしたいと思うし、デバッグの常識を変えうるHot Reload機能は魅力的
- それでも、既存のWeb開発の知識（TypeScript、HTML、CSS）をモバイルアプリ開発に活用できるIonicにより惹かれる
- Ionicの開発スキルを高めることが、モバイルおよびWeb開発者としての能力向上につながると考えている
- プロジェクトが発展するにつれて、コード構成、関心の分離、コンポーネントの再利用性などがより明確になるだろう
- 優れたアプリケーションは、3つのフレームワークのどれでも構築できる
- フレームワーク選びでは、開発の楽しさを見落としてはいけない
- 実験アプリの開発を通じて、さまざまなフレームワークを探ってみることを勧める
6件のコメント
native UI を使う唯一のクロスプラットフォームライブラリなので、なかなか見切りをつけられませんね…。
代替があればすぐにでも乗り換えたいくらいですが、本文の Flutter も Ionic も native UI を選んでいないのを見ると、未来はなさそうです。
私の場合、Flutterはhtml/cssを知っている必要がなく、Dartですべてできるのでよかったです。
通常、Webをやっていた方はRN、そうでない方はFlutterのほうが使いやすいとおっしゃっていました。
クロスプラットフォーム自体がどうしてもマイナーなぶん、関連ライブラリの開発が遅かったり不足していたりするのですが。
React Native は、React のエコシステムを一部共有できる点に強みがあるように思います。
2年前に開発していた頃と比べても、最近 RN 開発をしていて tailwind や ReactQuery、TRPC など、React で活発に開発・利用されているライブラリを使えることで、RN の生産性がますます高くなっていた記憶があります。
個人的な経験では、アプリ開発で重要だったのは状態管理とUIの部分でした。
RN ではグローバル管理に Redux + Redux-saga、ページごとには React-query を使っていました。
Flutter では Riverpod を使っていました。
個人的には React 側の状態管理やロジックの順序管理のほうが少し理解しやすく、
開発もしやすかったです。Web ベースのプラットフォームなので開発が少し楽でした。
Flutter は個人的に Riverpod への理解があまり簡単ではありませんでした。（時間投資が少し足りなかったのもあります。）
簡単な状態管理はそれほど難しくありませんでしたが、プラットフォームへの理解の問題なのか、
状態変更の処理やサーバー API 処理後の共通処理の部分では、実装の複雑さや難しさがありました。
UI については、Flutter 側のウィジェットはプロパティや機能がしっかり定義されていて、開発しやすかったです。
React では antd UI ライブラリを使いましたが、使用体験は悪くありませんでした。
React は2年前の経験なので開発関連ライブラリが古い時期の体験で、
Flutter は最近開発しましたが、投入した時間は少なかったです。
自分の開発経験もコメントとして残しておきます〜
こういう部分もあるんだな…くらいに受け取ってください〜 ^^
ありがとうございます！ほかの方にも役立ちそうです。