クロスプラットフォーム FlutterとReact Nativeを徹底比較

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月
開発会社	Google	Facebook
プログラミング言語	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）より高速でリソース効率が高いです。

基準研究結果

*点数が少なければ少ないほどいいです。

モバイルのパフォーマンス

最高のパフォーマンスを発揮するのは ネイティモバイルブアプリケーション の強みです。クロスプラットフォームの場合、その強みを ネイティブ のように発揮することが難しいです。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 アプリ例

・Instagram

・Netflix

・Amazon

・Uber

・Pinterest

現在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にお任せください。