Xamarin
ionic
reactnative
Flutter
PWA

モバイルアプリ作ったこと無いマンが1分でトレンドを把握できる図を書いた

モバイルアプリをクロスプラットフォームに開発する場合、今の技術的トレンドは何だろうということで、ちょちょっとそれらしいキーワードを検索してみました。

Googleトレンド 2016.05.20 ~ 2018.05.20

image.png

上記5つのキーワードがトレンドとなっているようですが、それぞれのフレームワークについて調べてみると、技術的なアプローチがぜんぜん違う! :flushed: ということで、それぞれのアプローチの違いを簡単な図にまとめてみたのが以下です。

技術的アプローチ概略図

image.png

用語補足

ハイブリッドアプリ: WebViewを使用した UI と、Cordova フレームワークなどを利用したネイティブ機能(カメラやGPSなど)を組み合わせたモバイルアプリのことです。Cordova を利用すると、JavaScript でネイティブ機能にアクセスできるため、Web技術で Android、iOS 両対応なモバイルアプリを開発できます。デメリットとしては、ネイティブアプリに比べてパフォーマンスで劣ることや、利用できるネイティブ機能が、Cordova プラグインの対応状況により制限されることなどです。

参考サイト:ハイブリッドアプリとは?

PWA(Progressive Web Apps): Googleを中心に策定された、アプリのようなUXを提供するWebSiteのことです。ネイティブアプリではないため、公開時の審査やインストールが不要です。対応ブラウザであれば、オフライン対応、プッシュ通知、Home画面への追加などといった、ネイティブ機能が一部利用可能となります。iOS Safari も 11.3(2018年3月)で一部対応し、ようやく普及の準備が整いました。

参考サイト:iOSの11.3からのPWA対応でできるようになったこと

各フレームワークの特徴まとめ

名称 関連企業 開発言語 開発環境
(Editor)
特徴
Ionic Ionic JavaScript As you like コンポーネントは Angular ベース。Cordova を利用して、クロスプラットフォームなネイティブアプリを開発できる。PWAも同時に開発できる
React Native Facebook JavaScript As you like コンポーネントは React ベース。Cordova 不要で、クロスプラットフォームなネイティブアプリを開発できる。WebView を使わずに、ネイティブのレンダリング API 経由で UI を描画できるため、ハイブリッドアプリよりも高速
Xamarin Microsoft C# Visual Studio
※ Win/macOS 版のみ
C# でクロスプラットフォームなモバイル/デスクトップのネイティブアプリを開発できる。ネイティブ機能の API は、ほぼ完全に移植されているため、ネイティブ開発と遜色のないアプリが開発可能
Flutter Google Dart Android Studio,
Visual Studio Code
Dart 言語でクロスプラットフォームなモバイルネイティブアプリを開発できる。UIはネイティブのUIとは異なるエンジンで高速に描画される。まだ β版

どのフレームワークを選択すべきか?

開発言語を問わないのであれば、Xamarin か Flutter が検討できます。デスクトップアプリも視野に入れるのであれば Xamarin、Linux 上で開発するのであれば Flutter になりそうです。一方、Web技術をベースにするのであれば、柔軟性を取るのであれば、Ionic(というか Cordova ?)、パフォーマンスを取るのであれば React Native が有力でしょう。ただし、iOSアプリを開発する場合、どのフレームワークを選定するにせよ、Xcode(= macOS)環境が必要になる点は注意が必要です :point_up:

もし、「対応ブラウザ」や、「できること」の制限が問題にならないのであれば、通常の WebSite と同様に公開できる、PWA を選択肢に入れる方が、ユーザー側の利便性は高いかもしれません

アプリのバックエンドについては、API サーバーを構築するか、mBaas(Mobile Backend as a Service)と呼ばれるサービスを使ってサーバーレスにするかの選択となりますが、プッシュ通知機能を使うのであれば、Firebase Notifications が無料で利用でき、また iOS への通知にも対応している、FireBase を選択するのが良さそうです


終わりに

なにぶん、調べた本人もモバイルアプリ作ったこと無いマン :expressionless: のため、誤り、違和感等ございましたら、コメント欄でご教示いただければと思います :bow: タイトルに書かれている図が見当たらない方は、狐に包まれたような気持ちになってください :tiger:
以上です。