【ITニュース解説】Running Your Expo App on a Real Device for Testing

Expoアプリを実際のデバイスでテストする方法について解説する。実際のパフォーマンスやユーザー体験の確認には実機テストが不可欠である。

Expoアプリを実機でテストする方法は主に二つある。一つは「Expo Go」アプリを使う迅速な方法、もう一つは「カスタム開発クライアント」を自分でビルドする方法だ。どちらを選ぶかは、開発しているアプリがどのような機能やライブラリを使っているかによって決まる。

まず、一つ目の方法は「Expo Go」アプリを使う経路だ。この方法は、プロジェクトがExpo SDKに標準で含まれるAPIのみを使用している場合に最適である。独自ネイティブモジュールやExpo Goがサポートしない外部ネイティブライブラリを使っていない場合に選択すると良い。設定が非常に少なく、すぐに始められるのが特徴だ。

この方法を始めるための準備として、テスト用のiPhoneまたはAndroidスマートフォンが必要だ。そのスマートフォンに無料の「Expo Go」アプリをインストールしておく。最も重要な点は、開発PCとスマートフォンが同じWi-Fiネットワークに接続されていることだ。企業ネットワークでは通信制限により接続できない場合があるため注意が必要である。

準備が整ったら、以下の手順でアプリを実機で動かせる。PCのプロジェクトルートディレクトリでターミナルを開き、「npx expo start」コマンドを実行する。開発サーバーが起動し、ターミナルにQRコードが表示される。スマートフォンでそのQRコードをスキャンし、Expo Goアプリで開く。これによりExpo GoがPCのサーバーに接続し、アプリのJavaScriptコードをダウンロードして実行する。一度実行されれば、コードを変更して保存するたびに、アプリは自動的にデバイス上で更新される。アプリが動いている最中にデバイスを軽く振ると、デバッグツールを利用できる開発者メニューが表示される。

次に、二つ目の方法は「開発ビルド」を自分で作成する経路だ。この方法は、アプリがExpo Goではサポートされない「カスタムネイティブモジュール」を使用している場合に必要となる。例えば、特定のビデオプレーヤーや決済ライブラリ、Firebaseなどのサードパーティ製ライブラリを追加した場合だ。Expo Goはこれらのライブラリが要求するネイティブコードを含んでいないため動作しない。この解決策が、プロジェクト独自のネイティブコードが組み込まれた「カスタム開発ビルド」を作成することだ。

この方法を始めるための準備として、無料のExpoアカウントが必要だ。次に、「EAS CLI」というツールをPCにインストールする。「npm install -g eas-cli」コマンドでインストールし、その後「eas login」コマンドでExpoアカウントにログインする。

準備が整ったら、以下の手順で開発ビルドを作成し、アプリを実機で動かす。まず、カスタムビルドされたアプリが開発サーバーと通信できるようにするためのライブラリ「expo-dev-client」をプロジェクトに追加する。「npx expo install expo-dev-client」コマンドで実行できる。次に、アプリのビルド設定ファイル「eas.json」が開発ビルドプロファイルを持ち、「developmentClient: true」となっていることを確認する。ファイルがない場合は「eas build:configure」コマンドで生成可能だ。これらの設定が完了したら、開発ビルドを作成する。これはExpoのクラウドサーバー上で行われ、数分から20分程度かかる。Android用には「eas build --profile development --platform android」、iOS用には「eas build --profile development --platform ios」コマンドを実行する。なお、iOSビルドには有料のApple Developerアカウントが必要だ。

ビルドが完了すると、EASはアプリをダウンロード・インストールするためのリンクとQRコードを提供する。このQRコードをスキャンしてアプリをデバイスにインストールする。iOSの場合は、通常TestFlightを通じてインストールする。アプリをインストールしたら、PCで「npx expo start --dev-client」コマンドを実行してサーバーを起動する。そして、スマートフォンにインストールした新しいカスタムアプリを開く。このアプリは自動的に開発サーバーに接続し、アプリが実行される。Expo Goの場合と同様に、デバイスを振ることで開発者メニューにアクセスできる。

開発ビルドを使った場合、JavaScriptコードの変更は開発サーバーから動的に読み込まれるため、コードを変更するたびに毎回アプリを再ビルドする必要はない。これにより、迅速に開発を進められる。新しいビルドを作成する必要があるのは、ネイティブコードに変更があった場合のみだ。具体的には、ネイティブモジュールの追加や削除、ネイティブ設定ファイルの変更、またはプロジェクトのExpo SDKバージョンアップグレードなどがこれに該当する。これら以外のJavaScriptやCSSスタイル変更などは、開発サーバーが瞬時に更新を反映してくれる。

この二つの方法をプロジェクトの状況に合わせて使い分けることで、Expoは開発のあらゆる段階で柔軟なワークフローを提供し、効率的な開発を可能にする。