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

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

FlutterReact 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ケースの7は、Dartに比べてJavasciptがより少ないメモリを消費しながら、もっと高速に実行しました。つまり、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 パフォーマンス はテスト全体で最低です。 リアクトネイティブ はFlutterに比較して2~15倍、 native に比べて5~21倍遅いです。

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

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

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

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

サポートコミュニティ

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は多数の開発者が使い慣れた一方、伝統的なウェブ開発の経験から簡単にアップスキルする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アプリの初期サイズは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のAppStore用のCI/CDは複雑であり、追加の作業を行う必要があります。

React Nativeには、CI/CDに関する統合ツールやその関連の公開ドキュメントはありませんが、Fastlane、Gitlab CI/CD、Github Actions、MicrosoftAppCenterなどの数多くの一般的なサードパーティーCI/CDサービスがサポートされています。

3.  react native flutterを利用したアプリの例と将来性

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/

トップ5の Flutterアプリ事例

・Google Ads

・Alibaba

・Yandex Go

・Ebay

・Capital One

トップ5の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にお任せください