CordovaとReact Nativeの違いとは？２大クロスプラットフォーム開発ツールを徹底比較！

（この記事はBryan Ellisが 2018年5月11日に The Web Tub に投稿した Cordova and React Native Comparison の翻訳です。）

本記事ではCordovaとReact Nativeの両フレームワークの比較を行います。ビルドのパフォーマンス、アプリのパフォーマンス、利用できるデバッグ機能の点に特に注目します。

Apache CordovaとReact Nativeとは？

まずは各フレームワークの概要を説明します。

Apache Cordova

Apache Cordovaはモバイルアプリ開発向けのオープンソースフレームワークです。以前はAdobe PhoneGapとして知られていました。このフレームワークを使用すれば、クロスプラットフォームに対応しハイブリッド性を持ち合わせたモバイルアプリを開発できます。開発にはHTML5、CSS3、JavaScriptなどのWeb標準技術を使用します。
Cordovaは開発されてから10年ほど経っているため、インターネット上に豊富なリソースが公開されています。また、アプリの機能を補強するためのプラグインも多数存在します。
アプリ開発環境「Monaca」のフレームワークとして採用されています。

React Native

React NativeはFacebookによって開発されました。こちらもオープンソースのフレームワークです。Cordovaと異なるところは「ネイティブな」クロスプラットフォーム対応のモバイルアプリを開発できる点です。
React Nativeアプリを構築するときにはReactのデザインパターンを使用するのが基本です。アプリのコンパイル時、ReactのUIコンポーネントは対象となるプラットフォームのネイティブUI要素へと変換されます。たとえば、iOSを対象とする場合、React Nativeの Image コンポーネントは UIImageView オブジェクトへと変換されます。
React Nativeは誕生してからまだ3年と日が浅いため、インターネット上で見つけられるリソースはCordovaと比べると少ないのが現状です。だからといってサポートが望めないということではありません。React Nativeのコミュニティは着実に大きくなっており、コミュニティが主催しているDiscordサーバーから多くの情報とサポートを得ることができます。

ビルドのパフォーマンス

Apache Cordovaの場合

ビルドを行い複数の結果を比較したところ、ビルド時間に関してはApache Cordovaの方が良いパフォーマンス結果が得られました。また、ビルド後のパッケージサイズもApache Cordovaの方が小さくなりました。
なお、Cordovaには2つのAPI層が存在し、WebViewとアプリ間の通信（レンダリング用）ならびにWebViewとCordovaプラグイン間の通信にそれぞれ使用される仕組みとなっています。

Apache Cordovaにおけるアプリの構造

Cordovaアプリはコンパイル時に、開発者側で明示的に追加したプラグインのみが組み込まれます。この点がビルド時間とパッケージサイズに関して有利に働いています。

React Nativeの場合

一方、React Nativeではビルド時間が長くなりパッケージサイズも大きくなります。React Nativeではカメラなどのネイティブ機能が標準で組み込まれます（Cordovaではネイティブ機能を組み込むにはプラグインを追加する必要があります）。この点がReact Nativeアプリのビルド後のサイズが大きくなる理由の一つです。ただし、アプリのパフォーマンスなど他の点も考慮すると十分埋め合わせがされていると言えます。

アプリのパフォーマンス

Apache Cordovaの場合

CordovaアプリはWebの標準技術を使用して書かれているので、実行時間とレンダリング時間がネイティブアプリのそれより常に長くなります。これはJavaScriptがインタプリタ型の言語のためです。また、アプリのレイアウトを描画するHTMLとCSSも（コンパイル型というよりは）インタプリタ型と言えます。

上記のようなWeb標準技術の限界に起因するパフォーマンスの問題は最近の高スペックなスマートフォン端末であればさほど気にかけるほどではないでしょう。コンパイル型のネイティブアプリと比べると多少パフォーマンスは劣りますが、それでもCordovaであれば動作も滑らかでネイティブに近い性能を実現することができます。

React Nativeの場合

React NativeのUIコンポーネントはネイティブUI側の各種ビューと紐づけされているため、Cordovaを含むWeb系フレームワークと比較してレンダリング時間が早くなります。また、React Nativeではアプリのロジック自体はJavaScriptで書かれていますが、マルチスレッド技術を利用するため別スレッド上でJavaScriptが実行されます。この点がCordovaアプリとは異なります。

JavaScriptの実行時間に関しては大きな違いはありませんが、ビュー側の制御をする必要がないためロード処理が軽くなります。JavaScript側で必要となるライブラリやバンドルなどはJavaScript VM側で読み込まれてパース処理され、バイトコードが出力されます。

デバッグ機能

Apache Cordovaの場合

Cordovaではデバッグのための環境設定方法がドキュメントで詳しく解説されています。Cordovaでは独自のツール類を提供していませんが、既存のツールを使用してデバッグすることができます。

ツールは多くの場合、次のいずれかとなるでしょう。

iOSの場合：SafariのWebインスペクタ（リモートデバッグ機能）
Androidの場合：Chrome DevTools（リモートデバッグ機能）

これらのツールだけで、ネットワーク、JavaScript、UIに存在する不具合を容易に探し出すことができます。また、確認のたびにアプリを再ビルドする必要もありません。

SafariのWebインスペクタとChrome DevToolsでは次のような機能を使用できます。

JavaScriptのデバッグ
通信内容の確認
DOMの検証

SafariのWebインスペクタを使用したCordovaアプリのデバッグ — Networkタブ

React Nativeの場合

Chrome Developer Toolsを使用すれば、React NativeのJavaScriptコードをリモートでデバッグすることができます。一点残念なことはReactコンポーネントの階層構造を確認する機能がChrome Developer Toolsには欠けている点です。

ReactJSアプリの開発経験がある方であれば、React Developer Tools（Chromeの拡張機能）ならコンポーネントの階層構造を表示する機能が備わっていることはご存知でしょう。なお、この拡張機能はReact Nativeプロジェクト向けにスタンドアローン型のアプリへと生まれ変わりました。

React Developer Tools