Statista 2021によると、Flutter と React Native は2019年から2021年にかけて最も利用されているクロスプラットフォームです。
その理由として Flutter および React Native は iOS Android 両方の端末で実行できるクロスプラットフォームであることが挙げられます。シングルコードベースを作成することができ、コードが少ない分、リリースまでの時間とコストが ネイティブアプリより少なくてすみます。
本記事ではマルチプラットフォーム開発の概要を説明し、FlutterとReact Native を徹底的に比較していきます。
引用：https://www.statista.com/statistics/869224/worldwide-software-developer-working-hours/
1．クロスプラットフォームとは
アプリ クロスプラットフォーム 、または マルチプラットフォームとは Windows、MacOS、AndroidまたはiOSなどの様々なOS（Opertating System）とデバイスで実行できるアプリケーション・プログラムまたはソフトウェアの一種です。React Native および flutter は クロスプラットフォーム 開発 比較 で Xamarinクロスプラットフォーム 、Kotlinクロスプラットフォーム とともに、現在人気を集めている クロスプラットフォーム開発ツール です。
React Native とは モバイルアプリケーション フレームワークである一方、 Flutter は モバイルアプリ のUIソフトウェア開発キット（SDK）であります。FlutterとReact Nativeは、両方とも モバイルアプリ（Android、iOS）、ウェブ、デスクトップ（Linux、Windows、Mac）と埋め込みアプリケーションの構築をサポートツールとして知られています。
| Flutter | React Native | |
| リリース | 2017年5月 | 2015年3月 |
| 開発会社 | ||
| プログラミング言語 | Dart | JavaScript |
| タイプ | ソフトウェア開発KIT | ソフトウェアフレームワーク |
| ライセンシング | 無料、オープンソース | 無料、オープンソース |
2．Flutter と React Native
2.1．パフォーマンス
プログラミング言語の観点から見ると、FlutterはDartを使用する一方、React NativeはJavaScriptとなります。
Flutter と React Native のパフォーマンスを比較することは、実にDartとJavaScriptのパフォーマンスを比較することです。
デスクトップにおけるパフォーマンス
基準研究の結果によると、10ケースの７は、Dartに比べてJavaScriptがより少ないメモリを消費しながら、もっと高速に実行しました。つまり、JS（React Native）は、デスクトップデバイス、サーバープログラミング及びそれに「ネイティブ」なその他の環境で、Dart（Flutter）より高速でリソース効率が高いです。
基準研究結果
*数値が低い方が処理が早く、パフォーマンスも良い。
| ベンチマークの項目 | 消費時間（Sec）* | 消費メモリ* | ||
| JavaScript （React Native） | Dart （Flutter） | JavaScript （React Native） | Dart （Flutter） | |
| 任意制度の算術演算で円周率の数字を生成する | 6 | 3 | 67 | 150 |
| 同じ単純な正規表現アルゴリズムを使用してDNA配列を操作する | 5 | 5 | 1160 | 884 |
| 模倣された太陽系の惑星の座標を計算する | 9 | 9 | 35 | 125 |
| DNA配列を読み取り、その逆の値を書き込む | 2 | 42 | 1525 | 6600 |
| 非常に小さい整数シーケンスのインデックス付きアクセス | 12 | 60 | 63 | 116 |
| 10個の数値解析タスクのセットを解く | 2 | 6 | 64 | 124 |
| マンデブロセットを描き、出力ファイルを特別な形式で書き込む | 4 | 12 | 93 | 228 |
| ランダムなDNA配列を生成して書き込む | 2 | 6 | 71 | 159 |
| カウンターを蓄積し、ハッシュを使用してそれらの値を更新する | 16 | 24 | 393 | 526 |
| 多くの二分木の割り当てと割り当て解除 | 7 | 10 | 1310 | 694 |
モバイルのパフォーマンス
最高のパフォーマンスを発揮するのは ネイティブモバイルブアプリケーション の強みです。クロスプラットフォームの場合、その強みを ネイティブ のように発揮することが難しいです。MediumでのStartupコミュニティが実施した基準研究結果によると、Flutter は、メモリに大量のデータを読み書きするテストで、パフォーマンス点数が ネイティブ より9～22％低いです。また、数値計算のタスクで、Flutterの実行スピードが ネイティブ より2～6倍遅いです。
それに対して、 React Native パフォーマンス はテスト全体で最低です。 React NativeはFlutterに比較して2～15倍、 ネイティブ に比べて5～21倍遅いです。
MediumでのStartupコミュニティによる基準研究結果
*数値が低い方が処理が早く、パフォーマンスも良い。
| ベンチマークのタスク | iOS (ms) * | Android (ms) * | ||||
| React Native | Flutter | ネイティブアプリ | React Native | Flutter | ネイティブアプリ | |
| Borweinのアルゴリズムタスクを利用したCPU負荷テスト | 582 | 180 | 26 | 822 | 285 | 144 |
| Gauss-Legendreアルゴリズムタスクを利用したメモリ | 2992 | 189 | 173 | 3289 | 273 | 223 |
Flutter は、追加の中間層なしでx86およびARMネイティブライブラリにコンパイルするため、多くのリソースを消費せず、高速でコードを実行することができます。その結果、アプリケーションが即座に起動され、パフォーマンスが向上され、デバイスの負荷も軽減されます。
React Native の場合、ソースコードを実行するには、JavaScript （JS）コードとデバイスの ネイティブ環境 間でコミュニケーションを取り合い、データを交換する役割を担う「ブリッジ」が必要であり、もっと時間とリソースがかかります。
ウェブパフォーマンス
React は ウェブ開発で最も優れたフレームワークとして知られています。JavaScript はHTML、CSSと共に最も基本的なフロントエンド言語です。しかし、Dart はウェブサイト開発にはあまり利用されていません。正直に言うと、 HTML 、 JavaScriptや CSS が主体のウェブサイト開発では、Dart を選択するメリットは多くないでしょう。
そのため、ウェブパフォーマンスでは、React NativeがFlutterよりずっと優秀と言っても過言ではありません。
2.2．React Native アプリ とFlutter アプリの提供デザインとグラフィック
React Nativeでは、アプリのベースはJavaScript コードです。それぞれC++またJavaコードのブリッジとシリアル化されたJSONオブジェクトを利用することで、このコードはiOs または AndroidデバイスのネイティブUIに変換されます。
React Nativeは、 ボタン、ナビゲーション、メニューなどネイティブの視覚要素と外観を継承し、ユーザーにシームレスなパーソナライズされた、 ネイティブアプリケーション のようなエクスペリエンスを提供することができます。
しかし、React Nativeクロスプラットフォーム を利用したアプリのUIはiOSデバイスとAndroidデバイス間または各バージョン間でわずかな差異があります。
Flutterの場合、いずれのOSバージョンや端末デバイスモデルでもFlutterアプリのUIが同じです。つまり、ユーザーのスマートフォンが最新品であるかどうか問わず、同じユーザーエクスペリエンスを提供することができます。しかし、Flutterアプリは Nativeアプリ よりXamarin、Lonik、Cordovaなどのハイブリッドフレームワークを利用したアプリに似てます。
2.3．市場投入までの時間
FlutterとReact Native、両方とも再利用可能なコードを提供し、様々なスキルを持つエンジニアとプロジェクトのスコープを拡大するネイティブアプリのデメリットを回避します。FlutterおよびReact Nativeを利用することでiOS Andoid 端末デバイス、ウェブとデスクトップデバイスに実行するコードを80％ほど再利用することができます。FlutterおよびReact Native、各フレームワークは、UX/UI、ビジネスロジック、アプリ統合などのアプリケーションエンジニアリングのレイアウトのすべてをカバーしています。
Flutterには、ホットリロード（Hot load）機能があります。ホットリロード機能とは、プログラムの変更を瞬時にoverride（上書き）し、UIに反映させる機能です。Flutterのホットリロードを使えば基本的に、数ミリ秒から数秒の間にUIを更新できます。
React Nativeでホットリロード機能がFast Refreshと呼ばれます。React NativeのFast Refreshを利用すると、開発者は実行しているアプリケーションに新しいコードを入れ込むことができます。
それらの機能を所有し、FlutterおよびReact Nativeは両方とも市場投入までの時間を短縮するというメリットがあります。そのため、次に各フレームワークのサポートコミュニティ、当フレームワークのデベロッパーの雇用しやすさとツール及びライブラリーの豊富さを比較していきます。
サポートコミュニティ
| Flutter | React Native | |
| Github stars | 131,000 | 98,000 |
| Github commit | 18,900 | 21,300 |
| Stackouverflow watchers | 44,400 | 63,500 |
| Stackouverflow questions | 79,604 | 95,662 |
React NativeはFlutterよりも歴史が深く、大きなコミュニティを構築することができました。またReact Nativeを利用する際、困った時はコミュニティからのサポートを受けることができます。
各フレームワーク開発者の雇用しやすさ
登場が早いことに加えて、 React Native は多数の開発者が使い慣れており、伝統的なJavaScript開発の経験から簡単にアップスキルできることから、React NativeデベロッパーがFlutterデベロッパーより雇用しやすく、また、React NativeデベロッパーはFlutterデベロッパーよりトレーニング期間も短くなることが多いです。
各フレームワークのツールとライブラリーの豊かさ
Flutterは18,000以上の利用可能なパッケージとAndroid Studio ＆Intelli J、Visual Studio Codeや開発ツール、Flutter SDK、ウェブレンダーなどの約9ツールを提供しています。それにより、開発者は、テキストURLや電子メールをクリック可能なインラインリンクに変換したり、国際的なEコマースサービスに役に立つ国コードセレクターを表示したりするなど、マイクロな改善を追加することができます。
React Nativeはもっと多数のライブラリーを提供しています。ネイティブライブラリ以外もは数多くのサードパーティーによるライブラリを提供しているため、選択肢が豊富で、コード作業がより簡単になります。
アプリケーションサイズ
モバイルフレームワークはアプリケーションコードのサイズに大きな影響を与えます。大規模なプロジェクトの場合、アプリケーションのサイズがフレームワークのサイズを支配する必要があります。
Flutterで作成された単純なHello Worldアプリのサイズは7.5MBでした。Flutterを利用すると、このアプリのサイズはDartの仮想マシンとC/C＋＋エンジンの影響を受けます。ただし、Flutterは、サイズの問題を回避するために、すべてのコードとアセットを自己完結させることができます。さらに、–split-debug-infoのような特別なタグを使用することで、コードサイズを削減できます。
また、React Nativeを使用したHello Worldアプリの初期サイズは７MBでしたが、 ネイティブの依存関係が追加されたら、サイズは最大13.4MBに増加しました。React Nativeは、Flutterよりも高速かつ最小サイズでアプリケーションを反復できます。それに、Proguardを有効にさせて、enableSeperateBuildPerCPUArchitecture要素を使用すると、すべてのネイティブライブラリと外部ライブラリの分割ビルドが自動生成されます。サイズが大幅に削減されます。
2.4．信頼性
FlutterはGoogleにより、React NativeはFacebookにより誕生されました。両方とも信頼性が高い大手企業による構築されたため、安心的に使用することができるでしょう。どちらのフレームワークもオープンソースであり、許可なしのライセンスに従って配布されます。
Flutterはよりシンプルで、OS（オペレーティングシステム）の更新によって行われた変更に対して耐性があります。
React Nativeはデバイスのネイティブ要素に依存しており、システムが更新された場合に iOSアプリケーションと Androidアプリケーションに個別に追加の適応作業が必要があります。これはReact Nativeのデメリットではなく、ただReact Nativeはネイティブのエクスペリエンスを提供できるという意味です。フレームワークを選ぶには発生する場合を予見することがよいだろう。
2.5. 継続的インテグレーション継続的デリバリ（CI/CD）
Flutterを使用する場合、コマンドラインインターフェイスを使って、アプリケーションをデプロイできますが、iOSのApp Store用のCI/CDは複雑であり、追加の作業を行う必要があります。
React Nativeには、CI/CDに関する統合ツールやその関連の公開ドキュメントはありませんが、fastlane、GitLab CI/CD、GitHub Actions、MicrosoftAppCenterなどの数多くの一般的なサードパーティーCI/CDサービスがサポートされています。
3. FlutterとReact Nativeを利用したアプリの例と将来性
| Flutter | React Native | |
| アプリ数 | 12,000+ | 30,000+ |
| ダウンロード数 | 50億以上 | 320億以上 |
| マーケットシェア | 1.45% | 3.66% |
| TOP500アプリのマーケットシェア | 1.20% | 8.22% |
| 新しいアプリのマーケットシェア | 4.08% | 3.13% |
Flutter および React Nativeを使用する TOP５アプリ事例
| Flutter | React Native |
| Google Ads | |
| Alibaba | Netflix |
| Yandex Go | Amazon |
| Ebay | Uber |
| Capital One |
現在React NativeはFlutterより人気を浴びていると言えます。TIOBE Indexの2021年9月の統計によると、Javascript（React Native）の人気ランキングは、昨年と同じで7位で、Flutterは36位です。しかし、Flutterの人気ランキングはこれから上がってくると見通されます。React Nativeを超えることはまだFlutterの大きなチャレンジです。FlutterとReact Nativeの将来性に引き続いて期待できるでしょう。
4．まとめ
以上、React NativeとFlutterの概要を説明し、比較しました。
React Nativeはシンプルネイティブやクロスプラットフォームアプリケーションの構築に最適です。一方、Flutterは複数のインテレッセやMVPアプリケーションの構築に優れています。
React NativeとFlutter の選択に悩んでいる時、ぜひ以下のチェックリストに目を通してください。
| React Native | Flutter |
| □既存アプリのスケールをクロスプラットフォームモジュールで行いたい。 | □完全なネイティブ機能を必要とするアイデア |
| □要件が軽量のネイティブアプリケーションを開発すること。 | □60FPS ～120FPSの速度で操作するアプリケーションの作成を目指している。 |
| □独創的な共有APIを作成したい。 | □ウィジェットを使用してUIをカスタマイズし、テストを減らすことを求めている。 |
| □非同期の要求と応答性の高いUIを備えたアプリケーションを目標にしたい。 |
当社ではクロスプラットフォームでの開発も数多くご支援してきました。
クロスプラットフォームでの開発、モバイル開発に興味のある方は是非、お問い合わせください。
