【NTQ Engineer Insight】FlutterとReact Nativeを比較してみた
クロスプラットフォームの話をするには、React NativeとFlutterの2つのプラットフォームについて言及せざるを得ません。React NativeとFlutterはどちらもオープンソースプラットフォームですが、それぞれ特徴があります。
この記事では、FlutterとReact Nativeの概要を説明し、比較しました。
React Nativeとは？
React Nativeは、クロスプラットフォーム開発で使われるフレームワークです。JavaScript言語を使用してモバイルアプリを構築するためのプラットフォームで、単一のコードベースを使用して、Reactと同じようにAndroidとiOSの両方のアプリを開発することができます。
React Nativeはモバイルウェブアプリではありません。React Nativeは、通常のiOSおよびAndroidアプリと同じ基本的なUIビルダーコンポーネントを使用します。つまり、Java、Kotlin、Swiftでビルドする代わりに、JavaScriptでビルドして、AndroidおよびIOSで同じコンポーネントを出力します。React Nativeはフラッターのウィジェットと同じコンポーネントを使用します。
React Nativeは、2013年にFacebookの内部プロジェクトとして開発され、2015年に正式にリリースされました。
React NativeはFlutterよりも古く、より大きなコミュニティを誇っています。 FacebookチームがAPIを安定させるだけでなく、根本的な問題の修正に集中するための十分な時間があったという事実は言うまでもありません。
React Nativeが使われているアプリには以下のようなものがあります。
Flutterとは？
Flutterは、Android、iOS、デスクトップでマルチプラットフォームでアプリケーション開発するためのオープンソースライブラリです。
Flutterは、Dartを使用して開発するため、高速で動きます。
また、ウィジェットを使用してUIを作成することができるため、すばやく簡単にカスタマイズが可能です。
Flutterは、2018年2月にGoogle開発者のグループによってベータ版が開発、リリースされました。同年、7月には正式版がリリースされています。
Flutterは歴史が浅いものの、成長中のコミュニティが複数存在しています。Flutter 2.0は、開発者のフィードバックに応じて何百もの変更をしながら、成長しています。
Flutterで開発されているアプリとしては、下記のようなものがあります。
- Stadia: Googleのゲームプラットフォーム
- Xianyu: アリババが運営する中国版メルカリ
- Google広告アプリ
- eBay Motors
React NativeとFlutterのメリット
React Native
React Nativeはアプリの実行中にコードを更新するため、開発者はアプリを再構築しなくても変更をすぐに確認できます。
React Nativeは、多くの開発者に知られているJava Scriptを使用します。また、静的に型付けされたプログラミング言語を好む開発者の場合は、Typescriptを使用できます。
また、リリースから7年が経っており、Facebookが非常に安定したAPIを提供していたり、大規模で活発なコミュニティが数え切れないほどのチュートリアルを提供しています。
また、React Nativeのコミュニティはよく使われる機能のほとんどに開発をサポートするライブラリを公開しており、開発にかかる時間が短縮できます。
Flutter
FlutterもReact Nativeと同様、アプリの実行中にコードを更新するため、開発者はアプリを再構築しなくても変更をすぐに確認できます。
また、FlutterはSkiaグラフィックライブラリを使用しているため、ビューが変更されるたびにUIが再描画され、ほとんどの作業はGPUによって処理されます。そのため、Flutter UIは60fps/秒の画面表示をスムーズに提供します。
さらにFlutterはネイティブコンポーネントを使用しませんが、独自のカスタムウィジェットのセットを使用しますので、ネイティブに依存せずにユーザーフレンドリーなUIを自由に作成できます。古いデバイスでも同じUIが表示できるため、古いデバイスのUIサポートについても心配する必要はありません。
React NativeとFlutterのデメリット
React Native
実際にはネイティブではなく、ネイティブに近いだけであり、UXとパフォーマンスはネイティブアプリと同じにはなりません。サイズも、Java Scriptをサポートする追加のパッケージを実行する必要があるため、ネイティブアプリよりも大きくなっていまいます。
また、コンポーネントのセットにはほとんど組み込みのサポートがなく、そのほとんどは開発を高速化するために追加の外部ライブラリを使用する必要があります。また、それらの多くの外部ライブラリには低品質なものも多く、品質向上の努力はなされていません。
新しいプロジェクトを設定するためのオプションが非常に多く、ライブラリの使用方法を理解するのに長い時間がかかることがあります。
Flutter
React Nativeとの比較においては、Flutterで使用されるDartはJava Scriptほど人気がありません。それもあり、コミュニティが若く、APIがあまり安定していなかったり、ライブラリとサポートもReactNativeほど豊富でなかったりします。
React Nativeと同様、Flutterで作成されたアプリケーションのサイズも、ネイティブアプリのサイズよりもはるかに大きくなります。ただし、フラッター開発チームは、フラッターで開発されたアプリケーションのサイズを縮小するために取り組んでいます。
どんなときにReact NativeとFlutterのどちらを選ぶべきか？
一般的には下記が決定時の要因となります。
・Flutter:
開発者がDartを知っている。
魅力的なUIでブランドデザインを意識したい。
市場投入までの時間を短縮したい。
・React Native:
開発者がJava Scriptを知っている。
ネイティブUIコンポーネントを使用してアプリケーションのGUIを構築する。
強力で成熟したコミュニティのサポートが必要。
ネイティブアプリの高いパフォーマンスを求めている。
React NativeとFlutterの比較表
まとめ
以上、FlutterとReact Nativeの概要を説明し、比較しました。
クロスプラットフォーム、魅力的なUI、優れたネイティブパフォーマンス、市場投入までの時間の短縮、プログラミング環境でのDartの競争力を活用したい場合は、Flutterを選択するべきです。
一方、クロスプラットフォームアプリの開発において、より強力で成熟したコミュニティのサポート、ネイティブアプリのパフォーマンス、JavaScriptの人気を活用したい場合は、React Nativeを選択したほうがいいです。
NTQジャパンはモバイル開発に強みがあり、クロスプラットフォームでの開発も数多くご支援してきました。
クロスプラットフォームでの開発、モバイル開発に興味のある方は是非、ご連絡ください。
