Experiments Never Fail

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

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

これでまた、にわかにクロスプラットフォーム開発ツール(以下 "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 :thumbsup: :thumbsup: :thumbsup:
Android :thumbsup: :thumbsup: :thumbsup:
デスクトップ(Windows) :thumbsup:
デスクトップ(Mac) :thumbsup:
Web(フロントエンド) :thumbsup: :thumbsup:
Web(バックエンド) :thumbsup: :thumbsup: :thumbsup:

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

開発者に提供される API #

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

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

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

[^5]: Titanium Mobile はこれが多かったという印象が深く心に刻まれています。。。

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

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

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

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

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

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

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

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

[^7]: Flutter や DelphiXE(の FireMonkey) では GPU を利用した高速なレンダリングが可能になっているとのことです。
[^10]: https://twitter.com/najeira/status/968774727022948352 を見て、同じ理由で昔 Flash AIR を使ったのを思い出しました。
[^14]: https://twitter.com/najeira/status/969106318098223104 によると、現行の Flutter では実質行えない模様です。

比較表 #

結局、言語もIDEも含めてモバイルネイティブアプリを主対象とした X-Plat Tools の比較表を作ってしまった。。。

※ゲームエンジンやWebViewを使用するタイプの X-Plat Tools は、今回の比較軸とは変わってくると思うので載せていません(が、実際にはもちろんこれらも選択肢に加えるべきです)。

Xamarin ReactNative Flutter Titanium Mobile RubyMotion Qt Delphi Adobe Air Native Script RoboVM Kotlin X-Plat(予想)
(主な)提供者 Microsoft Facebook Google Appcelerator[^9] Scratchwork Qt Company Embarcadero Technologies[^8] Adobe Progress Software Xamarinが買収後死亡[^4] JetBrains
開発言語 C# JavaScript Dart JavaScript Ruby C++ Object Pascal Action Script JavaScript Java Kotlin
(主な)開発環境 Visual Studio As you like IntelliJ/VSCode[^12] Titanium Studio As you like As you like RAD Studio Flash Builder As you like Eclipse CLion[^13]
対応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.独自API[^6] A.独自API A.独自API A.独自API B.薄いラッパーAPI A.独自API A.独自API + B.薄いラッパーAPI[^1] A.独自API A.独自API + B.薄いラッパーAPI[^3] B.薄いラッパーAPI B.薄いラッパーAPI
UIの提供方式 あ.ネイティブ あ.ネイティブ い.独自 あ.ネイティブ あ.ネイティブ あ.ネイティブ?[^2] い.独自+あ.ネイティブ[^11] い.独自 あ.ネイティブ あ.ネイティブ あ.ネイティブ

[^1]: Delphiならここまでできる︕ iOS / Androidネイティブアプリ構築術 参照。
[^2]: エイリアンウィジェット と呼ばれるネイティブに依存しないViewも存在する模様。
[^3]: NativeScript Documentation Chapter 6—Accessing Native APIs 参照。
[^4]: https://github.com/robovm にリポジトリはある模様。
[^6]: Xamarin.Android, Xamarin.iOS などは 「B」、Xamarin.Forms というフレームワークは 「A」 に該当します。
[^8]: Embarcadero Technologies は IDERA に買収され、現在は小会社となっています。
[^9]: Appcelerator は Axway に買収され、現在は小会社となっています。
[^11]: コメント より。指定によりネイティブに描画させることもできるとのことです。
[^12]: Get Started: Configure Editor - Flutter では IntelliJ と VS Code が紹介されています。
[^13]: Kotlin/Native - Kotlin Programming Language

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

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

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

例えば Flutter は美麗なアプリを迅速に開発できる、と謳われていますが、個人的には Webアプリプラットフォームの kintone をイメージさせます(筆者は kintone について、Flutter と同じく『美麗なWebアプリを迅速に開発できるツール』と(主観で)認識しています。対して Xamarin や React Native は Salesforce や SharePoint のように「なんでもできるが作るのはやや大変である」と相対的に思います)。
また Flutter について、「標準UIだけでなく凝ったUIも容易に実現できる」とのご意見をいただきました
さらに、 React Native も、「Webの技術(CSSやAnimated API)でカスタムUIを用意に実現できる」とのツイートがあります
この記事は推測も多く含んでいるので、事実は、経験者・識者の方の情報を信じるのが一番です。

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

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

参考 #

published at tags: Kotlin Xamarin reactnative Flutter