第4章 Expoとは ― モバイル開発の敷居を下げるフレームワーク

Expoが引き受けてくれる領域と採用する理由、そしてExpo GoとDevelopment Buildの使い分けを見ていきます。

本書では一貫してExpoを前提に話を進めます。本章では、Expoが何を提供してくれるフレームワークなのか、なぜ採用するのか、そして開発の進め方として知っておくべき2つのモード(Expo GoとDevelopment Build)について見ていきます。

ExpoのReact Nativeに対する位置づけ

Expoは、React Nativeを土台にして「アプリ開発に必要なもの一式」をまとめてくれるフレームワークです。

WebでReactを使うときに、素のViteやWebpackで一から組むより、Next.jsやRemixのようなフレームワークを使うのが当たり前になっているのと同じ感覚です。React Nativeでも、素のReact Nativeテンプレートで始めるのではなく、Expoから始めるのが現代の標準になっています。

Expoが提供してくれるものを大まかに挙げると、

• 開発用のCLI(npx create-expo-app、npx expo start、expo-doctorなど)
• ファイルベースのルーティング(Expo Router)
• ネイティブ機能を扱うモジュール群(expo-camera、expo-notifications、expo-locationなど多数)
• ネイティブプロジェクトをコードから自動生成する仕組み(Continuous Native Generation, CNG)
• ビルド・配布・OTAアップデートまでを担うクラウドサービス(EAS)

これらが緩やかに統合されていて、「自分の手でXcodeを開かなくても、相当のところまで開発・配布が完結する」状態を作ってくれます。

なぜ本書でExpoを採用するのか

理由は3つあります。

環境構築のハードルがほぼ消える

素のReact Nativeで始めると、iOSの開発はXcodeとCocoaPods(iOSの依存ライブラリ管理ツール)のセットアップ、AndroidならAndroid Studioのインストールにエミュレータの設定、各種SDKの整備、と立ち上げ前にやることが多いです。ここで挫折してしまう人を何度も見てきました。

Expoなら最初の一歩はnpx create-expo-app一行で済み、npx expo startで実機(Expo Goアプリ)に即座にQRコードで接続できます。Webフロントエンドエンジニアが普段やっているnpm createとnpm run devの感覚そのままで、自分のスマホで動くアプリが出来上がります。

標準モジュールが豊富

カメラ、画像ピッカー、位置情報、プッシュ通知、生体認証、バックグラウンドタスク ― モバイルアプリでよく使う機能の多くは、最初からExpoのモジュールとして用意されています。

「Native Modulesを自分で書かないと使えない」のではなく、「npx expo install expo-cameraで入れるだけ」で使い始められます。標準モジュールでカバーできない領域だけ、自分でExpo Modulesを書けばいい、という作りです。

EASでビルドから配布までがクラウドで完結

iOSのビルドにはmacOSが必要、署名証明書の管理が面倒、というのがネイティブ配布の鬼門でした。EAS(Expo Application Services)はExpo公式のクラウドサービス群で、これらの面倒を一手に引き受けてくれます。

EASに含まれる主な機能は次のとおりです。

• EAS Build: クラウド側でiOS/Androidアプリをビルドする。Windows/Linuxからでもストア提出用のipa/aabが作れる
• EAS Submit: ビルドしたバイナリをApp Store ConnectやGoogle Play Consoleに自動でアップロードする
• EAS Update: アプリストア審査を通さずに、JavaScriptとアセットだけをOTA(Over-The-Air)で配信する
• EAS Workflows: ビルド・テスト・配信などをパイプラインとして自動化する(GitHub Actionsのような感覚)
• EAS Hosting: Expo Routerで作ったWeb版とAPIルートをホストする

「個人のMacBookでビルドして、証明書を整えて、ストアに上げて…」をすべて引き受けてくれるのがEASです。EAS Build/Submit/Updateの使い方は第18章で詳しく扱います。

ネイティブ層をブラウザに見立てる

React Nativeのアプリは、端末側に入るネイティブ層と、その上で動くJavaScriptの2階建てになっています。Webに置き換えると、ネイティブ層がブラウザ、JavaScriptがその上で動くアプリケーションにあたります。

誤解のないように補足すると、描画のしくみが同じという話ではありません。第2章で見たとおり、React NativeはWebViewでHTMLを描いているのではなく、本物のネイティブUIを組み立てます。

似ているのは分かれ方です。JavaScriptの実行環境が先に端末へインストールされていて、その中でJavaScriptが読み込まれて動く。ブラウザとWebアプリの関係とよく似た構造になっています。

この見立てを持っておくと、Expoの開発モードの違いがそのまま説明できます。

• Expo Go: あらかじめ配られている標準のブラウザ。Expoの標準モジュール一式が最初から入っている
• Development Build: そのブラウザを自分好みに拡張したもの。必要なネイティブモジュールを組み込んで自分でビルドする
• ストアに出すアプリ: 実行環境とJavaScriptをまとめて1つのパッケージに固めたもの

実行環境が先に端末へ入り、その中でJavaScriptが動きます。ストアに出すときだけ、両者が1つにまとまります。

開発中は実行環境とJavaScriptが分かれているので、JavaScriptを書き換えればMetro経由ですぐ反映されます。Webでいうリロードの感覚です。ネイティブモジュールを足したときは実行環境そのものを作り直す必要があり、ここでビルドが挟まります。これが次に出てくるDevelopment Buildを作る場面です。

「Expo Goで動かない」というのは、たいていExpo Goの実行環境にそのモジュールが入っていないことを指しています。

ストアに並ぶアプリでは、この2つが1つにまとまった状態で配布されます。利用者から見れば普通のアプリですが、中身は開発中と同じ2階建てのままです。

Expo GoとDevelopment Buildの使い分け

Expoで開発する際、アプリを実機で動かす方法は大きく2つあります。

Expo Go

Expoが配布している、開発中のアプリを読み込むための汎用アプリです。端末に入れておけば、npx expo startで出てきたQRコードを読み取るだけで、開発中のアプリをすぐに自分の端末で動かせます。

Expo Goには「Expoの標準モジュール一式」が同梱されています。なので、expo-cameraやexpo-locationのような標準モジュールを使うアプリであれば、追加のセットアップなしに動作確認ができます。

開発の入り口として、Expo Goの手軽さは圧倒的です。本書の第5章以降の基礎部分は、すべてExpo Goで動かす想定で書いています。

入手方法が変わった点に注意

かつてExpo GoはApp StoreとGoogle Playからそのままインストールできましたが、現在ストアに並んでいるのはSDK 54までです。SDK 55以降のExpo Goはストアの審査待ちが続いており、公開の見通しは示されていません。SDK 57のリリースノートでも「SDK 57向けの新しいバージョンを出したいが、まだ承認を待っている」と説明されています。本書はSDK 55以降を前提にしているので、この点は最初に押さえておいてください。

とはいえ入手できなくなったわけではなく、経路が変わっただけです。プラットフォームごとに次のようになります。

• Android(実機・エミュレータ): Expo CLIがSDKに対応したExpo Goを取得してインストールしてくれます。実機はUSB接続しておけば、従来とほぼ同じ手軽さです
• iOSシミュレータ: こちらもExpo CLIが対応バージョンを取得してくれます(macOSとXcodeは必要です)
• iPhone実機: eas goコマンドを使います。EASのサーバー上でExpo Goがビルドされ、自分のTestFlightの内部テスターへ配信されます。Macは不要ですが、Apple Developer Program(年間99ドル)への登録が必要です

npm install -g eas-cli
eas go

eas goは既定で最新の対応SDK向けにビルドします。SDKを固定したい場合は--sdk-versionで指定できます。

つまり、無料でゼロ設定という入り口が残っているのはAndroid実機とiOSシミュレータです。iPhoneしか持っておらずMacもない場合は、年間99ドルを払ってeas goを使うか、ストアに残っているSDK 54で始めるか、あるいは最初からDevelopment Buildへ進むか、の選択になります。npx create-expo-appも、ストア版に合わせたSDKと最新SDKのどちらで作るかを尋ねてくるようになりました。

Expo自身もExpo Goを「まず何より教育用のツール」と位置づけ直し、それ以外の用途ではDevelopment Buildへ移ることを勧めています。学習の入り口としては引き続き有効ですが、腰を据えて作り始めたらDevelopment Buildへ移る前提の道具だと捉えておくのが実態に合っています。

ちなみに、npx expo start --webを叩けば同じコードがブラウザでも立ち上がります(React Native for Web経由)。Expo Routerも公式にWebをサポートしているため、社内デモやストーリー確認ではWebで開く運用も組めます。ただしネイティブ専用APIや一部のライブラリはWebでは動かないため、Webへの本格対応は別腰の作業になります。本書ではモバイル(iOS/Android)を主軸に進めます。

Development Build

「Expo Goに含まれていないネイティブモジュール」を使いたくなった時の選択肢です。

たとえば自分でExpo Modulesを書いた場合、サードパーティのSDK(動画プレイヤー、広告ライブラリ、Firebaseの一部機能など)を組み込んだ場合は、Expo Goではそれらを実行できません。そういうケースでは、自分のアプリ専用のランタイム(Development Build = Dev Client)を1度ビルドして、それを実機にインストールします。

Dev Clientを作ったあとも、JavaScript側のコードは普段通りnpx expo startでホットリロードできます。「ネイティブ層は固定、JS層は素早くイテレーション」という、React Nativeの本来の開発リズムを保てます。

EAS Buildを使えば、Development BuildのiOSバイナリはクラウド側で作れます。そのためWindows/Linuxでも、iOSシミュレータこそ動かせないものの、登録済みのiPhone実機へDevelopment Buildをインストールして開発できます。iOS実機へのインストールにはApple Developer Programと端末UDIDの登録が必要です。具体的なビルドとインストールは第18章で扱います。

一方、macOS + Xcodeがある場合はEASは必須ではありません。npx expo run:ios --deviceを実行すると、接続したiPhone向けのDevelopment Buildをローカルでビルドしてインストールできます。EASは「Macを用意せずにビルドしたい」「クラウドでビルドを揃えたい」場合の有力な選択肢であり、Development Buildそのものの必須条件ではありません。

どちらもMetroからJSを素早く読み込めます。違うのは端末側の器で、Development Buildにはアプリ固有のネイティブ機能を組み込めます。

使い分けの方針

以前は「まずExpo Goで始めて、必要になったらDevelopment Buildへ移る」という時間の順序で説明できました。入手経路が変わった今は、手元にある機材でどちらから入るかを最初に決めるほうが実態に合っています。

3行目でDevelopment Buildを勧めるのは、費用が変わらないからです。eas goでExpo Goを手に入れるにも同じ99ドルが要りますが、そうして作ったExpo Goは基礎を終えたら使わなくなります。同じ出費なら、その先もずっと使えるDevelopment Buildを最初から持っておくほうが無駄がありません。

そして、どの経路で始めたとしても行き着く先はDevelopment Buildです。自分でExpo Modulesを書いたとき、Expo Goに入っていないサードパーティSDKを組み込んだとき、アイコンやスプラッシュの見え方を確かめたいとき(第17章)。いずれもExpo Goでは確認できません。Expo Goは基礎を学ぶあいだの足場であって、アプリを本気で作り始めたら全員が通る道だと考えておいてください。

本書の実践編で作るTODOアプリは、Expo GoでもDevelopment Buildでも同じように動きます。本文はExpo Goを想定した書き方をしていますが、Development Buildで進めている場合もそのまま読み替えられます。

本章のまとめ

• ExpoはReact Nativeに対するNext.jsのような位置づけのフレームワーク
• 環境構築・標準モジュール・ビルド配布の3点でハードルを大きく下げてくれる
• ネイティブ層をJavaScriptの実行環境と捉えると、Expo Go・Development Build・ストア配布の違いが一本の線でつながる
• 開発の入り口はExpo Goで十分、ネイティブ依存が出てきたらDevelopment Buildへ移行
• ただしストアに並ぶExpo GoはSDK 54まで。SDK 55以降はAndroidとiOSシミュレータならCLI、iPhone実機ならeas go(Apple Developer Programが必要)で入手する
• EASでビルドからストア提出、OTA更新までをクラウドで完結できる

次章では、実際に開発環境をセットアップして、最初のExpoアプリを動かすところまでを扱います。