Monacaアプリ（に限らずハイブリッドアプリ）を検討している人たちがよく口にするのが、「速度面での不安」です。確かにネイティブアプリの速度を100%とした場合、ハイブリッドアプリでは少なからず速度は低下するでしょう。これはどんなフレームワークを使った場合でも同じことがいえます。低レイヤーのものを使えばベストな実行速度が得られますが、開発が大変になります。SDKやフレームワークを重ねることで、そうした手間暇が抽象化されたり、吸収されることで開発が容易になります。その代わりに、速度や機能面でのトレードオフが発生します。
では実際、ネイティブで開発した場合とMonacaアプリとで、速度にはどれくらいの体感差があるのでしょう？ 実際に動かして比較してみました。
Onsen UIを利用
ハイブリッドアプリを開発する場合、UIフレームワークを使うのがお勧めです。Web上での表現は自由度が高いですが、標準のままではとても貧弱なデザインになります。それをCSSによって見やすい画面に整えますが、モバイルアプリのUIにするのは工数がかかります。さらに、モバイルアプリではタップ時の画面遷移など、アプリ独特のUXも重要になります。そうした表現を取り入れるのもまた、大変なものです。
Onsen UIを使うことで、そうした手間は大幅に軽減されます。さらにAndroidとiOSで共通のUIコンポーネントが利用でき、自動的に最適化された表示に切り替えてくれます。もちろん、この場合もOnsen UIを挟むことで、素のJavaScriptやHTML操作に比べると多少の速度低下はあるでしょう。しかし、多彩なデバイスの画面に対応したり、スマートフォンとタブレットへの対応などを考えると使わない選択肢はまずないでしょう。
Onsen UI 2: Beautiful HTML5 Hybrid Mobile App Framework and Tools - Onsen UI
実際の比較
動作の比較で数値を出してもなかなか理解されないかと思います。そこで今回はネイティブ（左）とハイブリッド（右）を横並びにしてアニメーションGIFにしてみました。速度面はもちろんのこと、表現力もほとんど変わりません。
画面遷移の動きです。速度面では変わらないのが分かるかと思います。Onsen UIの方が移動完了時の速度低下がないように見えます。
フォームのセグメントコントロールです。アニメーションの方法が異なります。
スライダーです。どちらもヌルヌル動いているのが確認できます。
Onsen UIの他の動きは下の動画で確認できます。
また、Onsen UI PlaygroundでもNetflix、Instagram、TwitterなどのUIを模したデモを掲載しています。
まとめ
Monacaアプリで使っているHTML表示のフレームワークは、WKWebViewになり、さらに高速化されています。Pull to Refreshなどもスムーズに動くようになっています。たとえハイブリッドアプリであっても、遜色ない速度と表現力が備わってきていると感じてもらえるはずです。
さらにネイティブの機能についても、Cordovaプラグインを使うことで、プッシュ通知やアプリ内課金などほとんどの機能が使えるようになります。何よりAndroid/iOSの両OSを同時に開発できるメリットは大きいといえるでしょう。ぜひ、Onsen UIを通じてハイブリッドアプリのポテンシャルを感じてください。
Onsen UI 2: Beautiful HTML5 Hybrid Mobile App Framework and Tools - Onsen UI