RAKUS Developers Blog | ラクス エンジニアブログ

株式会社ラクスのITエンジニアによる技術ブログです。

モバイルクロスプラットフォームの技術検証

f:id:tech-rakus:20201210125631p:plain

こんにちは、株式会社ラクスで先行技術検証を行っている技術推進課のt_okkanです。 技術推進課では、新サービス立ち上げ時の開発速度アップを目的に、現在ラクスでは採用されていない新しい技術の検証を行う、技術推進プロジェクトがあります。 今回はその技術推進プロジェクトで、モバイルクロスプラットフォームについて検証を行いましたので、その結果の報告を行います。

なお、別テーマの取り組みや、過去の取り組みに関しては、こちらからご覧ください。

tech-blog.rakus.co.jp

モバイルクロスプラットフォーム

従来のモバイルアプリ開発では、iOSはSwiftやObjectiveCで、AndroidJavaやKotlinで、各OSごとに別々のプログラミング言語を用いて開発する必要がありました。 しかし、各OSごとに開発・テストするコストや、学習コストが高いことから、1つのソースコードで異なるOS上でも同じ仕様、機能のアプリケーションを開発できるモバイルクロスプラットフォームが開発されるようになりました。 現在、さまざまなモバイルクロスプラットフォームフレームワークが存在しますが、大きく分けて3つに分類できます。

  • ハイブリット型

    WebView上で動作し、HTML、CSSJavaScriptで実装できる。Cordova、Ionic Framework、Monacaなど。

  • ネイティブ型

    OSの描画エンジンを利用してUIを表示する。Xamarin、React Nativeなど。

  • 独自レンダラー型

    各OS上で動作する独自のレンダリングエンジンを利用してアプリを実行する。Flutter、Unityなど。

検証の目的

現在ラクスのサービスの主軸は、ブラウザ上で動作するWebサービスです。 今後、既存のサービスのモバイルアプリへの移行や、新規サービスでのモバイルアプリ開発があった場合、モバイルアプリ開発にかかる工数を削減し開発の省力化を実現していきたいと思っています。 そのため、低コストでモバイル開発できる手法として、モバイルクロスプラットフォームでの開発を検討する必要があります。 そこで、本検証ではクロスプラットフォームでのモバイル開発がネイティブでのモバイル開発に比べ開発を省力化できるか、また省力化できる場合はどのツールを検討すべきかを示します。 Webサービスを主軸に置く企業の開発者の方にとって、クロスプラットフォームでの開発を導入する上でのヒントになればと思います。

検証で使用したツール

本検証では、モバイルクロスプラットフォームの各分類からフレームワークを1つずつ選択し検証を行います。選択したフレームワークはIonic Framework、React Native、Flutterになります。

省力化の定義

Webサービス開発企業がモバイル開発を行う場合」という前提で、「省力化」の定義を立てました。

※ネイティブ:iOSAndroidのこと。開発言語はSwiftとKotlin

  • ネイティブと同じ開発環境が整っていること
  • ネイティブより学習コストが低い
  • ネイティブより実装時間、コード量を削減できる
  • ネイティブと同じ機能を実装できる

クロスプラットフォームでの開発が上記の省力化の定義を満たせるのかを検証していきます。

検証方法

ネイティブ言語(Swift + Kotlin)とクロスプラットフォームの各フレームワーク(Ionic Framework + React Native + Flutter)で、同一の機能のサンプルアプリを実装し、その実装結果を比較しました。 以下のような実装した機能と比較した観点で比較し、省力化の定義を満たせているかを考察しました。

  • 実装した機能

    • ローカルデータベース
    • セキュアストレージ
    • NFC
    • カメラ
    • Push通知
    • WebView
  • 比較観点

比較観点 詳細 評価指標 比較対象
開発環境 エディター ◯:ネイティブと同等
△:ネイティブより劣っている
✖️:環境が提供されていない
iOSXcode
AndroidAndroid 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カードを読み込むことができなかった。 今回IcocaICカードで使用し読み込みを実装したが、使用したライブラリがNDEFフォーマット以外のフォーマットに対応していなかったため、実装することができなかった。 SuicaIcocaなどの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で評価されている。評価方法は

    • GitHubのfork、star、download数
    • React Native Directoryからの推奨
    • 最終更新日が30日以内
    • 180日以内に更新されているか
    • open状態のissueが75個以内 である。リポジトリの評価が主な評価指標となっている。
  • Flutter

    pub.devで管理されており、pub pointsで評価されている。評価方法は、

    • Dartの規約にしたがっていること
      • 依存関係を明記しており、全てのURLがHTTPSを利用していること
      • OSI認証ライセンスを使用していて、LICENSEファイルを提供している
      • CHANGELOGファイルを提供している
    • ドキュメントを提供していること
      • サンプルコードを提供している
      • PublicなAPIのうち、20%以上のドキュメントを公開している
    • Dartの静的解析に合格している
    • 最新の実行環境で動作すること
      • 最新のStableのDartとFlutterのバージョンで動作すること である。ドキュメントの充実度、コードの動作保証などで評価を行っている。

上記の結果の通り、Flutterではpub pointsの値が高いほどライブラリが充実しており実装コストが低かったです。また、コード解析や最新版の実行環境での動作確認など、アプリの運用面でも助けになる情報が多い印象です。 React Nativeでは評価機構の仕組みはあるものの、Flutterと比べるとライブラリの人気度で評価されていると感じました。また、Ionic Frameworkは評価機構が存在しません。両方のフレームワークに共通していることですが、実装してみてもライブラリによってはドキュメントが不足しており、ライブラリのコードを自身で解析して実装する必要もありました。また、実現したい機能をそのライブラリで実装できるかが判断できず、実際にコードを動かしてみて確認する必要があるものもありました。

また、今回の検証で使用したライブラリ数はFlutterが最も少なく、少ないライブラリ数で実装できることも挙げられます。Flutterが高機能であるため、React NativeやIonic Frameworkではライブラリが必要な機能(ルーターなど)をライブラリなしで使用できます。

上記の面でもFlutterがクロスプラットフォームの中では最も優位であるという結論に至りました。これ以外でも、UIウィジェット数なども影響しています。

フレームワークの所感

Ionic Framework

長所

まずは、開発速度が速いことが挙げられます。検証結果でも最も早くサンプルアプリを実装することができました。Webの技術を流用できることがその理由であると考えられます。またHTML、CSSJavaScriptで画面を構築できるため、クロスプラットフォームの中では最も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の導入を考えてください。

参考

書籍

ブログ記事

公式ドキュメント


  • エンジニア中途採用サイト
    ラクスでは、エンジニア・デザイナーの中途採用を積極的に行っております!
    ご興味ありましたら是非ご確認をお願いします。 career-recruit.rakus.co.jp

  • カジュアル面談お申込みフォーム
    どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。
    以下フォームよりお申込みください。
    forms.gle

  • イベント情報
    会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください! rakus.connpass.com

Copyright © RAKUS Co., Ltd. All rights reserved.