React Nativeを快適に扱うためのExpo
次はいよいよ、本連載の軸となるExpoについて解説します。Expoは、React Nativeを簡便に扱うためのフレームワークです。前述のReact Nativeの煩雑さを隠蔽し、より開発者がアプリ開発に集中するために割り切った設計になっています。
React Native単独での開発との差が最もわかりやすい点として、プロジェクト構成がシンプルであることが挙げられます。Expoのプロジェクト作成コマンドを npx create-expo-app@latest --template blank
のように実行すると、図5のプロジェクトが作成されます。
npmプロジェクトの範疇で、かなりシンプルな構成になっていますね。信じがたいかもしれませんが、この内容で図3のプロジェクトと同等の画面を実装できます。なぜ可能なのかと言うと、ExpoのプロジェクトではJavaScriptによるReactアプリケーションのコードと、画像等のアセットしか扱わない作りになっているためです。
Expoによるアプリ開発において、プロジェクト内ではJavaScript部分のビルドだけを行います。しかし、図4のアーキテクチャを満たさなければ、React Nativeのアプリとして動作できません。では、どうやってアプリとして動作させるのかと言うと、Expoがあらかじめ用意しているベースプロジェクトに、作成したReactアプリケーションを後から組み込むのです。
デバッグ時とリリースビルド時では、このベースプロジェクトの使い方が異なります。リリースビルド時の話題は後述することにして、ここではデバッグ時の話をしましょう。デバッグ時は、Expoが提供するExpo Goというアプリを使って、ネイティブアプリのように動作させることができます。
Expo Goは、App StoreやGoogle Playからダウンロードできるアプリです。Expoプロジェクトの開発サーバーが発行するQRコードを読み取ることで、開発サーバーからJavaScriptバンドルをアプリにダウンロードして、動作させることができます。このため、開発中のアプリを実機で動作確認する際に、ネイティブ部分のビルドの手間を省くことができます。図4のアーキテクチャ図を踏襲する形でイメージ図を描くと、図6のようになります。
React Nativeのアーキテクチャの大半がExpoによって隠蔽されているため、開発者はJavaScriptのコードを書くだけで、アプリの動作を実機で確認できるというわけです。こうした開発体験は、ReactやJavaScriptに慣れ親しんでいるエンジニアにとっては、非常に魅力的なものでしょう。
なお、副次的な効果として、開発マシンがWindowsである場合にも、Expo GoがインストールされたiPhoneがあれば、iOSアプリの動作確認が可能です。JavaScriptのビルド環境さえあればいいという特性が、開発環境の選択肢を広げることにもつながります。
アプリ運用をサポートするExpo Application Service
さて、Expoを用いることで、開発マシン内にはNode.js環境だけを用意すればよさそうなことがわかってきました。開発が終わったら、次はリリースビルドをしたり、App Store ConnectやGoogle Playコンソールにアプリをアップロードしたり、継続的にアップデートしていきたいですね。Expoでは、これらの作業をサポートするためのExpo Application Service(EAS、イーエーエス)というサービスが提供されています。
EASは、アプリのビルド等を支援するためのSaaSと、それを操作するためのコマンドラインツール(eas-cli)の総称です。EASを使うことで、アプリのビルドやリリース、アップデートの作業を、手動で行うよりも簡単に行うことができます。EASの機能は、大別して次のようなものがあります。
- EAS Build:アプリをビルドしてaabやipaファイルを生成する
- EAS Submit:アプリをストアにアップロードする
- EAS Update:アプリのアップデートを配信する
EAS Buildは、動作確認の時点でExpo Goが肩代わりしてくれていた部分を、本物のアプリとしてビルドするためのサービスです。ビルドサーバーにJavaScriptとアセットをアップロードすると、Androidアプリのaabファイルや、iOSアプリのipaファイルを生成して、ダウンロードできるようになります(図7)。
ビルドのために、事前にAndroidのキーストアやiOSの証明書をEASに登録しておく必要があるのですが、それに付随して、非常に大きなメリットがあります。証明書の更新もEASのコマンドラインツールがサポートしてくれるのです。Apple Developer Programの証明書更新は、毎年のように行わなければならない作業ですが、EASを使うことで簡略化することができます。
EAS Submitは、生成したaabファイルやipaファイルをApp Store ConnectやGoogle Playコンソールにアップロードするためのサービスです。こちらも事前にAPIキーを登録しておくことで、アップロード作業を自動化することができます。
EAS Updateは、ストアを通さずにアプリのアップデートを配信するためのサービスです。Expo Goの仕組みを本番環境に応用した仕組みで、リリース後のアプリが新しいJavaScriptバンドルをダウンロードして、アプリの挙動を変更する仕組みを組み込めます。
これらの仕組みを活用することで、より簡単に、柔軟に、アプリを運用できるのです。EASを使えるというだけで、Expoの採用には大きなメリットがあります。