【初心者向け】Flutter と ReactNative どっちを選ぶべき？

この記事の趣旨

スマホアプリ開発の永遠の課題として、iOS/Android両方のアプリを作成するとなるとコストがかかってしまうというものがあります。

「同じものを作るだけなんだから簡単でしょう？」、と思われるかもしれませんが、単純にアプリを作るとなると、iOS/Androidそれぞれでプログラミングを行う必要があります（設計やテストについては共通化できる部分もありますが、基本的にはネイティブコードで実装する必要がある）。

これを解決するのがクロスプラットフォーム開発です。これは簡単に言うとひとつのプログラムでiOS/Android両方向けのアプリが作成できるようなイメージです（正確には他プラットフォームを含む）。ここ最近では、FlutterとReactNativeが用いられることが多くなっており、本記事ではそれぞれのメリット・デメリットを踏まえて違いについて簡単に説明します。

紹介

それぞれについて一言で説明すると・・・

Flutter

• 作者：Google
• 公式ページ
• 使用するプログラミング言語：Dart
• 見た目：iOS/Android共通のマテリアルデザイン
• 対応プラットフォーム：iOS/Android/Windows/macOS/Linus/Web/組み込み

FlutterはUIパーツやツールを兼ね備えたアプリソフトウェア開発キット（SDK）です。開発者はモバイル（iOS/Android）、デスクトップ（Windows/mac/Linux）、Web、組み込みデバイス向けのアプリケーションを簡単に開発することができます。基本的には単一のソースコードで実現することが可能です。

TOYOTAが組み込みデバイスでの活用を採用した実績もあり、かなり期待されていることがうかがえ、オープンソースのライブラリ数も急成長している状況です。

React Native

• 作者：Facebook
• 公式ページ
• 使用するプログラミング言語：Javascript
• 見た目：ネイティブアプリと標準的なUI（iOSとAndroidで表示が異なる）
• 対応プラットフォーム：Android/iOS/Web

React NativeはJavaScriptを使用するモバイルアプリケーションフレームワークです、単一のソースコードでiOS/Androidアプリ開発が可能です。Reactと聞くとモバイルWebアプリを想像されるかもしれませんが、少し違います。React Nativeはスマートフォン内にあるJavaScriptエンジンを用い、そのなかでネイティブのUIコンポーネントを呼び出すことで動作します。

React Nativeを使用した代表的なアプリとしては、Facebook、Instagramなどが挙げられます。

FlutterとReactNativeの比較

ここまでの情報を見ると、Flutterのほうが対応プラットフォームも多いし、最新技術で伸びも期待できる！といった感じに見えますが、実際はそれぞれのメリットデメリット、得意不得意があるため、選定の際は注意が必要です。

Flutterの長所

実装効率

Flutterにはホットリロードと呼ばれる、プログラムの変更を瞬時に上書きし、デバイス上での表示や動作をすぐに確認できる機能があります。普通のアプリ開発であれば、

見た目が気に食わない→ソースコード直す→再ビルド→再インストール

といった手順を踏むところをリアルタイムで確認できるため、非常に効率的です。

また、単一のソースコードで複数プラットフォームのアプリ開発が可能で、開発効率が良いと言えます。

見た目の統一

Flutterはネイティブのシステムコンポーネントに依存せず、古い端末・古いOSバージョンであっても見た目が同じです。Googleが提唱するマテリアルデザインに準拠しており、特にデザインにこだわらなくても、勝手に一般的なスマホアプリのような見た目になってくれます。

Flutterの短所

成長途中であること

ReactNativeと比較すると発展途上と言えます。ただ、TOYOTAが採用するなどの実績を見る限り、成長し続ける可能性が高いと考えられます。

アプリ（バイナリ）の容量

Flutterで作成したアプリは、ネイティブで実装したアプリと比較すると容量が大きくなります。これは、DartVMや専用のエンジンなどがアプリの中に含まれるためです。

React Nativeの長所

実装効率

Flutterと同じように、ホットリロード機能を持っています。また同じようにまた単一ソースコードで複数プラットフォームアプリの開発が可能です。厳密には、Webアプリ向けに開発するのであればReact Native for webといったライブラリを用いて開発することになります。

JavaScriptを使用する点

JavaScriptは多くのWeb開発者が開発スキルを持っており、実装に同じ言語を使える点は、開発効率・導入コストの点でメリットと言えるでしょう。

React Nativeの短所

UIの問題

ネイティブコンポーネントを使用しているということは、iOS/Androidのバージョンアップ、SDKのアップデートによって見た目も気付かぬうちに変わってしまう可能性があります。

アプリ（バイナリ）の容量

Flutterと同様に、ネイティブで実装したアプリと比較すると容量が大きくなります。React NativeではJavaScriptVMを実行できる必要がありますが、Androidには標準でこの機能が搭載されておらず、サポートするためのライブラリをAndroidアプリ内に抱える必要があります。iOSアプリの場合はこの必要はありあmせんが、それでも多少はネイティブアプリよりも容量は大きくなるようです。

最後に

これだけ見ると、そこまでそれぞれに大きな差はなくどちらを採用すべきかが判断しづらいと思いますが、事業者・開発者目線で言えば、以下のことを天秤にかけて選択すべきです。

•  Dartという言語を新たに学ぶコスト
  • JavaScriptを熟知しているのにFlutterを選択する必要があるか？
  • Dartはオブジェクト指向型であり、他のjavaといった言語を熟知していれば学習コストは比較的低いのではないか？
• デザイン（UI)について
  • 統一されたマテリアルデザインが良いのであればFlutter
  • 何も考えずにネイティブのコンポーネントに近づけたいのであればReact Native
    • ただし、前述したデメリットあり

注意点として、アプリの要件・仕様・機能によってはAndroid/iOSネイティブアプリ開発の知識が必要となってきます。もちろん、様々なライブラリ・プラグインといったものが存在しており、必須というわけではありませんが、１００％不要というケースは稀かもしれません。