FlutterとReact Nativeは、クロスプラットフォームのソフトウェア開発における有力な選択肢です。それでも多くの人が、FlutterとReact Nativeのどちらがより良い選択肢なのかを迷っています。10分ほど時間を取り、この比較を読みながら、より納得感のある判断につなげてみましょう。
HDWEBSOFTのクロスプラットフォーム向け React Nativeアプリ開発 と Flutterアプリ開発 についてもご確認ください。
Flutterとは？
Flutterがより良い選択肢かを判断するには、まず丁寧に見ていく必要があります。FlutterはポータブルなUI toolkitであり、多数のwidgetとtoolsを備えた包括的なアプリケーションSoftware Development Kit（SDK）です。
Flutterの簡単な歴史:
- 2018年2月、Mobile World Congress – Flutter初のベータ版リリース
- 2018年4月、Google I/O – Flutter beta 2リリース
- 2018年5月、Google I/O – Flutter beta 3リリース
- FlutterがGitHubのtop 100 reposに入る
- 2018年6月 – Flutter Preview 1リリース
- 2018年9月 – Flutter Preview 2リリース
- 2018年11月 — Dart 2.1リリース
- 2018年12月、Google I/O – Flutter 1.0リリース
- この技術にとって重要なマイルストーン – 2018年12月以降、Flutterは安定版としてproductionに利用できるものと見なされるようになりました
- 2019年2月、Mobile World Congress – Flutter 1.2リリース
- 2019年5月、Mobile World Congress:
- Flutter 1.5リリース
- Flutter for the Web preview版
- Dart 2.3リリース
- 2019年7月、Flutter 1.7リリース
- 2019年9月、Flutter 1.9リリース
- Flutterは継続的に開発され、Googleは新しいバージョンを定期的にリリースしてきました。ここで言及されている最新バージョンは2.2.0で、2021年5月のGoogle I/Oで発表されました。
Flutterで作られた有名なアプリ
- AlibabaのXianyuアプリ
- Hamiltonアプリ
- Google Adsアプリ
- eBay Motorsアプリ
- Google Stadia
- Groupon
- Baidu Tieba
- Philips Hue
- Abbey Road StudiosのToplineアプリ
- Reflect
Flutter – メリットとデメリット
このセクションでは、Flutterの主な利点と課題を簡単に見ていきます。
Flutterのメリット:
Hot Reload
Hot ReloadはFlutterの大きな魅力の一つであり、多くのトップモバイルアプリ開発会社から評価されています。この機能により、Flutterではより動的で高速なアプリ開発が可能になります。開発者はcodebaseを実行中に変更し、その変更がアプリケーションへ即座に反映される様子を確認できます。言い換えれば、機能追加、bug修正、新しいアイデアの検証をすぐに行えます。
1つのcodebaseで2つ以上のモバイルプラットフォームへ対応
Flutterでは、開発者は1つのcodebaseを書くことで、iOS と Android の両方に対応する2つのアプリケーションを作れます。Googleは現在Flutter for the Webにも取り組んでおり、それが完了すれば、単一のFlutter codebaseでAndroid、iOS、Webをカバーできます。
HDWEBSOFTの人材プールから Flutter Developersを採用 する方法もご覧ください。
Testingを最大50%削減
同じtestを両方のプラットフォームで実行できるため、automated testsをおよそ50%減らせます。その結果、QAチームへの負担も軽減できます。
より高速なアプリ
Flutterアプリは、Skia Graphics Library を使用しているため、滑らかで高速に動作します。これにより、viewが変わるたびにUIが再描画されます。処理の多くはgraphics processing unitで行われます。その結果、Flutter UIは滑らかで、60fps（frames per second）を提供できます。
ユーザーに好まれるデザイン
Flutterはnative system componentsだけに依存していません。Frameworkのgraphics engineによって管理される独自のcustom widgetsを備えています。Flutterアプリはユーザーフレンドリーであり、React Nativeに対するFlutterの重要な優位点です。また、Flutterは自分のwidgetを簡単に作成したり、既存widgetをカスタマイズしたりしやすいように設計されています。
古いデバイスでも同じアプリUI
新しいアプリでも古いiOSやAndroidシステム上で同じように表示されるため、古いデバイスのサポートを過度に心配する必要がありません。
MVPに最適
潜在投資家に見せるためのMVP（Minimum Viable Product）を構築する必要があるなら、特に時間が限られている場合、Flutterはより良い選択肢です。
Flutterのデメリット:
開発者コミュニティの規模
React Nativeはより長く使われており、経験豊富な開発者コミュニティを持つため、多くの人は Flutterがより良い選択肢ではない と考えるかもしれません。さらに、Flutterの基盤となるプログラミング言語Dartは、JavaScriptほど広く使われていません。この事実を受け止めつつ、Flutterコミュニティはユーザーを教育し、経験を積み重ねるための時間を必要としています。
一方で前向きに見ると、2年前のFlutterはより小さく経験の浅いコミュニティであり、DartもJavaScriptよりニッチでした。現在のトレンドは、この領域でFlutterが競合を上回りつつあることを示しています。以下の統計をご覧ください。
- Stack overflow tag trends は、Flutterへの開発者の関心が大きく伸びていることを示しています。
- Udemyには257以上の Flutter courses があります（約1,410,000人の受講者）。
- また、75の Dart courses もあります（2021年5月時点で約608,000人の受講者）。
- React Native の数字はそれより低く、133コースで約866,000人の学生です。
- FlutterはGithubで120,000以上のstarsを持ち、React Nativeは95,300以上です。
新しいlibrariesとサポート
Googleに支えられているとはいえ、Flutterは比較的新しい技術です。そのため、必要な機能が既存librariesに必ず見つかるとは限らず、独自にcustom functionalityを構築しなければならない場合があります。
Continuous Integrationサポートが必要
FlutterはTravisやJenkinsのようなCI platformsへのサポートが不足しています。自動build、testing、deploymentを実現するには、開発者がcustom scriptsを使用し、維持する必要があります。
Platform risk
もしGoogleがプロジェクトを打ち切ることを決めれば、Flutterがopen-sourceであっても大きな打撃になります。
アプリサイズ
Flutterで書かれたアプリケーションはnativeアプリより大きくなります。Comparing APK sizes という記事も参考になります。ただし、FlutterチームはFlutter製アプリのサイズ削減に取り組んでいます。
React Nativeとは？
同様に、React Native がより良い選択肢かを判断するには、それが何かを理解する必要があります。React Native は、JavaScriptを使うopen-sourceのモバイルアプリケーションframeworkです。
React Nativeは何に使うのか？
React Nativeは次の用途に有効なframeworkです。
- クロスプラットフォーム開発
- JavaScript言語を使ったモバイルアプリ構築
- 1つのcodebaseでAndroidとiOSの両方のアプリを開発
- Reactと同じdesign思想の活用
React Nativeの簡単な歴史:
- 2013年夏、Facebook hackathon – React NativeはFacebook社内プロジェクトとして開始
- 2015年1月、React.js Conference – React Native 1 Previewリリース
- 2015年3月、F8 Conference – React Native正式ローンチ
- FacebookがReact Nativeを「利用可能でGitHub上で公開」と発表
- Lean Core – optional components/featuresを別repositoryへ移し、必要なときにアプリへ追加できるようにすることでアプリサイズを削減
- TurboModules – native modulesの扱いを改善
- React Native Fabric – UI layerの再設計
React Nativeで作られた有名なアプリ
- Fb Ads Manager
- Skype
- Tesla
- Bloomberg
- Wix.com
React Native – メリットとデメリット
Flutterがより良い選択肢なのか、それともReact Nativeなのかを判断するために、React Nativeの利点と弱点を見ていきましょう。
React Nativeのメリット:
Fast refresh
同様に、FlutterのHot Reloadは、実行中のアプリへ新しいcodeを直接反映できるため、開発プロセスを高速化します。Hot Reloadはアプリケーションのstateも保持するため、full reload時にcodeを失うリスクを避けやすくなります。
1つのcodebaseで2つのモバイルプラットフォームへ対応
React Nativeの1つのcodebaseは、現在AndroidとiOSの両方でスムーズに動作できます。さらにJavaScriptにより、web apps とcodeを共有することでクロスプラットフォームアプリケーションを実現できます。
以下は、iOSやAndroid以外のプラットフォーム（webやdesktop appsを含む）でも同時にcodeを作成できるlibraryの例です。
- React Native for Web – Android、iOS、webをサポート（TwitterはTwitter Lite作成にこれを使用）
- ReactXp – Skype Teamにより開発され、Android、iOS、Webをサポート。さらにWindows 10（UWP）でも動作
- React-native-windows – Microsoft teamにより開発され、Windows 10がサポートするすべてのdevices（PC、tablets、2-in-1、Xbox、Mixed reality devicesなど）をサポート
活発で大規模なコミュニティ
React Nativeは5年以上前にリリースされているため、FacebookにはAPIを安定させ、問題修正と課題解決に集中する十分な時間がありました。アプリサイズ削減など、いくつかの魅力的な改善にも取り組んでいます。
React Nativeには非常に大きな開発者コミュニティもあり、技術を学びやすくするtutorial、libraries、UI frameworksが数多く存在します。
特定技術に関する記事、tools、materialsを集めるという観点では、React NativeはXamarin、Flutter、Ionicよりもかなり有利な位置にあります。
React開発者にとって学びやすい
React NativeはReactファミリーに属しているため、Reactの経験がある人なら、新しいlibrariesを学び直さなくてもReact Nativeに取り組みやすいです。同じlibraries、tools、patternsを使えます。
HDWEBSOFTの React Native Developers についてもご覧ください。
Testingを最大50%削減
同じtestを両方のプラットフォームで実行できるため、必要なautomated testsをおよそ50%減らせます。その結果、QAチームへの負担を軽減できます。
React Nativeのデメリット
Nativeではない
どのクロスプラットフォームアプリケーションにも共通する問題として、UI体験やperformanceはnative appsと完全には同じになりません。類似度はおよそ80〜90%です。
最初から使えるcomponentsが少ない
React Nativeが標準でサポートするのは基本的なcomponentsだけです（buttons、loading indicators、slidersのように、プラットフォームに応じて適応するものも多くあります）。
一方、FlutterはMaterial Designを標準でサポートするよう設計されているため、frameworkとしてより多くのwidgetsを備えています。これは時間短縮につながります。Flutterを使う開発者は、簡単にcustomizeでき、クロスプラットフォームで一貫したpre-made widgetsにより、多くのviewsを作成できます。
放置されたpackagesが多い
React Nativeには膨大な数のlibrariesがあります。しかし残念ながら、その多くは品質が低いか、すでに放置されています。
壊れやすいUI
React Nativeはnative componentsを使用するため、OSのUI updateのたびにアプリcomponentsを即座にupgradeできます。しかし、これがアプリのUIを壊すことがあります。つまり、Native Components APIに一定の変更が加わると、updatesによって不安定になる可能性があります。
一方、FlutterではアプリUIがかなり安定しています。
アプリがnativeより大きくなる
React Nativeで書かれたアプリケーションはJavaScript codeを実行できなければなりません。Androidにはこの機能が標準でないため、JavaScript codeをサポートするlibraryをアプリに含める必要があります。その結果、native Android counterpartsよりも大きなアプリになりがちです。
React Nativeを選ぶべき時、Flutterを選ぶべき時
これはプロジェクトの具体的な条件と、チームのskillsのバランスによって変わります。
- チームがDartに慣れているなら、Flutterがより良い選択肢です。
- JavaScriptに精通しているなら、React Nativeがより良い選択肢です。
- アプリのGUIにnative UI componentsが必要なら、React Nativeが優位です。
- ブランドを重視したdesignが最優先なら、Flutterが有力な解決策になります。
FlutterとReact Nativeのどちらを選ぶべきか判断に迷う場合は、ぜひ HDWEBSOFT – Offshore Software Development Company にご相談ください。私たちはベトナム有数の Software Development Companies の一つとして、貴社プロジェクトの成功を支援します。
