当社では モバイルアプリ を開発する場合、これまでは iOSアプリ なら Swift 、 Androidアプリ なら Kotlin を使うことが一般的でした。しかし、この2、3年程で クロスプラットフォーム の アプリ開発 案件が増加しています。 モバイルアプリ を迅速で効率的に開発しながらコストを抑えたいとの要求が増えている背景にあります。そのミッションを果たすためには、 Flutter （フラッター）と React Native （リアクトネティブ）といったハイブリッドフレームワークを利用しています。今回は、当社開発者がその2つのフレームワークを実際使った経験から、特徴と違いについてご紹介します。

目次

• 1. 概要
• 2. 利点と弱点
• 3. Flutter と React Native の今後の展開は?
• 4. ではどのフレームワークを選ぶべきか？

1. 概要

1.1. Flutter（フラッター）

FlutterはDartを使用します。これについては、シリーズの最初の投稿で詳しく説明しました。 Dartはかなり新しいものですが、この言語の学習曲線は、特にC＃とJavaに精通した経験豊富な開発者にとってはそれほど急ではありません。
FlutterはSkiaライブラリを利用して２Dグラフィックスのレンダリング処理を実装します。ネイティブコンポネントを使用せず、自らのウィジェットを作ります。ネイティブコンポネントと似たようなウィジェットを作るために、Material（Androidアプリ用）とCupertino（iOSアプリ用）の2つのテーマを提供しています。

Skiaライブラリを利用して２Dグラフィックスのレンダリングを処理することで、GPUパワーを生かした上でUIリフレッシュ速度60fpsを可能にし、 ネイティブアプリ のような性能を提供します。
Dart言語を使用することでフラッターがソースコードからネイティブコードにコンパイルできます。コンパイル済みのapk・ipaファイル容量は４～６MBくらいしか増加しません。

1.2. React Native（リアクトネイティブ）

React NativeはJavaScriptで動作します。これは広く採用されている言語であり、オンラインコミュニティからの多くのサポートと多くの成功したモバイルおよび Webアプリケーション の実績があります。

また、 React Native はブリッジを利用してOEMウィジェットにアクセスします。ウィジェットへのアクセス頻度が高い場合（アニメーション、映像を取り扱う時には60回／秒まで）、性能問題に繋がることが多いです。ブリッジを利用することと ネイティブコード にコンパイルできないことにより、React Nativeで開発されたアプリは ネイティブアプリ より容量が大きい傾向にあります。

2. 利点と弱点

2.1. ホットリロード

FlutterとReact Nativeはどちらもホットリロードをサポートします（React Nativeではファストリフレッシュと呼ばれます）。そのため、FlutterかReact Nativeで開発している途中で、ソースコードを変更した時にリビルドしなくてもアプリに即反映し、変更結果をすぐに確認することができます。

2.2. コードベース

FlutterとReact Nativeはどちらも、一つのコードベースでiOS、 Android、Web の全てに対応することが可能です。

2.3. コミュニティー

React NativeはFlutterに比べて、3年程早く市場に出ているし、JavaScriptがより広く使用されているため、経験やノウハウを共有するコミュニティーは大きいです。その結果、React Native用のライブラリーはFlutterのより多く、Flutterを使う場合にはネイティブ言語でのカスタマイズ作業が多々出てきます。
とはいえ、数多くのReact native用ライブラリーの中には、低品質なものやメンテナンスされていないものがいっぱいあるので要注意です。

2.4. 言語

前述のように、FlutterはDartという新しい言語を使用します。Dartはオブジェクト指向言語の一つであり、認知度はまだ比較的に低いですが、勉強しやすい言語です。特にJava、 C#の経験を持つ方にとっては、簡単にマスターできるのでしょう。
React Nativeは多くの人に愛用されるJavaScriptの他にTypescriptも使用できます。Webアプリ開発経験がある方に向いているかもしれません。

2.5. ドキュメンテーション

ドキュメントとIDEのサポートは、開発者にとって効率的にコーディングするために不可欠な要素の一つです。
React Nativeといえば、ドキュメントは非常に充実しています。ただし、React Nativeのドキュメントの一部は、主にオープンソースの性質のため、不器用で紛らわしく作成されている場合があります。
一方、Flutterのドキュメントはちゃんと整理されており、比較的に綿密であると考えられます。フレームワークには、React Native開発者向けに書かれたドキュメントもあり、古いツールから新しいツールへの移行を支援します。この場面では、Flutterの方が学習者に優しいと言えるのでしょう。

2.6. コードプッシュ

React Nativeはコードプッシュというとても有益な機能を提供しています。セキュリティー対策やバグのホットフィックス、ゲームの新規イベントの各種パラメータ変更など、App Store審査を待ちたくないようなケースが多いです。この時、アプリの変更がWebページのように動的にできれば便利ですが、コードプッシュ機能はそんなことを可能にしてくれます。
ちなみに、Flutterはまだこの機能をサポートしていません。

2.7. 開発スピード

競争が激化している現代のマーケットにおいては、開発スピードが最も重要なポイントの一つになっています。FlutterとReact Nativeはどちらもクロスプラットフォーム、プラグインやライブラリをサポートし、開発の効率化を図り、モバイルアプリのサービスインまでの時間を短縮することができます。
Flutterで使われるDartは比較的に新しい開発言語なので開発者のコミュニティはまだ小さいです。ただし、Flutterは使いやすさで好評されているし、初めての開発者でもDartが使いこなせるまでの時間はそこまでかかりません。また、FlutterはデフォルトでAndroidアプリ とiOSアプリの両方に同じUIを持たせ、Material（Android向け） とCupertino（iOS向け）というコンポーネントで個別UIを作成できますが、追加工数がかかってしまいます。
React Nativeはこれまで5年間市場に出回っています。非常に人気があるJavaScriptのフレームワークであるため、開発者を見つけることは簡単です。また、ネイティブ開発と比較してソースコードの70％から90％まで再利用可能です。ブリッジとネイティブが混ぜ込まれるためにプラットフォームごとの最適化作業がよく発生しますが、それにしてもReact Nativeでの開発時間は大幅に短縮できます。

2.8. UIコンポーネント, API開発

Flutter- リッチコンポーネント： FlutterのUIコンポーネント、デバイスAPIアクセス、ナビゲーション、テスティング、ステートフル管理、MaterialとCupertinoのテーマなどはとても充実しています。サードパーティのライブラリーを使用しなくてもスムーズに開発できるメリットがあります。 React Native – レスコンポーネント： React Native は基本的にブリッジを通してプラットフォームのネイティブコンポネントを使用し、コア機能が少ないので、サードパーティのライブラリに大きく依存します。

2.9. アプリの性能

この章ではネット上に公開されているいくかの性能テストを参考にします。以下はネイティブ言語とクロスプラットフォームのPI（パーフォマンスインデックス）テスト結果です。

CPU-intensive test (Gauss–Legendre algorithm) - iOS iOS:

• Objective Cは最上位の性能テスト結果
• Flutterは案外にSwiftよりも性能が良い
• React NativeはObjective Cより20倍遅い

CPU-intensive test (Borwein algorithm) - iOS iOS:

• FlutterはReactNativeより3倍速い

CPU-intensive test (Gauss–Legendre algorithm) - Android CPU-intensive test (Borwein algorithm) - Android ウィジェットをレンダリングする為の専用エンジンの使用と直接ネーチブ言語に通訳により、のパフォーマンスはReact Nativeより良いです。

2.10. テストサポート

Flutter：ユニットテスト、ウィジェットテスト、結合テストなど、様々なテスト機能が満載されています。さらにドキュメントも詳しく、分かりやすくできているので、このコンテストの勝者と思われます。
React Native: Javascriptのフレームワークとしていくかのユニットテストツールを提供しています。しかし、UIテストや結合テストのレベルまでは支援していません。ユニットテスト以外のテスト作業にはサードパーティ製のツールを利用することが可能ですが、公式なツールでないため選定することが面倒かもしれません。

3. Flutter と React Native の今後の展開は?

Flutter： GoogleはこれからもFlutterを開発し続け、Flutterの開発者コミュニティが拡大していきつつあります。バックエンドにもフロントエンドにも、IoTやFushia（Googleが開発しており、幅広くのデバイスで動作する次世代OS）にもFlutter（Dart）で開発できることをGoogleが目指しています。また、Dartのパフォーマンス向上に大きく投資しています。Javascriptのmixinやasync await、SwiftのNullチェックなど、他言語の良いところを見習ってDart独自の機能開発もしているところです。
React Native：現在Facebookはスケーリング 課題について研究しながら、React Nativeの再構築をしています。React Nativeの将来はその結果によって左右します。再構築は現在のコンポネントに影響を与えません。Project Fabric（一部終了）はJavascript BridgeのBottleneck状況の解決とネイティブのパフォーマンス向上ができると有望です。

4. ではどのフレームワークを選ぶべきか？

FlutterもReact Nativeもどちらも長所と短所を待っています。具体的な案件にどのフレームワークを選ぶべきかは各要件を考慮しながらじっくりと検討することが重要です。

4.1. クロスプラットフォーム が選ばれないケース

• ハードウェアに関わる機能が多く必要なアプリ：そういう機能はほとんどクロスプラットフォーム徹底的にサポートできませんので、アプリのパフォーマンスに影響を与えます。
• そういう機能に対して、たとえクロスプラットフォームで各機能のネイティブモジュールを開発して、パフォーマンスを向上するようにしても、個別の2つのネイティブアプリを開発するより時間がかかるでしょう。
• 小さなアプリ：アプリのサイズができる限り小さくしたい場合やアプリのローンチ速度を早くしたい場合にはネイティブで開発した方がいいです。
• 上記の2ケース以外、ダウンロードサイズとインストーラーサイズがAppleとGoogleのガイドラインに従う場合（Googleはダウンロードサイズが50MB以下、インストールサイズが100MB以下；Appleは両方が100MB以下）、フラッターが検討可能

4.2. Flutterが選ばれないケース

• フラッターは新しいフレームワークなので、ネイティブモジュールと第三者のライブラリーに頼ってます。サポートのライブラリ数も多くはないです。なので開発中のアプリが何か特別な機能を持つかどうか、その機能にサポートするライブラリがあるかどうか確認が必要です。サポートが少ない場合フラッターを使わない方がいいです。使ってもフラッターパッケージに作り直す必要があります。
• フラッターの問題が多いくあり、iOS・アンドロイド・WEB・Fuschiaなど多くのプラットフォームでどれも問題が残ってます。パッケージやウィジェットに問題があればネイティブに深くまで調べて直す必要があります。

4.3. Flutterが選ばれるケース

• アンドロイド版とiOS版のUIデザインが全く同じアプリ
• アニメーションの良いアプリ：フラッターの方がアニメーションと画面遷移の支援機能が強い（特にデータとコンポネントが多い画面）

4.4. React Nativeが選ばれないケース

バックグラウンドスレッドでの処理が多いアプリの開発にはリアクトネイティブを選ばない方がいいです。
この記事ではフラッターとリアクトネイティブの特徴を明確にしてきました。アプリ開発しようとしているが、この２つの クロスプラットフォーム フレームワークに迷っておられる方のお役に立てましたら幸いです。

お見積もり・ご相談はこちら