クロスプラットフォームアプリ開発技術の比較（React Native、Flutter…etc.）

本記事は、多数あるアプリ作成方法の中から最適なものを選択するためのポイントを解説していく連載記事の1つです。

過去の2つの記事は主に「非エンジニア」の方向けに書いていましたが、本記事からやや技術的な知識を持つ方向けの内容に寄っていきます。
もちろん多くの方に読んでいただきたいと思いますが、よくわからない方は無理にこの記事を読んだだけで判断せず、専門知識を持った方と相談しながらどの手法を採用すべきかを考えていただければ幸いです。

連載記事

1. モバイルアプリとWebアプリの比較
2. ネイティブアプリとクロスプラットフォームアプリの違い
3. クロスプラットフォームアプリ開発技術の比較（やや技術者向け）（本記事）
4. Webアプリの擬似モバイルアプリ化（PWA）について

スマホで動作するアプリの全体像

下図はスマホで動作するアプリの全体像です。先の記事ではWebアプリとモバイルアプリの違いや、ネイティブアプリとクロスプラットホームアプリの違いを説明しました。
本記事ではクロスプラットホームアプリをさらに細分化して、実装方式による違いを説明します。

図の通り、クロスプラットホームアプリの中にネイティブUI型、独自レンダー型、Web view型、ガワアプリと４種類ありますが、まずその中の２つ、ネイティブUI型と独自レンダー型から説明します。

ネイティブUI型と独自レンダー型

ネイティブUI型と独自レンダー型の違いは、UIの描画処理をどこで行うかです。人が目にするアプリのUIを画面に表示すること（描画処理を行うこと）をレンダリングと言います。このレンダー処理をどの層で行うかが、ネイティブUI型と独自レンダー型の違いです。

ネイティブUI型

ネイティブUI型の場合、OSの中にあるネイティブレンダーを利用してUIを描画します。そのためアプリ側ではレンダリングを正確にコントロールすることが難しいです。
ネイティブUI型の代表的なフレームワークとしては、React Nativeが挙げられます。

ネイティブUI型のメリット・デメリット

React Nativeに代表されるネイティブUI型のメリットは、OSに適したUIで描画されるためユーザが操作しやすくなることです。
iOSであればiOSが持っているネイティブレンダーを使用するため、iOSユーザーが使いやすいUIで表現されます。Androidの場合も同様です。

次にネイティブUI型のデメリットですが、開発時のコードは同一なのにレンダーをOSに依存するためデザインが統一できないことが挙げられます。同じアプリでもOSが異なると少し異なるUIで表現されてしまうのです。
デザインの統一が難しいのでOS毎に個別に設定するコードが必要になり、その分開発コストが少し増える可能性もあります。

また、OSのレンダーを介しての描画となるため、複雑なアニメーションや大量のデータ処理を行う場合は、独自レンダー型に比べるとパフォーマンスはやや劣ります。

独自レンダー型

独自レンダー型は、前述したネイティブUI型との比較で考えていただくとわかりやすいと思います。ネイティブUI型ではOS側にレンダーがありますが、独自レンダー型ではアプリ側にレンダーが入っています。OSに依存しないので自由なレンダリングができます。
独自レンダー型の代表的なフレームワークとしては、flutterが挙げられます。

独自レンダー型のメリット・デメリット

flutterに代表される独自レンダー型のメリットは、OSに依存しないUIを作成できることです。ネイティブUI型には異なるOS間でデザインが統一できないというデメリットがありましたが、独自レンダー型ならそのような問題はありません。

次に独自レンダー型のデメリットですが、これはネイティブUI型のメリットの反対になります。
自動的にOSに適したUIで表現してくれないため、ユーザが操作に迷ってしまう可能性があります。（あくまでも可能性があるというだけであまり気にする必要はありません。世の中に多々ある優れたUIを実現するフレームワークを利用すれば解決できる問題だといえます）

React NativeとFlutter

続いて、ネイティブUI型、独自レンダー型それぞれの代表的なフレームワークであるReact NativeとFlutterについて説明します。
React Nativeは、Meta社(旧Facebook)が作成したアプリ作成フレームワークです。開発言語はJava Scriptを使用しています。
Flutterは、Google社が作成したアプリ作成フレームワークです。開発言語は Dartを使用しています。

それぞれに特徴や優れた点が沢山ありますが、以下、代表的なものに絞って記載いたします。

React Nativeのメリット・デメリット

React Native最大のメリットは、多くのWebエンジニアが使う言語であるJavaScript（TypeScript）で開発できるため、Webエンジニアにとって扱いやすいことです。
モバイルエンジニアに比べて、Webエンジニアは母数が多いため、JavaScript（TypeScript）を扱える技術者は集めやすい傾向にあります。

最近ではExpo（React Native開発のためのフレームワーク・プラットフォーム）を用いた開発が主流となってきており、Expo独自の機能を使えることもメリットとして挙げられます。
特徴的な機能としては、「OTAアップデート、EAS、Expo Go」などがあります。

React Nativeのデメリットとしては、JavaScriptを基盤とする巨大なエコシステムを持つため、利用可能なライブラリの選択肢が豊富である反面、品質やメンテナンス状況にばらつきがあり、プロジェクトに最適なライブラリを評価・選定するコストが高いという側面があります。（”豊富”という点はメリットでもありますが。）
また、高度なネイティブ機能利用においては、サードパーティ製ライブラリへの依存度が高い点も懸念点として上げられます。

Flutterのメリット・デメリット

FlutterはGoogle社が作成したフレームワークなので基本的にGoogleが推奨するデザインの原則であるマテリアルデザインを採用しています。
そのためマテリアルデザインに準拠したUIであればスピーディーに開発できることがFlutterの大きなメリットです。（実装時に設定すればiOSのCupertinoデザインにも対応可能です。）

また、Android、iOSだけでなくWeb、Windows、Mac、Linuxの6つのプラットフォームに対応するアプリケーションが開発可能なこともFlutterの特長です。

React Nativeと比べると処理が高速なこともFlutterのメリットだといえます。
先に説明したとおりReact Nativeは「ネイティブUI型」なので、Java ScriptからOS側のレンダーを呼び出します。内部でこのようなレンダー処理の流れを持っているため反応が少し遅くなります。
一方で、「独自レンダー型」のFlutterはアプリ内で直接レンダー処理を行うため、比較的素早い反応が可能です。

Flutterのデメリットとしては、Dart言語を学習する必要があることです。React NativeのようにWebエンジニアがすぐに扱えるわけではありません。
ただし、DartはJavaScript, Javaと言語仕様が似ているため、新たに学ぶといっても似通った部分が多く比較的学習コストは低いといえます。
また、クロスプラットフォームアプリではありますが、iOSに対応する場合は開発環境がMacOS（MacPC）である必要があります。

React NativeかFlutterか？選択のポイント

ここからはReact NativeとFlutterのどちらを採用するか迷われている場合の、選択のポイント・確認したい項目をいくつか紹介したいと思います。

実現したいUIの面から考える

• iOSとAndroid各OSに適したUI（OS標準の表現で）アプリを作成する必要があるかどうか
• iOSでもAndroidでも、UIを統一したアプリを作成する必要があるかどうか
• 複雑なアニメーションや大量のデータ処理を行うUIが必要かどうか

機能や技術面から考える

• 開発者がJavaScript/TypeScriptのWebアプリ開発経験が豊富かどうか
• 開発メンバーの作業PCがMacなのかWindowsなのかどうか
• Windows、Mac など、iOS・Android以外のOSにも対応する必要があるかどうか
• ハードウェア連携などの要件によりネイティブ機能の一部実装が必要な場合、対応するライブラリが存在するかどう

技術的トレンドから考える
技術的なトレンドについても選択時に考慮したいポイントとなります。
FlutterとReact Nativeの比較は、モバイルアプリ開発の最前線において常に注目されている話題です。
エンジニアに支持され、採用しやすい技術であるかどうかは、プロジェクトの成否を左右する大きな要素と言えるでしょう。
長期的な観点で見ても、将来性のある人気技術である方が、技術者を継続的に確保しやすく、運用・保守の面でも有利になる点は、１つ抑えておきたいポイントです。

※実際にはもっと多様な選択のポイントや考慮すべき制約がありますが、この記事ではわかりやすく単純な例を用いた説明に留めています。

Web View型とガワアプリ

続いて、Web View型とガワアプリについて説明していきます。

Web View型

まずは、Web View型についてです。Web View型はモバイルアプリの中でWebアプリを動かすイメージです。
アプリの中にはWeb Viewというブラウザのようなものがあり、その中で、Webアプリを動かして機能を提供するのがWeb View型です。

（以前の記事「モバイルアプリとWebアプリの比較」も参考になると思うので併せてご覧ください。）

Webアプリは基本的にカメラ・マイク等端末側の機能（ネイティブ機能）を自由に使用できないのですが、この問題を解消するために、Web View型のフレームワークの中にはPluginというものが用意されています。Pluginを通すことで、Webアプリでもネイティブ機能を使用することができます。
Web View型の代表的なフレームワークとしては、Apache Cordovaが挙げられます。

ガワアプリ

ガワアプリというのは、アプリ内のWeb Viewを通じてWebサーバーに置いてあるプログラムを要求する仕組みです。サーバーにあるWebアプリを呼び出して実行し、アプリ側はそれを描画しているだけです。
ガワアプリの「ガワ」は「外側」や「何かを包む皮」の「ガワ」を指しているようです。要は外側だけモバイルアプリっぽく見せているが、実際はアプリ側にはほとんど機能を持たず、Webを表示することを主機能としているアプリです。

Web View型とガワアプリの違いは、アプリの中にWebアプリを持っているのか、サーバーにアクセスしてWebアプリを呼ぶだけなのかという点です。

「Web View型」と「ガワアプリ」のメリット・デメリット

WebView型のメリットは、Webエンジニアでも開発ができることです。
一方でデメリットは、パフォーマンスが低いことです。WebViewで描画すること自体がパフォーマンスを下げる要因なので、この問題は避けられません。
カメラ・マイク等端末側の機能（ネイティブ機能）も使用できますが、一部の機能に限定されることもデメリットとして挙げられます。

ガワアプリは、サーバーからWebアプリを呼ぶだけなので、既存のWebアプリをモバイルアプリのように動作させられることがメリットです。
アプリの更新が容易なことも大きなメリットです。「ガワ」には手を加えずサーバー側のアプリを更新すれば済むことです。

一方で、デメリットはパフォーマンスが低いことです。WebView型と同じくWebViewを使う時点でパフォーマンスが悪化するのでこの問題は避けられません。
カメラ・マイク等端末側の機能（ネイティブ機能）を使用できない点もデメリットとして挙げられます。

コーディングが難しいだけで、ガワアプリでもやり方によっては一部のネイティブ機能を使えますが、実現するために一般的なモバイルアプリ開発とは違った実装が必要になります。そのため、ネイティブ機能を多く使用する場合はガワアプリは不向きです（少なくとも開発者の観点からはお勧めできません)。
ガワアプリは一般的には複雑な処理を必要としないコンテンツ配信などのアプリに用いられるものと考えてください。

WebView型やガワアプリを選択する際のポイント

ここからはWebView型やガワアプリで良いかどうか迷われている場合の、選択のポイントをいくつか紹介したいと思います。

開発効率から考える
既存のWebアプリがあり、モバイルアプリ用に一部修正して転用することを考えている場合はWebView型やガワアプリが重要な選択肢になります。
WebView型のアプリをつくる場合、一部ネイティブ機能を使う部分だけPluginで実現するなど手を加えれば、それ以外の大部分はWebアプリのコードを転用できます。
ガワアプリの場合はもっと簡単です。サーバに置いてある既存Webアプリをそのまま呼ぶだけので、新しく開発するのは「ガワ」の部分だけで済みます。

機能面から考える
複雑な処理を実行しない場合はWebView型やガワアプリも選択肢になります。
一方で、長いリストを扱うような高いパフォーマンスが必要な処理はWebViewのパワーでは追いつけないので無理があります。
オフライン実行の必要があるか否かも選択の際に大事なポイントになります。WebView型はいわばアプリの中にWebアプリを持っている状態なので、オフラインでも実行できますが、ガワアプリはWebサーバにプログラムを要求しにいくのでインターネットにつながっていないと動きません。

まとめ

本記事では、クロスプラットフォームでモバイルアプリをつくる場合の実装方式による違いや選択のポイントをご紹介しました。

どの手法を採用するか正しく判断を下すためには、アプリに求める機能性、開発コスト、保守のしやすさ、技術の将来性…などさまざまな観点を持って考える必要があります。
そのため、ビジネスサイドの方とITサイドの方、両者が参加するプロジェクトチームで協議するのがお勧めです。
外部ベンダーに開発を依頼する場合は実装方式の相談にも乗ってくれるようなパートナーを選定するのが良いでしょう。

NCDCは、モバイルアプリを用いたサービスの全体像を検討するところから、アプリ開発の要件定義、UX/UIデザイン、実装まで一元的にお客様をご支援することを得意としています。
目的に応じた適切な技術の選定からご相談いただけますので、モバイルアプリの開発を検討されている方はぜひお問い合わせください。