Xamarin と React Native と Flutter の違いを正しく理解しよう

DroidKaigi2018 でもセッションがあった Flutter がβ版になりました。

• グーグル、Android/iOS対応のUIフレームワーク「Flutter」ベータ版を公開 - CNET Japan

これでまた、にわかにクロスプラットフォーム開発ツール(以下 "X-Plat Tool" と略)が盛り上がってる気がします。
Flutter が出たからと言って、Xamarin や React Native など、先行する様々な X-Plat Tools が死ぬわけでもなく、ただ選択肢が増えて嬉しいやら戸惑うやら、ということです。

ここでは、Flutter と、先行する React Native、Xamarin を(独断を交えて)比較して、それらの違いを見てみたいと思います。

共通化できる(とされる)プラットフォーム

X-Plat Tool がどのプラットフォームまでカバーするかを比べてみます。ツールそのものに加え、フレームワークや言語自体も含めた広範な考えです。

Platform	Xamarin/.NET	ReactNative/JavaScript	Flutter/Dart
iOS
Android
デスクトップ(Windows)
デスクトップ(Mac)
Web(フロントエンド)
Web(バックエンド)

概ね、デスクトップアプリに対応するか、Webアプリに対応するかで選択肢が大きく変わります。

開発者に提供される API

X-Plat Tool が開発者にどんな「API セット」を提供するかを比べてみましょう。
ここでは２つに分類してみます。

A. 開発者は、X-Plat Tool の 独自API を利用する

この方式の X-Plat Tool は、それ専用のAPIセットを開発者に提供します。
例えば Flutter では Stack というレイアウトクラスを提供しますが、これは Android の LinearLayout に近いものと考えられます。
あるいは JSX や XAML などの DSL(Domain Specific Language) を使用する場合もあります。React Native では画面のデザインは JSX(return で HTML っぽいタグを返すアレ) を使用します。

• 新たに API を学習する（＝プラットフォーム固有のAPI知識が活かせない）必要がある
• プラットフォーム固有の機能を使用するには Kotlin や Swift などネイティブの開発言語をツールを使わなければならない(＝ APIの相互運用性が低い )
• 複数のプラットフォームでコードを共通化できる(ｲﾏｻﾗﾅﾆｦｲｯﾃﾙﾝﾀﾞ)
• "共通API" と言いながら iOS でしか(Android でしか)動作しないかも知れない¹

B. 開発者は、プラットフォーム固有の (薄いラッパー)API を利用する

こちらの方式は、プラットフォーム固有の API を、X-Plat Tool の言語でラップして提供します。Xamarin(Xamarin.Android)では、Android SDK の API が、ほとんどそのまま C# から呼び出せます。例えば Android SDK の android.location.LocationManager は、 Xamarin では Android.Locations.LocationManager として利用できます。

• それ自体はコードの共通化にならない(言語の標準APIやフレームワークでしか共通化できない)
• プラットフォーム固有のAPIが X-Plat Tool の言語からダイレクトに呼び出せる(＝ APIの相互運用性が高い )
• (上記であることから)開発やデバッグが一つの環境でシームレスに行える

できあがったアプリケーションのユーザーインターフェース

アプリのUIは、エンドユーザーの反応に最も影響するため、特に注意が必要です。
こちらも２つに分類しています。

あ. ネイティブのUIパーツを利用する

この方式では、X-Plat Tool での UI定義は プラットフォーム固有の UIパーツ にマップされます。例えば React Native での <Text> タグは、Android では TextView 、iOS では UITextField が使用されます。

• 複数のプラットフォームのUIパーツ群で、共通で存在する機能しか提供できない
• エンドユーザーにネイティブの「忠実な」UIを提供できる
• プラットフォーム固有OSSライブラリが比較的利用しやすい(基本的にはブリッジしてあげれば良い ＝ UIパーツの相互運用性が高い)

い. X-Plat Tool が自力でUIパーツを描画する

こちらの方式は、ネイティブのUIパーツは使わず、X-Plat Tool が持つレンダリングエンジンを使用して自力でUIパーツを描画し、マウスやキーボードのイベントも自力でハンドリングして操作感を提供します。
（インターネット老人会の皆さまには「Adobe の Flash アプリだよ」とでも言えば伝わるかと思います。）

• ネイティブのUIパーツと見た目や操作感が微妙に異なる(かも知れない)
• ネイティブのUIに比べて動作がもっさりする(かも知れない)²
• プラットフォーム固有OSSライブラリが比較的利用しにくい(独自レンダリングエンジンの影響を考慮する必要がある ＝ UIパーツの相互運用性が低い)
• 「スタイル」を切り替えるだけで画面の Look and Feel を変更できる
• 複数のプラットフォームに「完全に同一のUI」を提供できる³

比較表

結局、言語もIDEも含めていろんな X-Plat Tools の比較表を作ってしまった。。。

• Xamarin
• React Native
• Flutter
• Titanium Mobile
• RubyMotion
• Qt
• Delphi
• Adobe AIR
• NativeScript
• RoboVM
• Kotlin X-Plat(予想)

	Xamarin	ReactNative	Flutter	Titanium Mobile	RubyMotion	Qt	Delphi	Adobe Air	Native Script	RoboVM	Kotlin X-Plat(予想)
(主な)提供者	Microsoft	Facebook	Google	Appcelerator4	Scratchwork	Qt Company	Embarcadero Technologies5	Adobe	Progress Software	Xamarinが買収後死亡6	JetBrains
開発言語	C#	JavaScript	Dart	JavaScript	Ruby	C++	Object Pascal	Action Script	JavaScript	Java	Kotlin
(主な)開発環境	Visual Studio	As you like	Android Studio	Titanium Studio	As you like	As you like	RAD Studio	Flash Builder	As you like	Eclipse	IntelliJ IDEA
対応Platform(言語含む)	iOS, Android, Win, Mac, Web(Back)	iOS, Android, Web(Front), Web(Back)	iOS, Android, Web(Front), Web(Back)	iOS, Android, Web(Front), Web(Back)	iOS, Android, Web(Back)	iOS, Android, Win, Mac, Web(Back)	iOS, Android, Win, Mac	iOS, Android, Win, Mac	iOS, Android, Web(Front), Web(Back)	iOS, Android, Win, Mac, Web(Back)	iOS, Android, Win, Mac, Web(Front), Web(Back)
提供される API	B.薄いラッパーAPI + A.独自API7	A.独自API	A.独自API	A.独自API	B.薄いラッパーAPI	A.独自API	A.独自API + B.薄いラッパーAPI8	A.独自API	A.独自API + B.薄いラッパーAPI9	B.薄いラッパーAPI	B.薄いラッパーAPI
UIの提供方式	あ.ネイティブ	あ.ネイティブ	い.独自	あ.ネイティブ	あ.ネイティブ	あ.ネイティブ？10	い.独自	い.独自	あ.ネイティブ	あ.ネイティブ	あ.ネイティブ

月並みなまとめですが、クロスプラットフォーム開発ツールを選択するには、

• ターゲットにするプラットフォーム
• 提供者の規模、サポート、継続性
• 開発言語や開発ツール vs チームメンバのスキルセット(あるいは習得容易性)

を評価し、さらに開発するアプリの性質に応じて、

• X-Plat Tool の標準機能で行えない機能がどのくらいあるか？
• X-Plat Tool の標準機能で行えない機能をどのように補完するか？(共通側で実装するか、ネイティブ側で実装するか、etc)

を検討することになると思います。
(もちろん X-Plat Tool を「採用しない」という選択肢も含めて。
あるいは Cordova のようなWebViewベースのX-Plat開発ツールもあれば、Unityのようなゲームエンジン系のX-Plat開発ツールも場合によっては候補になり得ます。)

例えば Flutter は美麗なアプリを迅速に開発できる、と謳われていますが、個人的には Webアプリプラットフォームの kintone をイメージさせます（対して Xamarin や React Native は Salesforce のような「なんでもできる」感があります）。標準で提供されるUIで要件を満たせるアプリは Flutter で十分だけど、それを超える要件なら他のツールを検討したいな、と感じます。

Kotlin Multi platform にはとても期待しています。うまく進化して流行ってくれれば、(現状での)モダンな言語で、プラットフォーム全方位な開発が実現できるんじゃないかなあ、と。

単純な比較表には現れない得意・不得意点もあるはずなので、日頃からアンテナ高く、できればたくさんつまみ食いしておきたいですね。

参考

• DroidKaigi2018で発表したFlutterアプリの話のスライド補足 - Konifar's WIP
• React Native Androidはなぜ動くのか - DroidKaigi 2018で喋ってきました+α - ナカザンドットネット
• Delphiならここまでできる︕iOS / Androidネイティブアプリ構築術
• Xamarin.Android で始めるクロスプラットフォームモバイルアプリ開発
• Titanium 最近の動向 (2016年)
• Xamarin 使いが Kotlin のマルチプラットフォーム対応コードを読んだ感想 - Qiita