Expo アプリで QR コードをスキャンしたら、突然「No usable data found」とエラーが出るようになったエラーハンドリング
大森翔吾記事の要約：Expo アプリで QR コードをスキャンしたら「No usable data found」とエラーが出た！なぜ？
この投稿者は、Expo で作ったアプリを Expo 52 にアップデートした後、iPhone のカメラで開発サーバーの QR コードをスキャンしても、「No usable data found」と表示されて、Expo Go アプリで開けなくなってしまった、という問題を報告しています。
原因は expo-dev-client をインストールしたこと
調査の結果、原因は expo-dev-client というパッケージをインストールしたことでした。
expo-dev-client をインストールすると、npx expo start コマンドの動作が変わります。
具体的には、デフォルトで「開発クライアント」という、Expo Go とは別の特別なテスト用アプリで開くモードになります。
この「開発クライアント」モードで表示される QR コードは、Expo Go では開けません。そのため、「No usable data found」エラーが出ます。
Expo Go と 開発クライアントの違い
Expo Go: Expo が用意している、誰でも使える汎用のテスト用アプリ。手軽に動作確認できますが、カスタムネイティブコードを追加できない等の制限があります。
開発クライアント: expo-dev-client を使ってビルドする、自分専用のテスト用アプリ。カスタムネイティブコードを追加できます。本番アプリに近い環境でテストできます。
投稿者の勘違い
投稿者は、expo-dev-client をインストールしても、これまで通り Expo Go で開発を続けられると思っていました。
しかし、expo-dev-client をインストールしたことで、npx expo start がデフォルトで開発クライアント用のモードに変わってしまったため、QR コードが Expo Go で開けなくなったのです。
解決策
Expo Go で開発を続けたい場合
npx expo start --go と、--go オプションを付けて開発サーバーを起動すれば、これまで通り Expo Go で開ける QR コードが表示されます。
開発クライアントで開発を進める場合: npx expo start で開発サーバーを起動し、生成された開発クライアントでアプリを開いて使用します。
結論：expo-dev-client を使うなら、開発クライアントでテストするのが基本
expo-dev-client をインストールした状態では、npx expo start は開発クライアント用のモードで起動するのが通常の動作です。
Expo Go は、あくまでも簡易的なテスト用であり、本格的な開発や本番アプリのビルドには、開発クライアントの使用が推奨されています。
補足
投稿者は当初、Expo Go が主要な開発ツールだと誤解していましたが、実際には、Expo チームは expo-dev-client を使った開発クライアントベースの開発を推奨しています。
端的に言うと、投稿者は「expo-dev-client を入れたら、npx expo start の挙動が変わって、Expo Go で開けなくなった！なんで？」と困っていましたが、それは 「expo-dev-client を入れたら、そういうもの(開発クライアントを使うのが普通)」 というオチでした。
この説明で、記事の内容が理解できたでしょうか。ポイントは、expo-dev-client の役割と、それをインストールしたことによる npx expo start の挙動の変化を理解することです。
大森翔吾expo-dev-client をインストールした後の、開発クライアント用のモードでの検証方法は、主に以下のステップで行います。
- 開発クライアントのビルド
まず、あなたの Expo プロジェクト用にカスタマイズされた「開発クライアント」をビルドする必要があります。これは、Expo Go の代わりに使う、専用のテストアプリのようなものです。
コマンド: eas build --profile development --platform ios (iOS の場合) または eas build --profile development --platform android (Android の場合)
実行場所: プロジェクトのルートディレクトリで実行します。
結果: 開発クライアントのビルドが EAS サーバー上で行われ、完成すると、インストール可能なファイル（iOS の場合は .ipa ファイル、Android の場合は .apk ファイル）が生成されます。または、シミュレータ用のビルドが生成され、自動的に起動します。
2. 開発クライアントをデバイスにインストール
ビルドした開発クライアントを、テストしたい実機デバイスまたはシミュレータ/エミュレータにインストールします。
実機へのインストール (iOS):
.ipa ファイルをダウンロードし、Mac の Finder 経由で iPhone や iPad にインストールします(MacとiPhoneなどをUSBケーブルで繋ぐ)。または、 eas build:runコマンドを使用して、USBで接続されたデバイスに直接インストールすることも可能です。
初めてインストールする際は、iPhone/iPad の設定で、開発者を信頼する必要があります (設定 > 一般 > VPN とデバイス管理 > 開発元 App > 信頼)。
実機へのインストール (Android):
.apk ファイルをダウンロードし、Android デバイスに転送してインストールします。
設定で「提供元不明のアプリ」のインストールを許可する必要があります。
または、 eas build:runコマンドを使用して、USBで接続されたデバイスに直接インストールすることも可能です。
シミュレータ/エミュレータへのインストール:
eas build 実行時に、--profile development-simulator のように、-simulatorのついたプロファイルを使用することで、シミュレータ/エミュレータ用のビルドを行うことができます。
この場合、npx expo start を実行することで、自動的にインストールと起動を行うことができます。
または、eas build:runコマンドを使用することでも可能です。
3. 開発サーバーの起動
開発クライアントがインストールされたら、Expo の開発サーバーを起動します。
コマンド: npx expo start
実行場所: プロジェクトのルートディレクトリで実行します。
結果: 開発サーバーが起動し、ターミナルに QR コードが表示されます (ただし、開発クライアントモードでは、この QR コードは Expo Go では読み込めません)。
4. 開発クライアントでアプリを開く
実機の場合:
インストールした開発クライアントアプリを起動します。多くの場合、自動的に開発サーバーに接続されます。
自動で接続されない場合、表示されているQRコードを読み込むか、npx expo startの実行結果に表示されているURLを直接入力して、手動で接続します。
または、実機と npx expo start を実行する PC を USB 接続し、開発クライアントアプリを起動します。
シミュレータ/エミュレータの場合:
npx expo start を実行すると、多くの場合、自動的にシミュレータ/エミュレータが起動し、開発クライアントが開いて、開発サーバーに接続されます。
5. 検証
開発クライアントでアプリが開いたら、通常の Expo Go での開発と同じように、動作確認やデバッグを行うことができます。
ホットリロード: コードを変更すると、開発クライアントに自動的に反映されます。
ログの確認: ターミナルにアプリのログが表示されます。
デバッグ: 開発クライアントでは、Safari や Chrome の開発者ツールを使ったリモートデバッグも可能です。
補足
開発クライアントは、プロジェクトごとにビルドする必要があります。
ネイティブコードを変更した場合は、開発クライアントを再度ビルドする必要があります。
開発クライアントのビルドには、EAS Build を使用するのが一般的ですが、ローカルでビルドすることも可能です。
まとめ
expo-dev-client を使った開発では、Expo Go の代わりに、専用の開発クライアントアプリを使ってテストを行います。 開発クライアントは、EAS Build などを使ってビルドし、実機またはシミュレータ/エミュレータにインストールする必要があります。開発サーバーを起動し、開発クライアントでアプリを開けば、Expo Go と同じように、ホットリロードやログの確認、デバッグなどの機能を利用できます。
この手順で、開発クライアントモードでの検証方法が理解できたでしょうか。Expo Go よりも少し手間はかかりますが、より自由度の高い開発と、本番環境に近いテストが可能になります。