> ## 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.

# Expoでモバイルアプリを構築する

> ReplitでExpoを使用してクロスプラットフォームモバイルアプリを作成・プレビューする方法を学ぶ。

アプリは新しいウェブサイトであり、誰もがそれを作成できるべきです。Replitのブラウザベースの開発環境と[Expo](https://expo.dev/blog/from-idea-to-app-with-replit-and-expo)を組み合わせることで、モバイルアプリの作成がウェブサイトの構築と同じくらい簡単になりました。

<Note>
  このチュートリアルでは、[replit.com](https://replit.com)のプロジェクトエディターでReplitとExpoを使ってモバイルアプリを作成する手順を説明します。環境のセットアップからデバイスでのアプリのプレビューまで解説します。
</Note>

ReplitとExpoを使ってモバイルアプリを作成・プレビューする方法を学ぶための2部構成の動画シリーズをご覧ください。

## パート1：5分でモバイルアプリを作成する

ReplitとExpoを使って5分でネイティブなiPhone/Androidアプリを作成する方法を学びます — 初心者に最適です。

<Frame>
  <iframe width="100%" height="400" src="https://www.youtube.com/embed/mTm_dCF53qk" title="ReplitとExpoで5分でモバイルアプリを作成する" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen />
</Frame>

### ReplitとExpoを始める

<Steps>
  <Step title="前提条件">
    始める前に、以下が必要です：

    * Replitアカウント（無料）
    * モバイルデバイスにインストールされた[Expo Goアプリ](https://expo.dev/go)
    * Expo EASアカウント（無料）

    後でApp StoreやGoogle Playに申請するには：

    * iOSの場合：[Apple Developerアカウント](https://developer.apple.com/programs/)（年99ドル）
    * Androidの場合：[Google Play Developerアカウント](https://play.google.com/console/signup)（一回25ドル）
  </Step>

  <Step title="テンプレートをリミックスする">
    まず[ReplitのExpoテンプレート](https://replit.com/@replit/Expo?v=1)にアクセスし、「Remix」を選択して自分のコピーを作成します。これにより、すべてのファイル、設定、依存関係を含むテンプレートの完全なコピーがReplitアカウントに作成されます。
  </Step>

  <Step title="テンプレートを実行する">
    プロジェクトエディターの「Run」ボタンを選択します。コンソールにExpo GoアプリをReplitプロジェクトにリンクするQRコードが表示されます。
  </Step>

  <Step title="デバイスでプレビューする">
    スマートフォンでExpo Goアプリを開き、プロジェクトエディターに表示されているQRコードをスキャンします。これによりアプリがスマートフォンに直接読み込まれます。プロジェクトのコンパイルには1〜2分かかる場合があります。
  </Step>
</Steps>

ExpoはReact Nativeを使用して、単一のコードベースからiOS、Android、ウェブ向けのアプリを構築できます。つまり、アプリを一度作成すれば、すべてのプラットフォームで利用可能になります。

<Note>
  ReplitとExpoによるモバイル開発の民主化により、プロの開発者だけでなく、誰でもアプリを作成できるようになりました。
</Note>

### Agentでアプリをカスタマイズする

<Steps>
  <Step title="AIツールを選択する">
    [Agent](/references/agent/overview)を使ってExpoアプリを構築します：

    * **Buildモード**：複雑な機能や大きな変更に最適。Expoテンプレートは任意のフレームワークをサポートする[General Agent](/references/agent/general-agent)を使用します。
    * **Liteモード**：小さな変更やコード説明に最適。
    * **Planモード**：計画とブレインストーミングに最適。
  </Step>

  <Step title="自然言語でアプリを構築する">
    アプリに何をさせたいかを自然言語で説明します。例えば、「ボタンを押すたびにランダムな猫の画像を表示するアプリを作成して」と聞いてみましょう。
  </Step>

  <Step title="プロジェクトエディターで繰り返し改善する">
    [replit.com](https://replit.com)のプロジェクトエディターでネイティブモバイルアプリの開発を続けます。変更を保存してからExpo Goをリロードして、スマートフォンでアップデートをプレビューします。
  </Step>
</Steps>

<Tip>
  Agentでゼロからモバイルアプリを構築したいですか？[Agentでモバイルアプリを構築する](/references/artifact-types/building-mobile-apps)をご覧ください。Replitのホームページから直接Expo React Nativeアプリを作成する方法を学べます。
</Tip>

## パート2：モバイルアプリをプレビューする

Replit ExpoアプリのiOSプレビュービルドを作成する方法を学びます。

<Frame>
  <iframe width="100%" height="400" src="https://www.youtube.com/embed/wLQusAwfjdY" title="ReplitとExpoでモバイルアプリをプレビューする" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen />
</Frame>

### デバイス用プレビュービルドを作成する

<Note>
  このガイドはiOSデプロイメントに焦点を当てていますが、同じReplitとExpoの手順がAndroid開発にも適用されます。Androidについては、[Expoのデプロイメントガイド](https://docs.expo.dev/build/setup/)と[Google Play Consoleのプロセス](https://play.google.com/console/about/)に従ってください。
</Note>

<Steps>
  <Step title="前提条件">
    iOSプレビュービルドを作成する前に、以下が必要です：

    * パート1で作成したReplitアプリ
    * iOSプレビュービルドとApp Store申請用の[Apple Developerアカウント](https://developer.apple.com/programs/)（年99ドル）
    * iPhone（iOSデプロイメント用）
    * [Expoアカウント](https://expo.dev/signup)

    注意：Apple Developerアカウントを設定した後、Appleがプロファイルを承認するまで16〜24時間かかる場合があります。
  </Step>

  <Step title="EASを初期化する">
    [EAS（Expo Application Services）](https://docs.expo.dev/eas/)はビルドとExpo、そしてApp Storeの間のインターフェースとして機能します。

    1. 実行中のアプリを停止する
    2. プロジェクトエディターのドロップダウンメニューから「EAS init」を選択
    3. プロンプトが表示されたらExpoアカウントにログイン
    4. 新しいプロジェクトを作成するか、既存のものを選択する

    このステップでアプリケーションがExpoアカウントで認証されます。
  </Step>

  <Step title="EAS updateを実行する">
    この初期化ステップにより、プロジェクトを設定してApple Developerアカウントにリンクします。

    1. ドロップダウンメニューから「EAS update」を選択
    2. Metroバンドラーが起動してエクスポートプロセスを完了するまで待つ

    バンドルがアップロードされてブランチが作成されたことが表示されれば、このステップは成功です。
  </Step>

  <Step title="iOSビルドする">
    iOSデバイス用のプレビュービルドを作成します。

    1. ドロップダウンメニューから「EAS publish preview iOS」を選択
    2. iOSバンドル識別子を入力（例：com.yourname.yourappname）
    3. プロンプトが表示されたら[App Store Connect](https://appstoreconnect.apple.com/)アカウントにログイン
    4. 個人のデベロッパーチームを選択
    5. 要求されたらデバイス配布証明書を生成

    [iOSの証明書とプロビジョニングプロファイル](https://docs.expo.dev/app-signing/ios-certificates/)について詳しく学ぶ。
  </Step>

  <Step title="デバイスを登録する">
    iPhoneに開発アプリをインストールするには、デバイスを登録する必要があります。

    1. プロンプトが表示されたら「website」を選択してデバイスを登録
    2. iPhoneで表示されたQRコードをスキャン
    3. プロンプトが表示されたら開発プロファイルをダウンロード
    4. iPhoneの設定を開く
    5. 上部の「ダウンロードされたプロファイル」を選択
    6. プロファイルをインストールし、プロンプトが表示されたらパスコードを入力
    7. プロジェクトエディターに戻り、任意のキーを押して続行
  </Step>

  <Step title="ビルドを待つ">
    Expoがアプリをビルドします。アプリケーションの複雑さによって10〜15分かかります。

    1. ビルドがキューに入れられる
    2. [Expoダッシュボード](https://expo.dev)の「Builds」タブで進捗を確認できる
    3. 完了すると、アプリをインストールするための新しいQRコードが表示される
  </Step>

  <Step title="デバイスにプレビュービルドをインストールする">
    プレビュービルドが完了したら、iPhoneにインストールします。

    1. iPhoneでインストール用QRコードをスキャン
    2. プロンプトが表示されたら「インストール」を選択
    3. ホーム画面にプレビュービルドのインストールが始まる
  </Step>

  <Step title="デベロッパーモードを有効にする">
    アプリを開く前に、iPhoneでデベロッパーモードを有効にする必要があります。

    1. 設定 > プライバシーとセキュリティに移動
    2. 下にスクロールして「デベロッパーモード」を見つける
    3. オンに切り替える
    4. プロンプトが表示されたらデバイスを再起動
    5. 再起動後、プレビュービルドを開いてテストできる
  </Step>
</Steps>

## 達成したこと

このチュートリアルを完了することで、開発テスト用のiOSプレビュービルドがデバイスにインストールされました。ほとんどの開発者がこれを達成するには数日または数週間かかりますが、約1時間で完了しました。

<Accordion title="次のステップ">
  このチュートリアルを完了した後：

  * より多くの機能でアプリを改善し続ける
  * [認証](https://docs.expo.dev/develop/authentication/)とデータストレージを追加する
  * [カメラ](https://docs.expo.dev/versions/latest/sdk/camera/)や[位置情報](https://docs.expo.dev/versions/latest/sdk/location/)などのネイティブデバイス機能を実装する
  * 公開配布のために[App Storeにアプリを申請する](https://docs.expo.dev/deploy/submit-to-app-stores/)
  * 同様の手順でAndroidバージョンを作成する
</Accordion>

### よくある問題と解決策

<AccordionGroup>
  <Accordion title="アプリがExpo Goに接続できない">
    * スマートフォンとコンピューターが同じWi-Fiネットワークに接続されていることを確認
    * 「LAN」の代わりに[「Tunnel」接続モード](https://docs.expo.dev/more/expo-cli/?redirected#tunneling)を使用してみる
    * ファイアウォールが接続をブロックしていないか確認
    * [Expoのトラブルシューティングガイド](https://docs.expo.dev/troubleshooting/networking/)を参照
  </Accordion>

  <Accordion title="変更がアプリに反映されない">
    * アプリをリロードしてみる（デバイスをシェイクして「Reload」を選択）
    * プロジェクトエディターで変更を保存したことを確認
    * コンソールでエラーを確認
    * [Expoの開発モードドキュメント](https://docs.expo.dev/workflow/development-mode/)を確認
  </Accordion>

  <Accordion title="EASでビルドが失敗する">
    * [app.jsonの設定](https://docs.expo.dev/workflow/configuration/)を確認
    * すべての依存関係が互換性があるか確認
    * 正しい[権限](https://docs.expo.dev/guides/permissions/)が設定されているか確認
    * ビルドログのエラーメッセージを確認
    * [EASビルドのトラブルシューティング](https://docs.expo.dev/build-reference/troubleshooting/)を参照
  </Accordion>
</AccordionGroup>

### まとめ

ReplitとExpoを使えば、モバイルアプリの構築がこれまでになく簡単かつ迅速になりました。数週間や数ヶ月ではなく、数時間でアイデアから動作するネイティブモバイルプレビューまで到達できます。ブラウザベースの開発環境とクロスプラットフォームモバイルフレームワークの組み合わせが、モバイル開発への従来の参入障壁を取り除きます。

<Note>
  詳細については、以下を参照してください：

  * [Expoドキュメント](https://docs.expo.dev/)
  * [React Nativeドキュメント](https://reactnative.dev/docs/getting-started)
  * [Apple App Storeガイドライン](https://developer.apple.com/app-store/guidelines/)
  * [Google Play Storeガイドライン](https://play.google.com/console/about/guides/)
  * [Replitドキュメント](https://docs.replit.com/)
</Note>