こんにちは、株式会社ラクスで先行技術検証を行っている技術推進課のt_okkanです。 技術推進課では、新サービス立ち上げ時の開発速度アップを目的に、現在ラクスでは採用されていない新しい技術の検証を行う、技術推進プロジェクトがあります。 今回はその技術推進プロジェクトで、モバイルクロスプラットフォームについて検証を行いましたので、その結果の報告を行います。
なお、別テーマの取り組みや、過去の取り組みに関しては、こちらからご覧ください。
モバイルクロスプラットフォーム
従来のモバイルアプリ開発では、iOSはSwiftやObjectiveCで、AndroidはJavaやKotlinで、各OSごとに別々のプログラミング言語を用いて開発する必要がありました。 しかし、各OSごとに開発・テストするコストや、学習コストが高いことから、1つのソースコードで異なるOS上でも同じ仕様、機能のアプリケーションを開発できるモバイルクロスプラットフォームが開発されるようになりました。 現在、さまざまなモバイルクロスプラットフォームのフレームワークが存在しますが、大きく分けて3つに分類できます。
ハイブリット型
WebView上で動作し、HTML、CSS、JavaScriptで実装できる。Cordova、Ionic Framework、Monacaなど。
ネイティブ型
OSの描画エンジンを利用してUIを表示する。Xamarin、React Nativeなど。
独自レンダラー型
各OS上で動作する独自のレンダリングエンジンを利用してアプリを実行する。Flutter、Unityなど。
検証の目的
現在ラクスのサービスの主軸は、ブラウザ上で動作するWebサービスです。 今後、既存のサービスのモバイルアプリへの移行や、新規サービスでのモバイルアプリ開発があった場合、モバイルアプリ開発にかかる工数を削減し開発の省力化を実現していきたいと思っています。 そのため、低コストでモバイル開発できる手法として、モバイルクロスプラットフォームでの開発を検討する必要があります。 そこで、本検証ではクロスプラットフォームでのモバイル開発がネイティブでのモバイル開発に比べ開発を省力化できるか、また省力化できる場合はどのツールを検討すべきかを示します。 Webサービスを主軸に置く企業の開発者の方にとって、クロスプラットフォームでの開発を導入する上でのヒントになればと思います。
検証で使用したツール
本検証では、モバイルクロスプラットフォームの各分類からフレームワークを1つずつ選択し検証を行います。選択したフレームワークはIonic Framework、React Native、Flutterになります。
-
WebView上でWebアプリ（Angular、React、Vue）を実行するフレームワーク。UIコンポーネントを提供し、ネイティブへのアクセスはCordovaやIonic社が開発しているCapacitorを利用してJavaScriptとブリッジしている。
-
JavaScriptEngine上でReactが実行される、ネイティブ型のフレームワーク。Brideという機能を利用して、JavaScriptのコードから各OSに対応したUIやネイティブAPIの実行を行っている。
-
Googleが2018年にリリースした、独自レンダラ型のフレームワーク。Dartというプログラミング言語で実装でき、各OS上で動作するDart VMが画面の描画を行う。豊富なUIウィジェットが提供されており、ネイティブ機能へのアクセスはDartのコードをネイティブコードにコンパイルして実行する。
省力化の定義
「Webサービス開発企業がモバイル開発を行う場合」という前提で、「省力化」の定義を立てました。
※ネイティブ：iOSとAndroidのこと。開発言語はSwiftとKotlin
- ネイティブと同じ開発環境が整っていること
- ネイティブより学習コストが低い
- ネイティブより実装時間、コード量を削減できる
- ネイティブと同じ機能を実装できる
クロスプラットフォームでの開発が上記の省力化の定義を満たせるのかを検証していきます。
検証方法
ネイティブ言語（Swift + Kotlin）とクロスプラットフォームの各フレームワーク（Ionic Framework + React Native + Flutter）で、同一の機能のサンプルアプリを実装し、その実装結果を比較しました。 以下のような実装した機能と比較した観点で比較し、省力化の定義を満たせているかを考察しました。
実装した機能
- ローカルデータベース
- セキュアストレージ
- NFC
- カメラ
- Push通知
- WebView
比較観点
| 比較観点 | 詳細 | 評価指標 | 比較対象 |
|---|---|---|---|
| 開発環境 | エディター | ◯：ネイティブと同等 △：ネイティブより劣っている ✖️：環境が提供されていない |
iOS：Xcode Android：Android Studio |
| デバッグツール | |||
| デザインツール | |||
| ライブラリ評価機構 | |||
| 学習コスト | プログラミング言語 | ◯：ネイティブ1言語より低い △：ネイティブ1言語と同等 ✖️：ネイティブ1言語より高い |
iOS：Swift Android：Kotlin |
| ライフサイクル | |||
| 機能実装 | 実装時間 | ◯：ネイティブより低い △：ネイティブと同等 ✖️：ネイティブより高い |
ネイティブの実装時間・コード量 |
| コード量 | |||
| 機能実現 | ◯：同じ機能を実装できる △：一部実装できない ✖️：全く実装できない |
iOS：Swift Android：Kotlin |
検証結果
サンプルサプリを実装し、比較した結果は以下の通りです。
※FE経験：Angular、React、Vueの経験があるフロントエンド経験者
※BE経験：Javaなどのオブジェクト指向プログラミングの経験のあるバックエンド経験者
※実装時間・コード量に関しては本検証での数字です
※コード量は実装した行数と単語数から算出しました
| 比較観点 | Ionic Framework | React Native | Flutter |
|---|---|---|---|
| エディター | ◯ Visual Studio Code |
◯ Visual Studio Code |
◯ Visual Studio Code Android Studio |
| デバッグツール | △ ブラウザDev Tools |
◯ React Native DevTools |
◯ Flutter Dev Tools |
| デザインツール | △ ブラウザDev Tools Hot reload |
△ ブラウザDev Tools Hot reload |
|
| ライブラリ評価機構 | ✖️ | △ React Native Directory |
◯ pub.dev |
| プログラミング言語学習コスト | FE経験：◯ BE経験：△ TypeScript、JavaScript、Angular、React、Vue |
FE経験：◯ BE経験：△ TypeScript、JavaScript、React |
FE経験：△ BE経験：◯ Dart |
| ライフサイクル学習コスト | FE経験：◯ BE経験：△ Angular、React、Vue |
FE経験：◯ BE経験：△ React |
FE経験：△ BE経験：△ Flutter |
| 実装時間 | ◯ -46% |
◯ -46% |
◯ -67% |
| コード量 | ◯ -30% |
◯ -25% |
◯ -45% |
| 機能実現 | △ NFC、WebView |
△ NFC |
◯ |
実装できなかった機能
NFC
Ionic FrameworkとReact Nativeで、iOSでType-FのICカードを読み込むことができなかった。 今回IcocaをICカードで使用し読み込みを実装したが、使用したライブラリがNDEFフォーマット以外のフォーマットに対応していなかったため、実装することができなかった。 SuicaやIcocaなどのFelica Standardのフォーマットに対応したライブラリを調査したが、見つけることができませんでした。
WebView
Ionic Frameworkで、WebViewを実装することができなかった。Ionic Frameworkはアプリ起動時に作成されるWebView上で実行されているため、Ionic Frameworkから起動されているWebView以外のWebViewを作成することができません。 Ionic Framework上にOS内蔵ブラウザを表示してWebページを描画できますが、WebViewと比べると機能が限られます。
クロスプラットフォームは開発を省力化できるか
本検証では、クロスプラットフォームはモバイル開発を省力化できる、と結論しました。 理由としては以下の点が挙げられます。
- 実装時間、コード量を削減できる
- 学習コストは1つのネイティブ言語を学習するコストより低い
- 開発環境は同等、または劣っているものの代替手段がある
- 一部実装できない機能があるものの、ネイティブと同じ機能を実装できる
また検証の結果から、クロスプラットフォームを導入する際はまずFlutterを検討すること、としました。 Flutterが最も欠点が少なく汎用的であることから、まずはFlutterの検討を進めることをオススメします。Dartの学習コストが、Ionic FramewrokやReact NativeがWeb標準技術を使用できることと比較するとやや高いものの、元々はJavaScriptの代替言語として開発された経緯もあり、実装しやすく高機能なプログラミング言語です。また、以下で説明するようにライブラリの充実度でも、他のフレームワークよりも優位であることがわかります。
ライブラリについて
クロスプラットフォームでネイティブの機能を利用する場合は、基本的には各フレームワークで提供されているライブラリを利用します。 そのため、ライブラリの質が実装や運用のコストに直結すると考えました。 そこで各プラットフォームでライブラリがどのように管理されているのか、調査・比較しました。
| Ionic Framework | React Native | Flutter | |
|---|---|---|---|
| ライブラリ評価機構 | なし | React Native Directory | pud.dev |
| 評価方法 | なし | Directory Score | pub points |
| 実装で使用したライブラリ数 | 25 | 29 | 11 |
Ionic Framework
ライブラリの評価機構が提供されていない。ライブラリの評価基準としては、公式・コミュニティ・サードパーティであるか、ドキュメントが充実しているか、を自身で調査する必要がある。
React Native
React Native Directoryで管理されており、Directory Scoreで評価されている。評価方法は
Flutter
pub.devで管理されており、pub pointsで評価されている。評価方法は、
上記の結果の通り、Flutterではpub pointsの値が高いほどライブラリが充実しており実装コストが低かったです。また、コード解析や最新版の実行環境での動作確認など、アプリの運用面でも助けになる情報が多い印象です。 React Nativeでは評価機構の仕組みはあるものの、Flutterと比べるとライブラリの人気度で評価されていると感じました。また、Ionic Frameworkは評価機構が存在しません。両方のフレームワークに共通していることですが、実装してみてもライブラリによってはドキュメントが不足しており、ライブラリのコードを自身で解析して実装する必要もありました。また、実現したい機能をそのライブラリで実装できるかが判断できず、実際にコードを動かしてみて確認する必要があるものもありました。
また、今回の検証で使用したライブラリ数はFlutterが最も少なく、少ないライブラリ数で実装できることも挙げられます。Flutterが高機能であるため、React NativeやIonic Frameworkではライブラリが必要な機能（ルーターなど）をライブラリなしで使用できます。
上記の面でもFlutterがクロスプラットフォームの中では最も優位であるという結論に至りました。これ以外でも、UIウィジェット数なども影響しています。
各フレームワークの所感
Ionic Framework
長所
まずは、開発速度が速いことが挙げられます。検証結果でも最も早くサンプルアプリを実装することができました。Webの技術を流用できることがその理由であると考えられます。またHTML、CSS、JavaScriptで画面を構築できるため、クロスプラットフォームの中では最もUIの自由度が高いと思いです。またIonic FrameworkはPWAにも対応しており、同じコードをモバイルとPWAにビルドしデプロイできます。
短所
まずは、ライブラリの評価機構がないことが挙げられます。ライブラリのドキュメントが不足していて、実際に実装しないと実現できる機能を把握できないケースが多々ありました。他のフレームワークにはライブラリの評価機構があることから、ここは明確な短所であると言えます。 機能面ではWebViewを実装することができないことが挙げられます。仕組み上すでにWebView上で実行されているため、新たにWebViewを実装することができません。クロスプラットフォームでWebViewを利用する場合は、React NativeかFlutterを利用してください。
React Native
長所
まずは、各OSに準拠したネイティブのUIを描画できることが挙げれらます。iOSではHuman Interface Guidelines仕組み上WebViewをで、AndroidではMaterial Designで表示されます。OSのUIでアプリを表示したい場合はReactNativeが有効になります。 またReactの知識やエコシステムを利用できることも挙げられます。ライブラリに関してはDOM操作を必要とするもの以外は基本的に、Reactのライブラリを流用できます。そのため、すでにWebアプリがReactで実装されている場合はコードを移植することもできます。
短所
まずはBridge機能によるパフォーマンスの低下が挙げられます。頻繁にネイティブ機能を利用する場合や、大量データを表示する場合、Bridge機能に負荷がかかりパフォーマンスが低下する可能性があります。開発元のReact Native Communityもこの問題を認識しており、今後Bridge機能を廃止するアーキテクチャ変更を予定しています。 また、いまだメジャーリリースがないことも不安要素として挙げられます。
Flutter
長所
まずはネイティブ同等に開発環境が整っていることが挙げられます。Dev Toolsがかなり優秀でさらにHot reload機能もあることから、他のフレームワークと比べて開発環境が圧倒的に整っています。またライブラリ評価機構が整っていることが挙げられます。pub pointsが高いライブラリを利用すると、APIリファレンスが整っており実装がしやすいです。また不具合時の調査も他のフレームワークと比べて、行いやすいと思います。 Dart VMがUIの描画行っており、Bridge機能を利用しないためパフォーマンスが良好であることも挙げられます。開発元がGoogleで開発に力を入れていることから、将来性にも期待できます。
短所
欠点はあまりないのですが、Dartの学習コストがかかることが挙げられます。他のフレームワークがWeb技術を使用できること比べると、学習コストが高くなります。ただDartはオブジェクト指向のプログラミング言語であり、JavaScriptの機能も多数取り入れているため、そこまで学習コストは高くないかと思います。 また、OSの標準UIで画面を描画する場合に実装コストが高くなることが挙げられます。FlutterはデフォルトでMaterial Desginで画面が描画されます。iOSはHumanInterfaceGuidelinesで表示したい場合は、実行されているプラットフォームによって表示するウィジェットを切り替える必要があるため実装コストが高くなります。この場合はReact Nativeを利用した方が有効かと思います。
フレームワークの選定基準
機能数
機能数が多いもしくは不確定の場合はFlutterを利用してください。Flutter自体の機能とUIウィジェット数が他のフレームワークよりも多く、パフォーマンスも安定しています。React NativeやIonic Frameworkは機能数が多い場合、JavaScriptのBridgeに負荷がかかりパフォーマンスが悪くなる可能性があります。 機能数が少なく、特定の機能しか実装しない場合は、Ionic FrameworkかReact Nativeを選択して下さい。Web標準機能を利用できるため開発コストを低く抑えることができます。
WebView
Webサービス企業では、既にリリースされているWebアプリをWebViewを利用してモバイルアプリで表示したい、という要件が出てくると思います。WebViewを利用する場合は、FlutterかReact Nativeを利用してください。Ionic Frameworkは仕組み上、WebViewを実装することができません。FlutterかReact Nativeかを選択する場合は、基本Flutterを選択してください。
スキル
Angular、React、VueなどのJavaScriptフレームワークの経験がある場合は、Ionic FrameworkかReact Nativeを選択してください。SPAの知識を流用でき、開発速度は一番速いです。しかし、Ionic FrameworkやReact Nativeには実装できない機能やライブラリが提供されていない機能がありますので、導入する前に調査をする必要があります。 Javaなどのバックエンドでの開発の経験がある場合は、Flutterを選択してください。オブジェクト指向で実装できるので学習コストは低いかと思います。
まとめ
本検証でのまとめです。 モバイルクロスプラットフォームはモバイル開発を省力化できるかを検証しました。 検証方法としては、ネイティブとモバイルクロスプラットフォームのツールで、同じ機能のサンプルアプリを実装し、その実装結果を比較し考察しました。 結論は以下のようになりました。
- モバイルクロスプラットフォームはラクスにおいてモバイル開発を省力化できる
- 実装時間・コード量を削減でき、開発環境が整っており、機能を実装できる
- ツールによっては実装できない機能があるので把握すること
- フレームワークの選定は、まずはFlutterを検討する
- 実装する機能数やスキルセットから、フレームワークの選定を行う
「開発環境」「UI」「ライブラリ」などでFlutterが最も欠点が少なく汎用的であることがわかりました。そのため、モバイルクロスプラットフォームを検討する際は、まずFlutterの導入を考えてください。
参考
書籍
- 基礎から学ぶFlutter (C&R研究所, 2020)
- React Native ~JavaScriptによるiOS/Androidアプリ開発の実践 (技術評論社, 2020)
- Ionicで作るモバイルアプリ制作入門 (C&R研究所, 2019)
ブログ記事
- React Nativeの Re-architecture について。 (投稿日：2020/02/27)
- Flutter vs Native vs React-Native: Examinig performance (投稿日：2020/05/11)
公式ドキュメント
- Flutter
- React Native
- Ionic Framework
- React Native Directory Score
- pub.dev Package scores & pub points
エンジニア中途採用サイト
ラクスでは、エンジニア・デザイナーの中途採用を積極的に行っております！
ご興味ありましたら是非ご確認をお願いします。
https://career-recruit.rakus.co.jp/career_engineer/カジュアル面談お申込みフォーム
どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。
以下フォームよりお申込みください。
forms.gleイベント情報
会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ rakus.connpass.com
