MonacaアプリはベースとしてCordovaというソフトウェアを利用しています。このCordovaはアプリの中でWebViewやwkWebView(以下WebView)を動かして、UI/UXを実現しています。WebView、つまりWeb技術(HTML/JavaScript/CSS)でアプリを開発する技術です。

同様にJavaScriptを使ったモバイルアプリ開発技術としてReact Nativeが知られています。CordovaとReact Nativeは度々比較されますが、今なおどちらの技術を選ぶべきか悩んでいる方もいるでしょう。そうした方の一助として、CordovaとReact Nativeの技術面での違いについて解説します。

どちらもアプリを作る技術

まず、CordovaとReact Nativeは、モバイルアプリ開発のために生み出された技術です。そのため、作成されたアプリを見ただけでは、どちらの技術が使われているかはわかりにくい場合があります。たとえば、よく使うアプリがCordovaで作られたものだったり、React Nativeで作られたものだったりすることがあります。

さらにデスクトップアプリを作りたい場合にも、CordovaはElectronを使って開発できますし、React Nativeはそのままデスクトップアプリに対応しています。React NativeはReact Native for Webというフレームワークによって、Webアプリケーションも開発できます。CordovaではWebアプリケーション開発はサポートしていませんが、MonacaはPWAとしてビルドできる仕組みが用意されています。

Cordova React Native
モバイルアプリ
デスクトップアプリ ○(Electron利用)
Web × (MonacaはPWA開発可)

利用する言語について

Cordova、React Nativeともに開発言語としてはJavaScriptを利用します。CordovaはUIをHTMLとCSSで記述しますが、React Nativeの場合はJSXを使って開発します。

Cordova React Native
モバイルアプリ
デスクトップアプリ ○(Electron利用)
Web × (MonacaはPWA開発可)
開発言語 Web(HTML/CSS/JavaScript) JavaScript(JSX)

動作する仕組み

CordovaはWebViewを利用してアプリのUI/UXを開発します。後述するCordovaプラグインを除けば、開発スタイルとしてはWebアプリケーション開発と変わりません。React NativeはReactと同じくJSXを使います。そのJSXをJavaScriptエンジンで実行します。UIはネイティブのものが出力されます。

Cordova React Native
モバイルアプリ
デスクトップアプリ ○(Electron利用)
Web × (MonacaはPWA開発可)
開発言語 Web(HTML/CSS/JavaScript) JavaScript(JSX)
実行エンジン WebView JavaScriptランタイム  

実行速度について

アプリの実行速度については、React Nativeに多少の分がありそうです。これは動作する仕組みとして、JavaScriptエンジンを直接呼び出している点に起因します。とはいえ、最近のスマートフォンおよびWebエンジンは高速化しており、もの凄く大型なアプリでもない限りは大きな問題にはならないでしょう。

堅牢性

これは個人の体感なのですが、Cordovaアプリは落ちることがほぼないように思います。WebView上で実行されると言うことは、Webブラウザで動いているのとほぼ同じです。皆さんがWebサイトを見ていて、突然ChromeやSafariが落ちたことはあるでしょうか。JavaScriptの実行時にエラーがあったとしても、アプリが落ちる状態に至ることはほぼないはずです。

React Nativeはネイティブアプリとして実行されるので、よりエラーに対してシビアです。存在しないデータにアクセスしたりすると、アプリが落ちてしまうでしょう。もちろん、落ちないための仕組み(例外処理を捕捉するなど)はありますので、そうした作り方を把握した上で開発を行う必要があります。

技術的選択肢

CordovaアプリではUIフレームワークとして、Webアプリケーションで利用されているものが利用できます。例えばReactであったり、VueやAngularなども選択できます。対してReact Nativeの場合はReact以外の選択肢はありません。

そのため、すでにReactを知っている人やReactを学びたい方にとってReact Nativeは良い選択肢になります。

それに対して、VueやAngularなどを知っている方にとっては改めて学習する必要があり、多少敷居が高くなりそうです。

これは個人開発者はもちろん、企業にとっては大きな問題になるでしょう。アサインのしやすさや開発体制に影響を及ぼすポイントになります。

ネイティブの機能を利用する

Cordova、React NativeともにiOS/Androidのネイティブ機能を利用する仕組みが用意されています。この場合は開発言語がJavaScriptではなく、ネイティブのObjective-CやSwift、JavaやKotlinといった選択になります。

殆どの機能については、すでにコミュニティベースでプラグインが開発されています。ただし、最新の機能を使いたい場合はまだプラグインが存在しなかったり、利用したいプラグインが継続的に開発されているかどうかは不明なので注意してください。

なお、よく使われる機能(プッシュ通知、位置情報、カメラなど)は公式にプラグイン提供されているので、安心して利用できます。

向き不向き

これまでWebアプリケーション開発を行ってきたフロントエンドエンジニアは、Cordova開発であれば問題なく始められるでしょう。最近ではHTML APIが拡充しており、Cordovaプラグインでないといけないケースはずいぶん減っています。

Reactを得意としているプログラマーの方であれば、React Nativeがお勧めです。ReactはLearn once、write anywhere(一度覚えれば、どの環境に対しても書ける)をテーマとしており、Reactを理解していればReact Nativeも問題なく利用できるでしょう。

まとめ

CordovaとReact Nativeは根本的に稼働するフレームワークが異なるので、両者を比較するのは難しいでしょう。ただ、できあがったアプリだけを見ればCordovaでできているのか、React Nativeでできているのかユーザーは気にならないはずです。速度面やUXにおいても、Cordovaアプリは大幅に向上しています。

後は自分やチームの技術体系によって選ぶのが良いのではないでしょうか。Web技術を学んだ方であればCordova、Reactを学んだ方であればReact Nativeがお勧めです。