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

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)と埋め込みアプリケーションの構築をサポートツールとして知られています。

FlutterReact Native
リリース2017年5月2015年3月
開発会社GoogleFacebook
プログラミング言語DartJavaScript
タイプソフトウェア開発KITソフトウェアフレームワーク
ライセンシング 無料、オープンソース 無料、オープンソース

2.Flutter と React Native

2.1.パフォーマンス

プログラミング言語の観点から見ると、FlutterはDartを使用する一方、React NativeはJavaScriptとなります。

Flutter と React Native のパフォーマンスを比較することは、実にDartとJavaScriptのパフォーマンスを比較することです。

デスクトップにおけるパフォーマンス

基準研究の結果によると、10ケースの7は、Dartに比べてJavaScriptがより少ないメモリを消費しながら、もっと高速に実行しました。つまり、JS(React Native)は、デスクトップデバイス、サーバープログラミング及びそれに「ネイティブ」なその他の環境で、Dart(Flutter)より高速でリソース効率が高いです。

基準研究結果

*数値が低い方が処理が早く、パフォーマンスも良い。

ベンチマークの項目消費時間(Sec)*消費メモリ*
JavaScript (React Native)Dart (Flutter)JavaScript (React Native)Dart (Flutter)
任意制度の算術演算で円周率の数字を生成する6367150
同じ単純な正規表現アルゴリズムを使用してDNA配列を操作する551160884
模倣された太陽系の惑星の座標を計算する9935125
DNA配列を読み取り、その逆の値を書き込む24215256600
非常に小さい整数シーケンスのインデックス付きアクセス126063116
10個の数値解析タスクのセットを解く2664124
マンデブロセットを描き、出力ファイルを特別な形式で書き込む41293228
ランダムなDNA配列を生成して書き込む2671159
カウンターを蓄積し、ハッシュを使用してそれらの値を更新する1624393526
多くの二分木の割り当てと割り当て解除7101310694
参考:https://nix-united.com/blog/flutter-vs-react-native/

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

最高のパフォーマンスを発揮するのは ネイティブモバイルブアプリケーション の強みです。クロスプラットフォームの場合、その強みを ネイティブ のように発揮することが難しいです。MediumでのStartupコミュニティが実施した基準研究結果によると、Flutter は、メモリに大量のデータを読み書きするテストで、パフォーマンス点数が ネイティブ より9~22%低いです。また、数値計算のタスクで、Flutterの実行スピードが ネイティブ より2~6倍遅いです。

それに対して、 React Native パフォーマンス はテスト全体で最低です。 React NativeはFlutterに比較して2~15倍、 ネイティブ に比べて5~21倍遅いです。

MediumでのStartupコミュニティによる基準研究結果

*数値が低い方が処理が早く、パフォーマンスも良い。

ベンチマークのタスクiOS (ms) *Android (ms) *
React NativeFlutterネイティブアプリReact NativeFlutterネイティブアプリ
Borweinのアルゴリズムタスクを利用したCPU負荷テスト58218026822285144
Gauss-Legendreアルゴリズムタスクを利用したメモリ29921891733289273223

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に変換されます。

モバイルアプリ 開発 フレームワークおすすめ5選

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は両方とも市場投入までの時間を短縮するというメリットがあります。そのため、次に各フレームワークのサポートコミュニティ、当フレームワークのデベロッパーの雇用しやすさとツール及びライブラリーの豊富さを比較していきます。

サポートコミュニティ

FlutterReact Native
Github stars131,00098,000
Github commit18,90021,300
Stackouverflow watchers44,40063,500
Stackouverflow questions79,60495,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アプリの初期サイズは7MBでしたが、 ネイティブの依存関係が追加されたら、サイズは最大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を利用したアプリの例と将来性

FlutterReact Native
アプリ数12,000+30,000+
ダウンロード数50億以上320億以上
マーケットシェア1.45%3.66%
TOP500アプリのマーケットシェア1.20%8.22%
新しいアプリのマーケットシェア4.08%3.13%
引用:https://nix-united.com/blog/flutter-vs-react-native/

Flutter および React Nativeを使用する TOP5アプリ事例

FlutterReact Native
Google AdsInstagram
AlibabaNetflix
Yandex GoAmazon
EbayUber
Capital OnePinterest

現在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 NativeFlutter
□既存アプリのスケールをクロスプラットフォームモジュールで行いたい。□完全なネイティブ機能を必要とするアイデア
□要件が軽量のネイティブアプリケーションを開発すること。□60FPS ~120FPSの速度で操作するアプリケーションの作成を目指している。
□独創的な共有APIを作成したい。□ウィジェットを使用してUIをカスタマイズし、テストを減らすことを求めている。
□非同期の要求と応答性の高いUIを備えたアプリケーションを目標にしたい。

当社ではクロスプラットフォームでの開発も数多くご支援してきました。

クロスプラットフォームでの開発、モバイル開発に興味のある方は是非、お問い合わせください。