【徹底比較】Flutter VS React Native

はじめに

今回の記事では、モバイルアプリ開発として有名なフレームワークである「Flutter」と「React Native」両方の特徴、決定的な違いを徹底解説する。

2022年11月現在では、モバイルアプリ開発としてFlutterが屈指の人気を誇っている。ところが、実はモバイルアプリを開発できるフレームワークはFlutter一択ではない。Flutter以外にモバイルアプリを開発できるフレームワークとしては、Meta(旧Facebook社)が開発したReact Nativeが挙げられる。

両者はどう違うのか。なぜ開発で使われているのか―そこで、今回の記事では特徴や課題点を徹底解説する。

本記事の対象読者

• モバイルアプリ開発で生計を立てているプログラマー
• Flutter、React Native両者の特徴を知りたい人
• モバイルアプリ開発案件を検討中で技術選定をされている人
• 本記事のタイトルが気になる人

Flutter

FlutterはGoogleが開発したクロスプラットフォームフレームワークである。2017年5月に初めてリリースされ、急速な成長を続け、開発者界隈でより人気を集めている。React NativeとFlutterの2021年の統計データを比較すると、Flutterが開発者の間でより人気になっていることがわかります。統計調査によれば、2020年には30%の回答者がFlutterを選択したのに対し、2021年には39%に増加したことが判明している。^[1]

Flutterの最大の特徴は、単一のプログラミング言語^[2]を使ってクロスプラットフォーム^[3]に対応したアプリケーションを作成できることだ。Web、モバイル、デスクトップなど様々なプラットフォームに対応している。^[4]

Flutterのもうひとつの大きな特徴はホットリロードである。この機能により、開発者はすべての変更を即座に確認できる。

https://github.com/flutter/flutter

メリット

• ウィジェットが豊富
• コミュニティが急速に成長している
• 公式ドキュメントが非常に充実している
• テストが少なくて済む
• アプリが速い。ホットリロードでリアルタイムで変更点を逐一把握できる
• Webやデスクトップ(Windows、macOSやLinux)に対応したアプリを開発できる

デメリット

• ネイティブ開発^[5]と比較すると、スマートフォンの最新機能が使えないなどいくらか劣る^[6]
• AndroidとiOS両方に対応したアプリケーションを開発できることを想定して開発されているので、アプリの容量が非常に大きい^[7]
• ネイティブ開発と比較して、ツールやライブラリのセットが限定されている

React Native

React NativeはMeta(旧Facebook社)によって開発されたフレームワークである。Flutterの競合のフレームワークとしては最も知られているだろう。例えば、以下のようなアプリがReact Nativeで開発されている。

• Facebook
• Instagram
• Pinterest
• Uber Eats

React NativeはReactをベースに開発されており、JavaScript(TypeScript)を使用してAndroidとiOS両方に対応しているアプリケーションを開発できる。単一のプログラミング言語でアプリを開発できるのはFlutterと共通している。

https://github.com/facebook/react-native

メリット

• ホットリロード機能がある
• JavaScriptの知識と経験があれば簡単に学習・開発できる^[8]
• コードを再利用できる
• コミュニティ活動が活発である
• 世界の有名なアプリケーションに使われている実績があり、Flutterよりも歴史が長くビジネス面で信頼されている

デメリット

• Flutterと同様にネイティブ開発に劣る場面がある
• モバイル開発にしか特化していないので、Flutterと比較して選択肢が限られる
• パッケージとライブラリの中には、長期間メンテナンスされていないものが少なくない
• Flutterと同様に、クロスプラットフォームに対応しているのでアプリケーションの容量がネイティブより大きい

実は、FlutterとReact Nativeは両方クロスプラットフォームを主戦場としているので、デメリットに共通点があることが少なくない。

決定的な違い：Flutter VS React Native

プログラミング言語

アプリケーション開発で使われているフレームワークには、その技術が使われているプログラミング言語に大きく依存する。

FlutterとReact Nativeの決定的な違いとして最初に考慮しなければならないことはプログラミング言語である。前者はDart言語、後者はJavaScript(TypeScript)を使っている。

UI

FlutterとReact Nativeには、アプリケーションのUI設計の仕組みが多少異なる。

Flutterは高度なカスタマイズを可能にするレイヤーアーキテクチャを提供するSDK^[9]である。一方で、React NativeがReactコンポーネントの構築に依存しており、ネイティブモジュールへの接続の橋渡しにJavaScriptを使用するのに対して、Flutterはそれをする必要なくコンポーネントすべてを管理できる。React Nativeの場合ははわずかな変更でもパフォーマンスに影響を与えるものの、Flutterは簡単にコンポーネントを管理することができる。

Flutterはレイヤー構造のため、UIを簡単かつ迅速にカスタマイズすることができる。さらに、Flutterの場合は公式ドキュメントで様々なウィジェットやアニメーションの実装方法が丁寧に解説されている。

その他

それぞれ丁寧に書くと記事が冗長化するため、簡潔に表にしてまとめる。

比較する特徴	Flutter	React Native
プログラミング言語	Dart言語	JavaScript(TypeScript)
言語の種類	コンパイル言語(静的型付け)	スクリプト言語(動的型付け)[10]
ウィジェット	豊富なウィジェットとアニメーション	OSのUIコンポーネントに依存する
公式ドキュメント	非常に質が高く、初心者でも簡単にアプリを開発できる	豊富なドキュメント
活用事例	Alibaba、Google Ads	Facebook、Instagram、Uber Eats、Pinterest
デプロイ	対応したパッケージがある	サードパーティ製のライブラリに依存する
Release	2017年5月12日	2015年5月26日

おわりに

今回の記事では、FlutterとReact Nativeそれぞれの特徴、共通点や相違点を徹底解説した。

本記事が読者の今後の技術選定をする上で少しでも参考になるものがあれば非常に幸いである。

余談

これはあくまで一個人の見解に過ぎないが、以下のように技術選択したほうが効率的にモバイル開発を進める上では妥当だと考える。

• 公式ドキュメント・情報量の豊富さで選ぶ→Flutter
• JavaScript(TypeScript)の知識をモバイル開発に応用したい→React Native

技術選択はトレードオフである。両者に絶対的な優劣はないので、自分の開発したいアプリケーションや得意な分野等に応じて適宜選択することが非常に重要だ。

周囲の意見に流されず、自分の開発したいアプリケーションに最適な技術を選択することが最も妥当であると言えよう。

参考サイト

https://fireart.studio/blog/flutter-vs-react-native-what-app-developers-should-know-about-cross-platform-mobile-development/

https://shift.infinite.red/flutter-is-better-than-react-native-fed10c92a768

https://javascript.plainenglish.io/flutter-vs-react-native-which-is-the-best-choice-for-2021-e695e79c6707

https://zenn.dev/tetsukick/articles/c297b6ee1e64397432e5

脚注

1. 海外の統計サイトStatistaによる調査。

2. FlutterはDart言語で開発されている。Dart言語は、もとはTypeScriptと同様にJavaScriptの問題を解決するために開発された。2011年頃に開発され、当初は人気がなかったものの、Flutterの登場で人気が急激に高まる。

3. クロスプラットフォームとは、WindowsやmacOSなど異なるプラットフォーム上で、同じ仕様のアプリケーションを動作させるプログラムのことを意味する。本記事で登場するFlutterとReact Nativeは両方ともクロスプラットフォームの開発が得意である。(厳密には異なるが)

4. 2022年11月時点で、FlutterはAndroid、iOS、Web、Windows、LinuxやmacOSすべてのアプリの開発に対応している。

5. 特定のコンピュータの機種やOS上で直接実行可能なプログラムで構成されたアプリケーションをネイティブアプリケーションと呼ぶ。詳細はe-wordsを参照。

6. ただし、Flutterの開発言語であるDart言語はは2022年8月31日のアップデートでObjective-CとSwiftに対応するようになる。それゆえ、iOSのネイティブ開発の特徴がFlutterでも生かされることがあるかもしれない。詳細はDart 2.18: Objective-C & Swift interopを確認。

7. そのため、特定の機能やプラットフォームに対応したアプリケーション(例えば、Android専用のアプリケーションを開発するときなど)を開発する際には自分でファイルを削除するなど、手動でカスタマイズする必要がある。

8. 特に、Reactの知識や経験が豊富であればReact Nativeの学習コストは非常に小さくなる。

9. Software Development Kitの略称。あるシステムに対応したソフトウェアを開発するために必要なプログラムや文書などをひとまとめにしたパッケージのこと。システムの開発元や販売元が希望する開発者に配布あるいは販売する。インターネットを通じて公開されているものもある。詳細はe-wordsを確認。

10. ただし、TypeScriptはDart言語と同じく静的型付け言語に該当する。