クロスプラットフォームフレームワーク比較（Flutter, React Native, Xamarin, Unity）

近年、Flutter や React Native といった新しいクロスプラットフォームフレームワークが登場してきました。

今、クロスプラットフォーム開発をするときに、どのフレームワークを選定すれば良いのか迷っている人のために、各フレームワークを比較して解説します。

# フレームワーク比較表
|                 | Flutter         | React Native    | Xamarin         | Unity           |
|:----------------|:----------------|:----------------|:----------------|:----------------|
| 開発会社         | Google          | Facebook        | Microsoft       | Unity Technologies |
| オープンソース     | ○               | ○               | ○               | ×                |
| 言語            | Dart            | JavaScript, TypeScript  | C#, F#              | C#                  |
| 開発環境        | Android Studio, IntelliJ IDEA, Visual Studio Code | Nuclide, Visual Studio Code | Visual Studio | Visual Studio, JetBrains Rider, Visual Studio Code  |
| GitHub スター数     | [170k](https://github.com/flutter/flutter) | [122k](https://github.com/facebook/react-native) | [5.6k](https://github.com/xamarin/Xamarin.Forms)               | -                |
| プラットフォーム | iOS, Android, Web, Windows, Mac, Linux | iOS, Android, Web, Windows, Mac | iOS, Android, Windows, Mac(, Web, Linux, Tizen) | iOS, Android, Web, Windows, Mac, Linux, PS5, Nintendo Switch, Xbox, Oculus |
| ホットリロード       | ○               | ○               | ○               | △                |
| UI              | 独自UI          | ネイティブUI       | ネイティブUI/独自UI | 独自UI              |
| 3D グラフィック  | △（[Flutter GPU](https://api.flutter.dev/flutter/flutter_gpu/)）               | ×               | ×               | ○                |
| 採用例          | Google 広告, Grab Driver, eBay Motors, 閑魚 | Instagram, Facebook, Discord, Uber Eats | 新型コロナウイルス接触確認アプリ, NHK 紅白, Nintendo Switch Online | Fate/Grand Order, ウマ娘 プリティーダービー, ポケモン Go, 原神                |

# Flutter と React Native はどちらを選べば良いのか？

フレームワーク比較表を見ていただければ分かる通り、両者は非常によく似ています。

React Native が既存の Web 技術をベースに設計されているのに対して、Flutter は全く一から設計されています。

すでに React を使って開発しているのであれば、ほとんど学習コストなしに React Native を導入できるでしょう。

Flutter は Google 社の開発した新しいプログラミング言語「[Dart](https://dart.dev/)」を使って開発します。
Dart は Java や C# と似た構文を持っており、これらのプログラミング言語を使用したことがある人であれば、習得は容易です。

また、UI にも違いがあります。
React Native はネイティブ UI を採用していますが、Flutter は独自 UI を採用しています。
つまり、React Native アプリはプラットフォームによって見た目が変わりますが、Flutter アプリはどのプラットフォームでも統一された見た目になります。
どちらが好ましいかはケースバイケースですが、UI の違いは確認しておいた方が良いでしょう。

別記事で入門チュートリアルを書いていますので、もしよかったらそちらも参考にしてみてください。

- [【入門】はじめての React Native](https://qiita.com/nskydiving/items/41e446ef5c821359ab79)
- [【入門】はじめての Flutter](https://qiita.com/nskydiving/items/4fcf0dbad923d50601f9)

# Xamarin はどのような開発に向いているのか？
Xamarin は最近のアップデートで「[Xamarin.Forms Visual](https://docs.microsoft.com/ja-jp/xamarin/xamarin-forms/user-interface/visual/material-visual)」が追加され、異なるプラットフォームでも同じ見た目の UI を実装できるようになりました。

また、他のクロスプラットフォームフレームワークよりも簡単にネイティブの機能を呼び出すことができるのが強みです。

しかし、開発元の Microsoft が「React Native for Windows」を発表したことから、将来性にやや不安を感じます。

※参考：マイクロソフトが「React Native for Windows」を公開
https://jp.techcrunch.com/2019/05/07/2019-05-06-microsoft-launches-react-native-for-windows/

C#（.NET） の資産を活かしてクロスプラットフォームアプリケーションを開発したい場合は、Xamarin を選定すると良いでしょう。

Xamarin の後継フレームワークである「.NET Multi-platform App UI」について、以下の記事にまとめましたので、こちらも参考にしてください。

.NET Multi-platform App UI（.NET MAUI）の要点まとめ
https://qiita.com/nskydiving/items/927b39c2983eb1f2d2b3

※.NET MAUI と Xamarin のサポート終了

> Xamarin のサポートは、すべての Xamarin SDK に対するサポートを 2024 年 5 月 1 日に終了します。Android 13 と Xcode 14 SDK (iOS および iPadOS 16、macOS 13) が、Xamarin が対象とする最終バージョンになります。

https://dotnet.microsoft.com/ja-jp/platform/support/policy/xamarin

# ゲーム開発するなら Unity で決まり！
Unity はクロスプラットフォームフレームワークとして豊富な採用例があり、数多くのゲームが開発されている**ゲームエンジン**です。

Flutter も将来的に 3D グラフィックをサポートすると発表されていますが、まだ先のことなので、ゲーム開発するなら Unity を選定しておけば間違いないでしょう。

# 他のフレームワークは？
ほとんどの場合、フレームワーク比較表にあるものから選定すれば問題ないと思いますが、他にもクロスプラットフォームフレームワークがあります。

もし今回紹介したフレームワークでしっくりこなければ、以下のフレームワークも検討してみてください。

- [Vue Native](https://vue-native.io/)
- [Electron](https://electronjs.org/)
- [tauri](https://tauri.app/)
- [Cordova](https://cordova.apache.org/docs/ja/3.1.0/guide/overview/index.html)
- [Ionic](https://ionicframework.com/)
- [Monaca](https://ja.monaca.io/)
- [Titanium](http://www.appcelerator.com/mobile-app-development-products/)
- [Unreal Engine](https://www.unrealengine.com/ja/)
- [cocos2d-x](https://www.cocos.com/en/)
- [DXライブラリ](https://dxlib.xsrv.jp/)
- [Kotlin Multiplatform](https://kotlinlang.org/docs/reference/multiplatform.html)
- [Uno Platform](https://platform.uno/)