クロスプラットフォーム開発手法の比較（Xamarin、Flutter、React Native）

# 概要

本記事は、AndroidとiOSのクロスプラットフォーム開発手法を比較したものです。
2018年12月に、
[ACCESS Advent Calendar 2018](https://qiita.com/advent-calendar/2018/access)の17日目の記事として一般公開しました。

本記事は2018年8〜9月頃に調査して社内勉強会で発表した内容なので、古い情報がありましたら教えてください。

# 比較
## 対応比較
|手法|iOS|Android|Windows|macOS|Web Frontend|
|---|:-:|:-:|:-:|:-:|:-:|
|Xamarin|○|○|○|○| |
|Flutter|○|○|○|○|○|
|React Native|○|○| | |○|

## 機能比較
|手法|主な開発環境|言語|API|UIパーツ|
|---|---|---|---|---|---|
|Xamarin|Visual Studio|C#|独自API+<br>ラッパーAPI|ネイティブ|
|Flutter|Intellij（Android Studio）|Dart|独自API|独自レンダリング|
|React Native|Atom|Javascript|独自API|ネイティブ|

|手法|アプリアーキテクチャ|主な採用/移行ターゲット|
|---|---|---|
|Xamarin|MVVM|C#が好きな人|
|Flutter|Reactive|オブジェクト指向言語の利用者|
|React Native|Reactive|JavaScriptが好きな人や、ReactでWebフロントエンド開発してた人|

|手法|強み|弱み|
|---|---|---|
|Xamarin|・UIはXamlかコードで選べる（Xamarin.Forms）<br>・Xamarin.NativeというラッパーAPIの存在<br>・通信やDB周りの共通化に向いている<br>・C#は歴史も長く、便利なライブラリが多い<br>|・レンダラーを作る手間がかかる（Xamarin.Forms）<br>・UIは共通化できない（Xamarin.Native）<br>・検索結果にFormsとNativeが混ざる<br>・定期的にVisual Studioがバグる<br>・UIのカスタマイズをしずらい<br>・公式ドキュメントの中途半端な翻訳<br>・アプリの起動が遅い（[改善Tipsあり](https://qiita.com/conduits/items/cd7338329c3b7c22dc9c)）|
|Flutter|・ホットリロードが爆速<br>・Widgetsの数が豊富<br>・標準パーツでそこそこ綺麗なアプリを作れる<br>・Intellij（Android Studio）を開発に使える<br>・フレームワークのバグが少なめ|・日本語の記事がまだ少ない<br>・dartのエンジニアが少ない<br>~~・Realm未対応~~（[プラグイン公開](https://github.com/mogol/flutter_realm/)🎉）<br>~~・マテリアルデザイン以外のUI作成に弱い~~|
|React Native|・ホットリロードが早い<br>・Flux（Redux）を採用でき、理解して使うとバグが減る<br>・困ってもググれば解決策がすぐ見つかる（ただし、すぐ次の問題で困る）|・JSXはスクリプトの中にXML、その中にスクリプトということもよくあり、そういうの嫌う人は受け付けない<br>・Flux（Redux）の理解が難しい（Facebookが推奨する状態管理モデル、単方向データフロー）<br>・npmの理解が必要<br>・使えるライブラリを探すのに苦労する<br>・サードパーティライブラリに依存することが多い<br>・まだ0.61.5で正式リリースされておらず、今後どうなるか未定|

# 社内で寄せられた質問と、それに対する回答
## ネイティブAPIのサポート具合は？（Notificationなど）
- React NativeはネイティブAPIをほとんどラップしていない。が、[ネイティブモジュールを呼び出す方法](https://qiita.com/somakihiro/items/99e4c76fde20ec2202f1)も存在する
- XamarinはXamarin.NativeというラッパーAPIによって、C#であらゆるネイティブAPIの処理を書ける
 - 表面上、[iOSもAndroidも100％のAPIをサポートしている](https://www.buildinsider.net/mobile/xamarin/01)と謳われている
- Flutterは[チャンネルという概念を用いてネイティブAPIやネイティブコードを呼び出せる](https://qiita.com/taku_xhift/items/10abc45e3a8b46c93706)
 - APIのサポート領域は、React Nativeと同等レベルと思われる

## ネイティブSDKのメジャーバージョンアップからのアップデートタイムラグはどれくらい？
ネイティブの追随の早さについては、確たる情報を得られなかったが、

- Flutterは始まったばかりなので[ほぼ最新をすぐに追随し、最新安定版リリースは約2週間毎](https://flutter.io/sdk-archive/#macos)
- Xamarinも[Xcode9対応を即日行う](https://www.xlsoft.com/jp/products/xamarin/xamarin_for_iOS_9_search_deeper.html)など以前からほぼ最新をすぐに追随している
- React Nativeの最新安定版リリースは約1ヶ月毎らしい
 - 追随という意味では3手法の中で最も遅い？

# その他の手法
## Unity
* やっぱりゲーム用
* 昔はボタンを作るにも画像が必要だったが、最近変わった

## Kotlin
* Kotlin Nativeが出てきた
* 次期クロスプラットフォーム開発かもしれない

# 最後に
今回、作成時間が圧倒的に足りず、後半はやっつけになってしまいました。
ご意見やより正確な/新しい情報を積極的にお待ちしています。

# 関連リンク
社内向け記事です。

- [クロスプラットフォーム開発手法の比較・RTA編（Xamarin、Flutter、React Native）](https://qiita.com/knagauchi/private/a0a2f6a4f1d618b93b9f)

# 参考リンク
各サイトの皆様に御礼申し上げます。

- [FlutterとReact Native(とXamarin)の正しい(?)比較](https://qiita.com/Cat_sushi/items/5644443516ebb79b9ab3)
- [Xamarin と React Native と Flutter の違いを正しく理解しよう](https://qiita.com/amay077/items/dff88e7ce6868615a9bb)
- [React Native をプロダクションで使ってわかった良かった点・悪かった点](https://qiita.com/nakanishy/items/9b8bb8fe5bee6a6c677b)
- [ReactNativeでネイティブモジュールを扱う方法](https://qiita.com/somakihiro/items/99e4c76fde20ec2202f1)
- [FlutterでのiOS API呼び出し](https://qiita.com/taku_xhift/items/10abc45e3a8b46c93706)
- [React Native開発の良い点と注意点まとめ](https://mmiyauchi.com/?p=1995)
- [10分間で分かった気になれるXamarin概要](https://www.buildinsider.net/mobile/xamarin/01)
- [iOS 9 のリリースと同じ日に Xamarin は iOS 9 をサポート](https://www.xlsoft.com/jp/products/xamarin/xamarin_for_iOS_9_search_deeper.html)
- [Flutter SDK Archive](https://flutter.io/sdk-archive/#macos)
- [SERAKU_みんなの情熱大学 スマホアプリクロスプラットフォーム開発比較講座](https://serakumedia.connpass.com/event/96958/)
- [Xamarin.Forms(iOS)でSearchBarのカスタマイズで困ったこと](https://qiita.com/conduits/items/cd7338329c3b7c22dc9c)