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アプリに対応するかで選択肢が大きく変わります。
X-Plat Tool が開発者にどんな「API セット」を提供するかを比べてみましょう。 ここでは２つに分類してみます。
この方式の X-Plat Tool は、それ専用のAPIセットを開発者に提供します。
例えば Flutter では Stack というレイアウトクラスを提供しますが、これは Android の FrameLayout に近いものと考えられます。
あるいは JSX や XAML などの DSL(Domain Specific Language) を使用する場合もあります。React Native では画面のデザインは JSX(return で HTML っぽいタグを返すアレ) を使用します。
こちらの方式は、プラットフォーム固有の API を、X-Plat Tool の言語でラップして提供します。Xamarin(Xamarin.Android)では、Android SDK の API が、ほとんどそのまま C# から呼び出せます。例えば Android SDK の android.location.LocationManager は、 Xamarin では Android.Locations.LocationManager として利用できます。
アプリのUIは、エンドユーザーの反応に最も影響するため、特に注意が必要です。 こちらも２つに分類しています。
この方式では、X-Plat Tool での UI定義は プラットフォーム固有の UIパーツ にマップされます。例えば React Native での <Text> タグは、Android では TextView 、iOS では UITextField が使用されます。
こちらの方式は、ネイティブのUIパーツは使わず、X-Plat Tool が持つレンダリングエンジンを使用して自力でUIパーツを描画し、マウスやキーボードのイベントも自力でハンドリングして操作感を提供します。 （インターネット老人会の皆さまには「Adobe の Flash アプリだよ」とでも言えば伝わるかと思います。）
結局、言語も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 | Appcelerator9 | Scratchwork | Qt Company | Embarcadero Technologies8 | 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/VSCode12 | Titanium Studio | As you like | As you like | RAD Studio | Flash Builder | As you like | Eclipse | CLion13 |
| 対応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.独自API6 | A.独自API | A.独自API | A.独自API | B.薄いラッパーAPI | A.独自API | A.独自API + B.薄いラッパーAPI1 | A.独自API | A.独自API + B.薄いラッパーAPI3 | B.薄いラッパーAPI | B.薄いラッパーAPI |
| UIの提供方式 | あ.ネイティブ | あ.ネイティブ | い.独自 | あ.ネイティブ | あ.ネイティブ | あ.ネイティブ？2 | い.独自+あ.ネイティブ11 | い.独自 | あ.ネイティブ | あ.ネイティブ | あ.ネイティブ |
月並みなまとめですが、クロスプラットフォーム開発ツールを選択するには、
を評価し、さらに開発するアプリの性質に応じて、
を検討することになると思います。 (もちろん 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 にはとても期待しています。うまく進化して流行ってくれれば、(現状での)モダンな言語で、プラットフォーム全方位な開発が実現できるんじゃないかなあ、と。
単純な比較表には現れない得意・不得意点もあるはずなので、日頃からアンテナ高く、できればたくさんつまみ食いしておきたいですね。