Statista 2021によると、Flutter と React Nativeは2019年から2021年にかけて最も利用されているクロスプラットフォームです。なぜかというと Flutter React Native ではiOS Androidクロスプラットフォーム、両方の端末で実行できるシングルコードベースを作成することができ、コードが少ないのでアプリのリリースがしたがって時間とコストが ネイティブアプリ より少ないからです。
本稿でDevSamurai Vietnamは flutter vs react native を徹底的に比較していきます。React Native vs Flutter を比較する前にこの2つの マルチプラットフォーム開発 フレームワークの概要を説明します。
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 vs react native
2.1．パフォーマンス
Flutterのプログラミング言語はDartで、React NativeはJavascriptであるため、Flutter vs React Native のパフォーマンスを比較することは実にDartとJavascriptのパフォーマンスを比較することです。
デスクトップにおけるパフォーマンス
基準研究の結果によると、10ケースの７は、Dartに比べてJavasciptがより少ないメモリを消費しながら、もっと高速に実行しました。つまり、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 パフォーマンス はテスト全体で最低です。 リアクトネイティブ はFlutterに比較して2～15倍、 native に比べて5～21倍遅いです。
MediumでのStartupコミュニティによる基準研究結果
*点数が少なければ少ないほどいいです。
| ベンチマークのタスク | iOS (ms) * | Android (ms) * | ||||
|---|---|---|---|---|---|---|
| React Native | Flutter | Native | React Native | Fluttter | Native | |
| Borweinのアルゴリズムタスクを利用したCPU負荷テスト | 582 | 180 | 26 | 822 | 285 | 144 |
| Gauss-Legendreアルゴリズムタスクを利用したメモリ | 2992 | 189 | 173 | 3289 | 273 | 223 |
Flutter は、追加の中間層なしでx86およびARMネイティブライブラリにコンパイルするため、多くのリソースを消費しぬ高速でコードを実行することができます。その結果、アプリケーションが即座に起動され、パフォーマンスが向上され、デバイスの負荷も軽減されます。
リアクトネイティブの場合、ソースコードを実行するには、JavaScript （JS）コードとデバイスの ネイティブ環境 間でコミュニケーションを取り合い、データを交換する役割を担う「ブリッジ」が必要であり、もっと時間とリソースがかかります。
ウェブパフォーマンス
React は ウェブ開発で最も優れたフレームワークとして知られています。JavaScript はHTML、CSSと共に最も基本的なフロントエンド言語です。しかし、Dartはウェブサイト開発にはあまり利用されていません。正直に言うと、Dartはウェブ開発におけるメリットがないことです。
そのため、ウェブパフォーマンスでは、React NativeがFlutterよりずっと優秀と言っても過言ではありません。
2.2．React native アプリ とFlutter アプリの提供デザインとグラフィック
React Nativeでは、アプリのベースはJavaScript コードです。それぞれC++またJavaコードのブリッジとシリアル化されたJSONオブジェクトを利用することで、このコードはiOs または AndroidデバイスのネイティブUIに変換されます。
【2021年版】Webアプリケーションフレームワークおすすめ5選
それで、React Nativeは、 ボタン、ナビゲーション、メニューなどネイティブの視覚要素と外観を継承し、ユーザーにシームレスなパーソナライズされた、 ネイティブアプリケーション のようなエクスペリエンスを提供することができます。
しかし、React Nativeクロスプラットフォーム を利用したアプリのUIはiOSデバイスとAndroidデバイス間または各バージョン間でわずかな差異があります。
Flutterの場合、いずれのOSバージョンや端末デバイスモデルでもFlutterアプリのUIが同じです。つまり、ユーザーのスマートフォンが最新品であるかどうか問わず、同じユーザーエクスペリエンスを提供することができます。しかし、Flutterアプリは Nativeアプリ よりXamarin、Lonik、Cordovaなどのハイブリッドフレームワークを利用したアプリに似てます。
2.3．市場投入までの時間
FlutterとReact Native、両方とも再利用可能なコードを提供し、様々なスキルを持つエンジニアとプロジェクトのスコープを拡大するネイティブアプリのデメリットを回避します。Flutter vs React Nativeを利用することでiOS Andoid 端末デバイス、ウェブとデスクトップデバイスに実行するコードを80％ほど再利用することができます。React NativeとFlutter、各フレームワークは、UX/UI、ビジネスロジック、アプリ統合などのアプリケーションエンジニアリングのレイアウトのすべてをカバーしています。
Flutterには、ホットリロード（Hot load）機能があります。ホットリロード機能とは、プログラムの変更を瞬時にoverride（上書き）し、UIに反映させる機能です。Flutterのホットリロードを使えば基本的に、数ミリ秒から数秒の間にUIを更新できます。
React Nativeでホットリロード機能がファストリフレッシュ（Fast Fresh）と呼ばれます。React NativeのFast Freshを利用すると、開発者は実行しているアプリケーションに新しいコードを入れ込むことができます。
それらの機能を所有し、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は多数の開発者が使い慣れた一方、伝統的なウェブ開発の経験から簡単にアップスキルするJavasciptにベースするため、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のAppStore用のCI/CDは複雑であり、追加の作業を行う必要があります。
React Nativeには、CI/CDに関する統合ツールやその関連の公開ドキュメントはありませんが、Fastlane、Gitlab CI/CD、Github Actions、MicrosoftAppCenterなどの数多くの一般的なサードパーティーCI/CDサービスがサポートされています。
3. react native flutterを利用したアプリの例と将来性
| Flutter | React Native | |
| アプリ数 | 12,000+ | 30,000+ |
| ダウンロード数 | 50億以上 | 320億以上 |
| マーケットシェア | 1.45% | 3.66% |
| TOP500アプリのマーケットシェア | 1.20% | 8.22% |
| 新しいアプリのマーケットシェア | 4.08% | 3.13% |
トップ５の Flutterアプリ事例
・Google Ads
・Alibaba
・Yandex Go
・Ebay
・Capital One
トップ５のreact native アプリ例
・Netflix
・Amazon
・Uber
現在React NativeはFlutterより人気を浴びていると言えます。TIOBE Indexの2021年9月の統計によると、Javascipt（React Native）の人気ランキングは、昨年と同じで7位で、Flutterは36位です。しかし、Flutterの人気ランキングはこれから上がってくると見通されます。しかし、React Nativeを超えることはまだFlutterの大きなチャレンジです。React Nativeと Flutter将来性 に引き続いて期待できるだろう。
4．まとめ
擁するに、React Nativeはシンプルネイティブやクロスプラットフォームアプリケーションのビルドに最適です。それに対して、Flutterは複数のインテレッセとMVPアプリケーションの構築に優れています。それで、 flutter vs react native 、どれを選ぶかと悩んでいる時、以下のチェックリストに目を通してください。
以下の場合なら、React Nativeを選んでください：
・既存アプリのスケールをクロスプラットフォームモジュールで行いたい。
・要件は、軽量のネイティブアプリケーションを開発すること。
・独創的な共有APIを作成したい。
・目標は、非同期ビルドと応答性の高いUIを備えたアプリケーションを作成すること。
以下の場合なら、Flutterを選んでください。
・完全なネイ底部機能を必要としたいアイデア
・60FPS ～120FPSの速度で操作するアプリケーションの作成を目指している。
・ウィジェットを使用してUIをカスタマイズし、テストを減らすことを求めている。
DevSamurai Vietnam株式会社はGoogle Cloudパートナー、CNCFとThe Linux Foundationメンバーであり、企業の業務革新をお手伝いしております。それに、FlutterやReact Nativeなど クロスプラットフォームアプリ開発、またはラボ型開発としてその先任者をお手頃な価格で提供しております。Flutter、React Native先任者、クロスプラットフォームアプリベンダーをお探しなら、DevSamurai Vietnamにお任せください。