LANWAY JOURNAL あなたの知りたいを叶えるメディア

  • ナレッジ記事
  • マーケター・ディレクター
  • エンジニア
  • メインビジュアル

ネイティブアプリのコストを削減するクロスプラットフォームフレームワーク

以前の記事ではスマートフォンアプリ開発手法の一つとしてハイブリッドアプリを紹介いたしました。
今回の記事ではネイティブアプリの不利な点を軽減する開発手法、クロスプラットフォームフレームワークを紹介いたします。

ハイブリットアプリネイティブアプリWebアプリPWA
コスト× → ※△~〇
機能性×
インストールしやすさ― ※インストール不要
プラットフォーム依存リスクの回避× → ※×~△
※ クロスプラットフォームフレームワークを利用する場合

クロスプラットフォームフレームワークとは

iOS, Android, Windowsなどの複数のOSに対して横断的(クロスプラットフォーム)に開発できる環境(フレームワーク)を指します。

従来の開発ではOSごとに開発に適した言語が異なるため(※1)、同じ処理内容をOSごとに別の言語で記述する必要があり、そのためにコストが増大していました。クロスプラットフォームフレームワークを利用することで多くの部分をOSによらず同じ言語で記述することが可能になり開発コストを削減することができます。

フレームワークが提供する範囲を越える機能が必要になる場合(外部のICタグリーダー機器との接続など)は、ハイブリッドアプリと同様に部分的にOSネイティブの言語で開発を行う必要があります。

2022現在では以下のものなどがあります。
・Flutter
・React Native
・Unity 3D ※2
・.Net Multi-platform App UI (.NET MAUI)
・Kotlin Multiplatform Mobile (KMM)

※1 iOSではSwift/Objective-C、AndroidではKotlin/Java、WindowsではC#/C++/Cが一般的です。
※2 本記事はスマートフォン向けの業務アプリ開発を主軸に据えるため、以降の本文ではUnityは扱いません。ゲーム開発向けフレームワーク(ゲームエンジン)であるUnityは、音声再生の遅延の少なさや画面描画の素早さ、UI操作に対するレスポンスの速さなどに定評があります。

各プラットフォームの特徴と評価

 FlutterReact Native.Net MAUIKMM
開発会社GoogleFacebookMicrosoftJetBrains
コスト〇~△
言語DartJavaScript, TypeScriptC#Kotlin
言語に対する開発者の多さ〇~△
開発者コスト・習得難易度JavaScript:◎
TypeScript:〇~△
〇~△△~×
UI作成コスト〇~△〇~△×

Flutter

特徴

DartというJavaScriptとJavaの長所を組み合わせた言語を使用します。比較的習得が容易ですが、スマートフォンアプリ以外の開発では利用されない言語のため開発者が少ない傾向があります。
UI部分まで独自に提供しているためOSごとの差分が必要な個所が少なくコストが抑えられます。その反面、各OSのUIの一般的な操作感とは、ずれが出ることがあります。

評価

他の開発環境との共通点が少ない(既存のコード資産を利用できない)という特徴がありますが習得難易度が低いことから新規に手早く開始するのに向いています。小規模アプリ、プロトタイプ開発、サーバー-クライアント系でクライアント実装が薄いものに向いていると考えられます。

React Native

特徴

JavaScriptやTypeScriptというWebアプリの開発で一般的な言語を使用します。開発者の母数が多く、日本語による技術情報も豊富に見つかります。
UI部分は、フレームワークとしてはOSごとに記述する必要があります。ですが豊富に公開されているオープンソースのUIコンポーネントを利用することで処理を共通化してコスト削減が可能です。

評価

開発者の確保が容易なことが最大の長所です。その反面、成果物の品質にばらつきが出やすいため、コード規模が増大する前にTypeScriptを導入することをお勧めします。

.Net Multi-platform App UI (.NET MAUI)

特徴

XAMARINというフレームワークの後継です。
C#というWindowsアプリ開発で一般的な言語を使用します。
UI部分は、独自に提供しているUI部品とOSごとに作成が可能な仕組みとの両方が提供されています。

評価

スマートフォンだけではなくWindowsデスクトップアプリも開発する案件にお勧めです。Microsoft社が開発元のため、突然フレームワークの開発が終了するなどの長期サポートリスクが低いと考えられます。

Kotlin Multiplatform Mobile (KMM)

特徴

2022年10月にベータ版が公開されたばかりのフレームワークです。
ロジック部分はKotlinというAndroid開発で一般的な言語を使用します。
UI部分は、iOSではSwift、AndroidではKotlinというようにOSごとに別に作成する必要があります。

評価

ベータ版の段階のため判断が難しいです。Kotlinという言語は熟練した開発者にとっては開発効率が高いですが、習得難易度が相対的に高いです。このため交代要員や増員の確保に困る場合があります。また、定番と言える設計モデルや適したライブラリが確立していないため初期コストは高めと考えられます。

まとめ

現段階では、どのプラットフォームもそれぞれに長所があり、会社の状況により適したフレームワークが変わります。
このため自社の既存コード資産や開発者の得意言語に応じて選択することになります。

付録

海外のクロスプラットフォーム開発動向

元資料: Stack Overflow Developer Survey 2019~2022

注目ポイント
Flutter/Dartは開発者からの評価が高い(※)が、主要なクロスプラットフォーム/言語の中では給与が最も安い。給与水準は習得難易度の低さを表しており、上昇率が高いことは十分な品質の製品を開発できることを示していると考えられる。

※ 項目 Technology – Most loved, dreaded, and wanted より
※本項の表はフレームワークと言語で抽出したものであり、スマートフォンアプリ開発者に限定したものではありません。例えばC#はデスクトップアプリ開発にも利用されます。

スマートフォン向けクロスプラットフォームの開発者動向

 開発者割合(%) ※1開発者給与(米ドル) ※2
フレームワーク201920202021202220212022
Flutter3.26.613.3512.5632,42942,657 (31.5%増)
React Native10.811.816.4813.6244,16054,000 (22.3%増)
Xamarin6.56.04.17
※3
5.5451,70463,384 (22.6%増)
Cordova7.46.48.674.7239,19249,232 (25.6%増)
Unity 3D9.18.77.03
※3
8.19
※3
45,39659,327 (30.7%増)
※1 項目 Technology – Most popular technologies の Professional Developers より
※2 項目 Technology – Top paying technologies より
※3 分類が Other frameworks and libraries ではなく Other tools に移動

スマートフォン向け言語の開発者動向

 開発者割合(%) ※1開発者給与(米ドル) ※2
言語201920202021202220212022
Dart1.83.75.976.6732,98643,724 (32.6%増)
JavaScript69.769.768.6267.954,04965,580 (21.3%増)
TypeScript23.528.336.4240.0859,17270,276 (18.8%増)
C#31.932.329.8129.7258,36869,516 (19.1%増)
Kotlin6.68.09.099.9255,07169,318 (25.9%増)
Java39.238.434.5133.451,88864,572 (24.4%増)
Swift6.86.15.645.1858,91078,468 (33.2%増)
Objective-C5.23.332.6964,85983,165 (28.2%増)
※1 項目 Technology – Most popular technologies の Professional Developers より
※2 項目 Technology – Top paying technologies より

Kotlin Multiplatform Mobile (KMM)についてのエンジニア所感

Kotlin言語はAndroid開発における標準的な言語であるため、Android開発を主に行ってきた会社では導入しやすいと考えられます。

近年AndroidやiOSのネイティブ開発ではJetpack ComposeやSwiftUIという宣言型UI部品が出てきてUI開発が容易になりました。特にAndroidでは公式にMVVMという設計モデルに適した部品(ViewModelクラス)も用意されています。しかしJetpack Composeの ViewModelクラスはKMMフレームワークを使う場合は同じ部品が使えず、また、宣言型UI部品を使う場合はViewModelクラスは適切ではないとの意見もあり、まだ定番と言える設計モデル及び対応ライブラリが出ていません。(とは言え独自に設計を練って導入を行った会社もあります)

推奨される設計モデルがどう変わってゆくかと合わせて今後の動向が気になるフレームワークです。

Webアプリ開発の今後

JavaScriptの代替としてWebAssemblyという技術が出てきています。スクリプトデータからバイナリデータに変わることにより、処理性能が向上し、転送データサイズが縮小されています。また、近年はLLVMというコンパイラのおかげで多くの言語でWebAssembly開発ができます。

性能が上がり開発言語の自由度が広がったことから、今までよりもWebアプリが選択肢に入りやすくなったと考えられます。

この記事の著者

坂野 浩之

エンジニア

主にスマートフォンアプリの開発を行っています。
書店で技術コラム系の書棚が縮小されているのが残念です。

この記事を書いたライターの記事一覧を見る