Ionicの使いどころを考える - モバイルアプリ制作でのNativeとHybridとHTML5の使い分け

IonicってビルドするとSwiftに変換されるんじゃないんですね。
というツイートを見かけまして、あらためてモバイルアプリ制作手法としてIonicによるHTML5開発と、Native・Hybrid開発を比較しようと思います。

比較対象

HTML5開発

Single Page Applicationで開発したものを指します。Ionicもこれに入ります。

Hybrid開発

本稿ではHTML5アプリを除外して、C#で書くXamarinや、JavaScriptで書くNativeScript（ReactNativeなど）を指します。

Native開発

iOSでしたらSwift/Objective-C、AndroidでしたらKotlin/Javaで開発したものを指します。「スマホアプリ開発」や「アプリ人材募集」という表記では多くの場合、Native開発者を指す場合がほとんどです。

対応デバイスの比較

簡単にいうと、HTML5・Hybrid開発はオールラウンダー、Native開発は一点特化型です。

種別	WEB	スマホアプリ
HTML5	◯	両方に対応
Hybrid	△	両方に対応
Native	☓	iOSかAndroidのどちらか一方

HybridのWEB利用が△になっているのは、ReactNativeのWeb公開のプロジェクトが存在するためです。

https://github.com/necolas/react-native-web
デモ　http://necolas.github.io/react-native-web/storybook/

ただ、「WEBならReactで書けよ」という論調が多いので△という表記にしています。なので、対応デバイスでは「HTML5 > Hybrid > Native」となります。

HTML5とNative/Hybridの大きな違い

「HTML5開発は、ネイティブを再現している」ことに注意が必要です。例えば、アラートを表示する上で、HTML5（Ionic）とNative（Swift）のコードは以下の通りです。

// TypeScriptで書いたIonicのコード
dispAlert(){
   const alert = this.alertCtrl.create({
    title: 'アラート表示', buttons: ['閉じる']
   });
   alert.present();
}

// Swift
@IBAction func dispAlert(sender: UIButton) {
    let alert: UIAlertController = UIAlertController(
      title: "アラート表示", message: "メッセージ", preferredStyle:  UIAlertControllerStyle.Alert
    )
    presentViewController(alert, animated: true, completion: nil)
}

それぞれAPIを呼び出しているのですが、HTML5では、このAPIによって「Native描画そっくりのHTML」を表示します。HTML5はWebViewが表示されているアプリ内でHTMLの描画によってアラートであったりロード画面というNativeの動きを再現しているわけです。
それに対して、Native/HybridはスマホのOS自体のAPIを叩くので「OSのアラート」が表示されます。

このことはパフォーマンスに大きな影響を及ぼしてきました。10年前は、JavaScriptのレンダリングの遅さや、iOS/Androidのデバイスが低スペックだったことが原因で「HTMLでつくると遅い」といわれましたが、それはこのように「再現」しているためです。
しかし、2017年になりまわりを見渡すと、HTML5のレンダリング速度とデバイスのスペックは大きくあがり、今ではNativeと変わらない速度を出すと言われるようになりました。

とはいえ、描画速度はどうしても Native / Hybrid > HTML5 となります。

アプリ実装のしやすさ

「実装のしやすさ」、言い換えるとつらみの大きさですかね。これはシュチュエーションが異なるので、いくつかパターンを提示します。

iOSアプリのみ開発する場合

圧倒的にNative開発が楽です。未経験者でHTML5/Hybrid開発をするメリットは見当たりません。

iOSアプリとAndroidアプリを開発する場合

Hybridの得意分野。ただ、Swift/Javaエンジニアがいる場合、Hybrid開発にチャレンジするよりはNative開発の方が早い場合がありますし、Web制作チームがアプリをつくる時はHTML5開発がいいかと思います。チームメンバーによりますし、これが正解！ということはないです。

iOS/Android/Webアプリを開発する場合

小さなチームの場合は、HTML5開発一択。ただ、チーム内にHTML書ける人がいない、などの場合は得意分野で開発すればいいのではないでしょうか（その場合、Webアプリどうするのか問題ありますが）

ですので、アプリ実装のしやすさは、要件×人材によって決まると思っています。「銀の弾丸は存在しなかった」はあまりに使い古された表現ですが、**はすべてを解決します！は、まぁ嘘ですよね。

Ionicの使いどころを考える

HTML5開発の欠点

HTML5開発は「ネイティブを再現」している以上、デバイスデザインの大きな変更があれば、それに追随するためにバージョンアップが必要となります。ネイティブ機能に直接アクセスする「Cordovaプラグイン」も中間レイヤーを挟むということはそれだけバージョン依存が起き、OSレベルで破壊的変更があれば追随するのに苦労する面もあります（これはHybrid開発も同様）

モバイルアプリとして最もパフォーマンスがいいのはNative開発ですし、HTML5開発がどれだけ進化してもそれを覆すことはありません。

プロダクトレベルで考える成長曲線

HTML5開発でよくいわれるのは「1リソース複数展開」の魅力です。WEB/iOS/Androidを別に開発すると、初期コストが大きくなるだけではなく、デザインの軽微な修正や機能の改善はそれぞれに対応することになります。常にそれだけの人材を抱えておくことは現実問題難しいです（しかもネイティブアプリ開発人材は不足傾向）

また、アプリの数も星の数ほどリリースされ、ダウンロード率が下がっているのも重大な問題です。アプリをリリースしたら一定数ダウンロードされた時と時代は変わったので、最小コストでリリースし、すばやく仮説検証して、ダメなら撤退、うまくいきそうなら手を入れ続けてプロダクトを成長させるという手法が一般的になりました。

そう考えると、仮説検証プロセスと成長プロセスで別の開発手法を採用するのはありです。HTML5/Hybrid/Native開発のどれが優れているかではなく、HTML5アプリで仮説検証を細かく行い、一定規模まで成長して収益化できた段階でHybrid/Native開発に置き換えてよりユーザ体験を高めていくことが現実的な施策になったように感じています。
HTMLを書くことができるデザイナーも増えましたし、モックアップはHTML5開発する、というのもいいですよね。

そういう意味では、よく「Ionic（HTML5開発） vs React Native（Hybrid開発）」みたいな論調を見かけますが、それは比較軸になりえないと思っています。全く別レイヤーのものです。

特に結論をだすわけではなく、視座を提供するだけの記事ですが、参考になりましたら幸いです。また本記事でHTML5開発・Ionicに興味をお持ちいただけましたらIonicで作る モバイルアプリ制作入門〈Web/iPhone/Android対応〉も手にとっていただけますと幸いです。

それでは、また。