Monacaで開発をはじめられた方にとてもよく聞かれるのが、React Nativeとの違いや、Cordovaとの違いについてです。確かにMonacaはCordovaがベースになっていたり、Cordovaプラグインという名称が出てきたりするので、何が違うのか分かりづらいかも知れません。

そこでこの記事ではMonacaとCordova、そしてReact Nativeの違いについて解説します。

Cordovaについて

Cordova（正式名称はApache Cordova）はハイブリッドアプリを提供するオープンソース・ソフトウェアです。ハイブリッドアプリというのは、スマートフォンネイティブ（AndroidであればJavaやKotlin、iOSであればObjective-CやSwift）とWeb技術（HTMLやCSS、JavaScript）の両方が使えるアプリになります。UIや簡単なアプリの機能はWeb技術で提供し、ネイティブでしか使えない技術（プッシュ通知やアプリ内課金、Bluetooth操作など）はプラグインによって実現します。JavaScriptからこのプラグインを呼び出して、ネイティブの機能を利用します。このプラグインがCordovaプラグインになります。プラグインはコミュニティによって、多数開発されています。

Cordovaは元々PhoneGapというソフトウェア（有償）でした。それをAdobe社が買収し、Cordovaという名前に変えてオープンソース・ソフトウェアとして公開された歴史があります。

React Nativeについて

React Nativeは主にFacebook社によって開発されているマルチプラットフォーム対応のスマートフォンアプリ・フレームワークです。ここでいうマルチプラットフォームとは、AndroidとiOSになります。React NativeはJavaScriptでアプリ開発を行います。UIは独自の技術（JSXと呼ばれるJavaScriptの拡張構文）で記述します。HTMLは利用しません。React Nativeにもプラグイン機能があり、コミュニティによって多数のプラグインが開発されています。

CordovaとReact Nativeの似ているところ

開発言語はJavaScript

CordovaとReact Native、両方ともアプリ開発を行う際にはJavaScriptを利用します。CordovaはUIについてはHTMLを使いますが、React NativeはJavaScriptコード中にJSXで記述します。

プラグインはネイティブの言語で書く

スマートフォンのネイティブ機能を使いたい場合、どちらもiOSであればObjective-CやSwift、AndroidであればJavaやKotlinを使って記述します。書いたコードをプラグインとして取り込むことで、JavaScriptから呼び出せるようになります。

CordovaとReact Nativeの違うところ

UIの違い

CordovaはUIをHTMLで記述します。React Nativeでは独自の記法であるJSXを使います。

実行エンジンの違い

前述の通り、CordovaはUIをHTMLで記述することからも分かりますが、スマートフォン内にあるWebブラウザエンジン（下記WebView）上で動作します。つまり構図としては次のようになります。このWebブラウザエンジンは従来はUIWebViewと呼ばれるものを使っており、最近ではWKWebViewに移行が進んでいます。

React NativeはUIWevViewやWKWebViewを使わず、スマートフォン内にあるJavaScriptエンジンを使います。JSXによるUIコードはネイティブのUIコンポーネントに変換されます。CordovaのUIほど自由度は高くないですが、それでもこだわればゲームのようなアプリも開発できます。

CordovaとReact Nativeの比較

パフォーマンス

同じようなプラットフォームが二つあった時、パフォーマンスは常に比較対象となると思います。
CordovaはWebViewの上で動作しますので、表示速度や実行速度においてはReact Nativeには劣ります。とは言え、最近のJavaScriptエンジンの高速化、ハードウェアの高機能化によって、ゲームやハイパフォーマンスを期待されるアプリでない限りは十分な実行速度が出るでしょう。

技術の習得容易さ

React NativeはReactを元々知っている人であれば、習得にそれほど時間はかからないでしょう。しかし、Webアプリケーションとスマートフォンアプリの相違について分かっていないとハマることもあるようです。Cordovaの場合、Webフロントエンドの開発技術をそのまま利用できます。Cordova上でReact（Nativeではない、Webブラウザ向けのReact）を利用することで、スマートフォンアプリも開発可能です。

アプリのサイズ

Cordovaはプラグインを自分で選択しますが、React Nativeの場合デフォルトでも数多くのプラグインが組み込まれます。そのため、ビルド時間やアプリのサイズが大きくなる傾向があります。最近のアプリはいずれもサイズが大きくなる傾向がありますので、そこまで気にすることはないですが、アプリサイズを極力小さくしたい場合にはCordovaの方が使いやすいでしょう。

プラグイン数

React Native DirectoryによるとReact Nativeのプラグインは475、Plugin Search - Apache CordovaによるとCordovaプラグインは4,966個公開されています（2020年3月12日現在）。これはCordovaの方が開発の歴史が長いために生まれた差でしょう。すでに使われなくなった、古いOS向けのプラグインも含まれていると予測されます。

ただしこうしたエコシステムの差は、最新OSのサポートや、ちょっとしたプラグインが生み出される差にもなりますので、選定時に注意したい点になります。

Monacaについて

ではここからMonacaの説明になります。MonacaはCordovaをベースに、Web IDEなどの開発環境を加えたサービスになります。一般的にCordovaの開発を行う際には、ローカルコンピュータ上に以下の準備が必要です。

  • 開発環境の準備（Node.js）
  • Cordovaのインストール
  • 開発用エディタのインストール
  • Xcodeのインストール（iOS開発の場合）
  • Android Studioのインストール（Android開発の場合）
  • Android SDKのインストール（Android開発の場合）

これらの開発環境の準備を行った上でCordovaの開発に入ることになります。
開発環境は、iOSやAndroidのOSバージョンアップにともない更新する必要も都度出てきます。
その際に、Node.jsのバージョンアップやOSのバージョンアップなどによりビルド処理が動作しなくなる場合もあり、Cordovaを使う場合にはそうした開発環境のメンテナンス対応も必要となります。

そこでMonacaは環境構築の手間をなくし、クラウドベースでCordovaアプリのビルドを行えるようにしています。サインアップして5分後にはアプリ開発をスタートさせられます。

CordovaとMonacaの共通点

ベースはCordova

MonacaはクラウドでCordovaを動かしているサービスになります。CordovaでできることはMonacaでできます。

CordovaとMonacaの違うところ

開発環境の構築

自分のローカルコンピュータ上でCordovaアプリ開発をはじめる場合、前述の通り開発環境を整えなければなりません。MonacaではWeb IDE（Webベースのプログラミングエディタ）も提供しており、開発環境の構築は不要です。

料金

Cordovaはオープンソース・ソフトウェアであり、無償で利用できます。Monacaもフリー版は提供していますが、ビルド回数やCordovaプラグインの利用などにおいて一部制限があります。有料版を使えば、そうした制限がなくなり、テクニカルサポートも受けられます。

開発できるアプリ

Cordovaを使ってスマートフォンアプリを作る場合、iOS向けの開発はmacOSがなければできません。macOSを使っていれば、AndroidとiOS両方のアプリ開発を行えます。MonacaはWindowsユーザであってもiOSアプリを開発できます。

また、Monacaは最近注目されているPWA（Progressive Web Apps）アプリを開発できます。
※MonacaでのPWA開発については、こちらの記事もご覧ください。

まとめ

ここまでの内容を簡単にまとめると以下の比較表のようになります。

比較表

まず、MonacaとCordovaの相違点です。MonacaにはクラウドIDEや、専用のデバッガー、ビルドサーバーが用意されていてすぐに開発が始められるが、Cordovaでは自分で開発環境を構築する必要があるという点が最大の違いとなります。一方、Monacaの中ではCordovaが動いているので、MonacaではCordovaのすべての機能が利用出来ます。

CordovaとReact Nativeを比べると、UIの作り方、パフォーマンス、アプリのサイズ、プラグインの種類などに違いがあります。どちらを選ぶかは、技術スキルセットであったり、作るアプリの種類などによって異なるでしょう。今回の記事を選定の際、ご参考ください。