【ITニュース解説】Run Your Expo App on a Physical Phone (with a Development Build) — Expo 53 + Expo Router

この記事は、ExpoとExpo Routerを使ってReact Nativeアプリを開発する際に、実機で効率的にテストする方法を解説する。特に、App StoreやPlay Storeを経由せずに、ホットリロードやネイティブモジュールのテストを可能にする「development build」の利用に焦点を当てている。

従来のExpo Goアプリでは、ネイティブモジュールや特定の権限を必要とする機能をテストすることが難しかった。しかし、development buildを使えば、アプリ固有の設定やネイティブコードを含むカスタム版のExpo Goを自分で作成できる。これにより、実機でのテストがより現実的になり、開発効率が向上する。

development buildを使用する手順は以下の通り。

1. 開発環境の準備: Node.js、npmまたはYarnをインストールし、Expo CLIとEAS CLIをグローバルにインストールする。また、Expoアカウントにログインしておく必要がある。iOSの場合はiOS 16以上を推奨し、開発者モードを有効にする。Androidの場合は、開発者オプションとUSBデバッグを有効にする（USB経由でインストールする場合）。

2. eas.jsonの設定: プロジェクトのルートディレクトリにあるeas.jsonファイルに、development build用の設定を追加する。具体的には、developmentプロファイルを作成し、developmentClient: trueと設定する。これにより、EAS Buildがネイティブモジュールを含むカスタムExpo Goをビルドするようになる。iOSの場合はリソースクラスを、Androidの場合は空のオブジェクトを指定する。

Copy
1{
2  "cli": { "version": ">= 10.0.0" },
3  "build": {
4    "development": {
5      "developmentClient": true,
6      "distribution": "internal",
7      "ios": { "resourceClass": "m-medium" },
8      "android": {}
9    },
10    "preview": {
11      "distribution": "internal"
12    },
13    "production": {
14      "autoIncrement": "version"
15    }
16  },
17  "submit": {
18    "production": {}
19  }
20}

3. development buildのビルドとインストール: eas build -p ios --profile developmentまたはeas build -p android --profile developmentコマンドを実行して、development buildをビルドする。初回ビルド時には、デバイスのUDID登録が必要になる場合がある。ビルドが完了したら、EASのビルドページからiOSの場合は直接インストールし、Androidの場合はAPKファイルをダウンロードしてインストールする。Androidでは、QRコードをスキャンするか、USB経由でadb install your-app.apkコマンドを使用する。

4. 開発時の実行: npx expo start --dev-clientコマンドを実行して開発サーバーを起動する。次に、実機にインストールしたdevelopment buildを開き、ターミナルまたはWeb UIに表示されるQRコードをスキャンする。これで、コードを編集して保存すると、ホットリロードが有効になり、変更が即座に実機に反映される。

ネイティブモジュールや権限、SDKバージョンを変更した場合のみ、development buildを再ビルドする必要がある。JavaScriptやTypeScript、Expo Routerのコードを変更した場合は、再ビルドは不要。

Expo Routerを使用している場合、ルーティングや画面、リンクの変更もホットリロードで即座に反映される。

トラブルシューティングとして、"Connecting…"で止まる場合は、PCとスマートフォンのネットワーク接続を確認し、npx expo start --tunnelオプションを試す。iOSでインストールできない場合は、デバイスがApple Developer Programに登録されているか、開発者モードが有効になっているかを確認する。変更が反映されない場合は、シェイクしてリロードするか、キャッシュをクリアする。

development buildは、App StoreやPlay Storeを経由せずに、アプリのテストを高速化するための強力なツールだ。チームメンバーも同様にdevelopment buildを使用できる。

さらに、EAS Updateを使用すると、プレビュー版や本番環境向けに、OTA（Over-the-Air）アップデートを簡単に配信できる。eas update --branch preview --message "Fix copy on home screen"コマンドを実行するだけで、ユーザーはアプリを再起動することなく、最新の変更を入手できる。app.jsonまたはapp.config.tsでexpo-updatesを設定し、updatesプロパティを適切に設定する必要がある。

ネイティブコードのデバッグには、iOSの場合はXcode、Androidの場合はAndroid StudioとLogcatを使用する。JavaScriptのデバッグには、React DevTools、console logs、またはFlipperを使用する。

development buildを使用する際には、eas.jsonにdevelopmentプロファイルがあり、developmentClient: trueに設定されているか、development buildが各デバイスにインストールされているか、npx expo start --dev-clientがローカルで実行されているか、スマートフォンとPCが同じネットワーク上にあるか（または--tunnelを使用しているか）、ネイティブ構成を変更した場合のみ再ビルドする必要があるかを確認する。