> ## Documentation Index
> Fetch the complete documentation index at: https://docs.replit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# モバイルアプリのトラブルシューティング

> Replit上でExpoとReact Nativeを使ってモバイルアプリを作成する際の一般的な問題を解決する。

Replitでモバイルアプリを作成する際、プレビュー、バンドル、またはパッケージの依存関係に問題が発生することがあります。このガイドでは、クイックフィックスから詳細なデバッグ手順まで、一般的な問題の解決方法を説明します。

## クイックフィックス

まずこれらを試してください。ほとんどの問題が解決します：

| 問題                | 試すこと                                      |
| ----------------- | ----------------------------------------- |
| スマートフォンに変更が反映されない | スマートフォンをシェイクしてExpoメニューを開き、**Reload** をタップ |
| プレビューに変更が反映されない   | コンソールで **R** を押してリバンドルを実行                 |
| アプリがフリーズまたは応答しない  | コンソールからアプリを停止して再起動                        |

## 一般的な問題

<AccordionGroup>
  <Accordion title="デバイスに変更が反映されない">
    変更を加えてもスマートフォンに表示されない場合：

    1. **スマートフォンをシェイク**してExpo開発者メニューを開く
    2. **Reload** をタップしてバンドルを再ダウンロード

    Webプレビューでは、コンソールで **R** を押してリバンドルを実行します。

    それでも変更が反映されない場合は、キャッシュのクリアを試してください（以下の[Metroキャッシュをクリアする](#clear-the-metro-cache)を参照）。
  </Accordion>

  <Accordion title="Expo Goで赤いエラー画面が表示される">
    赤いエラー画面は通常、JavaScriptエラーまたはモジュールの欠如を示します。エラーメッセージを読んでください — 多くの場合、特定のファイルと行が示されています。

    **よくある原因：**

    * パッケージがインストールされていないか、バージョンが間違っている
    * Webでは動作するがネイティブでは動作しないモジュール（またはその逆）
    * コード内の構文エラー

    **試すこと：**

    1. エラーメッセージをよく読む — 多くの場合、何が問題かが正確に示されています
    2. メッセージを共有してAgentに修正の支援を依頼する
    3. エラーが特定のパッケージに言及している場合は、依存関係の再インストールを試みる（[パッケージを再インストールする](#reinstall-packages)を参照）
  </Accordion>

  <Accordion title="Webでは動作するがスマートフォンでクラッシュする（またはその逆）">
    パッケージや機能によってはプラットフォームによって動作が異なります。React NativeはiOS、Android、Webの3つのターゲットにコンパイルします。Webで動作するライブラリがネイティブをサポートしていない場合や、異なる設定が必要な場合があります。

    **試すこと：**

    1. パッケージのドキュメントでプラットフォームのサポートを確認する
    2. Agentに「このパッケージはExpo Goと互換性がありますか？」と質問する
    3. モバイルでサポートされていない場合は、機能をサーバーに移動することを検討する

    <Tip>
      パッケージを調べる際は、「Expo compatible」を探すか、[Expo SDK ドキュメント](https://docs.expo.dev/versions/latest/)でサポートされているモジュールを確認してください。
    </Tip>
  </Accordion>

  <Accordion title="QRコードがスキャンできないまたはアプリが接続できない">
    **ネットワークを確認する：**

    * スマートフォンとパソコンが同じWiFiネットワークに接続されている必要があります
    * 企業ネットワークや公共ネットワークでは接続がブロックされることがあります

    **トンネルモードを試す：**
    制限されたネットワークを使用している場合、トンネルモードはExpoのサーバー経由でトラフィックをルーティングします。Agentにトンネルモードでアプリを起動するよう依頼するか、Shellで `npx expo start --tunnel` を実行します。

    **Expo Goを再起動する：**
    スキャンする前にExpo Goを完全に閉じて再度開きます。
  </Accordion>

  <Accordion title="ビルドに時間がかかる">
    最初のビルドはキャッシュがないため常に時間がかかります。その後のビルドは速くなるはずです。

    **ビルド時間に影響する要因：**

    * プロジェクト内のパッケージ数
    * キャッシュをクリアした後の初回実行
    * パッケージのダウンロード時のネットワーク速度

    ビルドが常に遅い場合は、不要なパッケージがインストールされていないか確認してください。
  </Accordion>

  <Accordion title="モジュールが見つからないエラー">
    「Unable to resolve module」または「Module not found」が表示される場合：

    1. パッケージがインストールされていない可能性 — Agentにインストールを依頼する
    2. パッケージはインストールされているがキャッシュが古い可能性 — キャッシュをクリアする
    3. パッケージが存在しないまたはスペルが間違っている可能性 — パッケージ名を確認する

    モジュールが存在するはずの場合は[パッケージを再インストールする](#reinstall-packages)を試してください。
  </Accordion>
</AccordionGroup>

## デバッグコマンド

クイックフィックスで解決しない場合、これらのコマンドでさまざまなキャッシュと状態をリセットできます。Shellで実行します。

### Metroキャッシュをクリアする

MetroはReact Nativeコードをコンパイルするバンドラーです。キャッシュをクリアすることで強制的に新しいビルドを実行します。

Shellで次を実行します：

```bash theme={null}
npx expo start --clear
```

これによりバンドラーキャッシュがクリアされ、開発サーバーが再起動されます。出力に「Bundler cache is empty. Rebuilding.」と表示されます。

<Tip>
  キャッシュの問題が頻繁に発生する場合は、開始コマンドに `-c` を追加できます。Agentに開発コマンドにクリアフラグを追加するよう依頼してください。
</Tip>

### パッケージを再インストールする

モジュールエラーやバージョンの不一致が発生している場合、パッケージの再インストールが有効なことが多いです。

Shellで次を実行します：

```bash theme={null}
rm -rf node_modules && npm install
```

これにより、インストール済みのすべてのパッケージが削除され、`package.json` に基づいて最初からインストールし直されます。

<Note>
  プロジェクトが別のパッケージマネージャー（`bun` や `pnpm` など）を使用している場合は、適切なインストールコマンドを使用してください：`bun install` または `pnpm install`。
</Note>

### バージョンの不一致を確認する

Expo Doctorはプロジェクトをスキャンして、パッケージ間のバージョンの不一致などの一般的な問題を検出します。

Shellで次を実行します：

```bash theme={null}
npx expo-doctor
```

出力の警告を確認します。修正を提案する場合は慎重に評価してください — 新バージョンに互換性のない変更がある場合、パッケージを盲目的にアップグレードすると新たな問題が発生することがあります。

<Warning>
  パッケージを更新するのは特定の理由がある場合のみにしてください。「とりあえず」アップグレードすると、新バージョンに互換性のない変更がある場合にアプリが壊れる可能性があります。
</Warning>

## フルリセット

他の方法が機能しない場合、フルリセットですべてのキャッシュをクリアしてすべてを再インストールします。

<Accordion title="ニュークリアオプション：フルリセットコマンド">
  このコマンドはすべてのキャッシュを削除してパッケージを最初からインストールし直します。最後の手段として使用してください。

  ```bash theme={null}
  rm -rf node_modules .expo && npm cache clean --force && npm install && npx expo start --clear
  ```

  **実行内容：**

  1. `rm -rf node_modules` — インストール済みパッケージを削除
  2. `rm -rf .expo` — Expoのローカルキャッシュを削除
  3. `npm cache clean --force` — npmのグローバルキャッシュをクリア
  4. `npm install` — すべてのパッケージを再インストール
  5. `npx expo start --clear` — Metroキャッシュをクリアした状態で起動

  このコマンドを実行した後、すべてが最初からリビルドされるため次のビルドに時間がかかります。
</Accordion>

### デバイスのキャッシュをクリアする

再読み込み後もスマートフォンのアプリが古いコードのままになっている場合：

* **iOS**: Expo Goで **Settings** に移動して **Clear Cache** をタップ
* **Android**: **Settings > Apps > Expo Go > Storage > Clear Cache** に移動

## クイックリファレンス

| 問題             | まず試すこと                   | 次に試すこと           |
| -------------- | ------------------------ | ---------------- |
| 変更が反映されない      | スマートフォンをシェイク → Reload    | Metroキャッシュをクリア   |
| バンドラーエラー       | `npx expo start --clear` | node\_modulesを削除 |
| モジュールが見つからない   | 依存関係を再インストール             | フルリセット           |
| バージョン不一致の警告    | `npx expo-doctor` を実行    | 提案された修正を評価       |
| 新しいパッケージが機能しない | サーバーを再起動                 | Metroキャッシュをクリア   |
| app.jsonを変更した  | サーバーを再起動                 | —                |

## さらにサポートが必要な場合

まだ解決しない場合：

* **Agentに質問する**: エラーと試したことを説明してください。Agentが問題を診断して修正できることが多いです。
* **Expoドキュメントを確認する**: [Expoのトラブルシューティングガイド](https://docs.expo.dev/troubleshooting/overview/)でさらなるシナリオをカバーしています。
* **エラーを検索する**: 正確なエラーメッセージをコピーして検索してください — 同じ問題に遭遇した人が既にいる可能性が高いです。

## 次のステップ

* [ネイティブモバイルアプリ](/references/artifact-types/building-mobile-apps)に戻る
* 公開フローを学ぶ：[モバイルアプリのビルドとリリース](/build/mobile-app)