✅
(Expo,React Native)ビルドせずにアプリのプレビュー環境をすばやく用意する

2026/05/25に公開
 はじめにReact Nativeでアプリの開発を行なっているとき、ExpoのOTAアップデート機能を利用すると、アプリをビルドせずにプレビュー環境をすぐに用意できてPull Requestの段階でプレビューできます。
例えばこのような色一覧アプリがあるとします。
これをBlueのタイルだけサイズを変えるPRを上げたとします

この変更のプルリクエストをあげると、プレビューを確認できる環境をすぐに用意できます。

そして、QRコードを読み込むと、変更がすぐに確認できます。
こんな感じで素早くプレビュー環境を用意できるフローが、Expoにはあるのでご紹介したいと思います。

 用意するものExpo,CIツール(Github Actions等)、Expo Application Service(EAS)、Expo Goまたはdev clientアプリ

 手順EASから、Expoの認証トークンを取得し、CIツールの環境変数に入れます。

次に、CIツールで、アプリのプレビュー環境のQRコードを表示するCIを書きます。以下はGithub Actions前提で書きます。
name: preview
on:
  pull_request:

jobs:
  update:
    name: EAS Update
    runs-on: ubuntu-latest
    permissions:
      contents: read
      pull-requests: write
    steps:
      - name: Check for EXPO_TOKEN
        run: |
          if [ -z "${{ secrets.EXPO_TOKEN }}" ]; then
            echo "You must provide an EXPO_TOKEN secret linked to this project's Expo account in this repo's secrets. Learn more: https://docs.expo.dev/eas-update/github-actions"
            exit 1
          fi

      - name: Checkout repository
        uses: actions/checkout@v5

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 24

      - name: Setup EAS CLI
        run: npm install --global eas-cli@latest

      - name: Configure Expo token
        run: echo "EXPO_TOKEN=${{ secrets.EXPO_TOKEN }}" >> "$GITHUB_ENV"

      - name: Install dependencies
        run: npm install

      - name: Create EAS Update
        id: eas_update
        run: |
          set -euo pipefail

          OUTPUT_FILE=$(mktemp)
          trap 'rm -f "$OUTPUT_FILE"' EXIT

          eas update --auto --non-interactive --json | tee "$OUTPUT_FILE"

          GROUP_ID=$(jq -r '[.[].group | select(. != null)][0] // empty' "$OUTPUT_FILE")
          echo "group_id=$GROUP_ID" >> "$GITHUB_OUTPUT"

      - name: Post preview comment
        if: steps.eas_update.outputs.group_id != ''
        env:
          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        run: |
          PROJECT_ID=$(jq -r '.expo.extra.eas.projectId' app.json)
          GROUP_ID="${{ steps.eas_update.outputs.group_id }}"
          UPDATE_URL="https://u.expo.dev/$PROJECT_ID/group/$GROUP_ID"
          QR_CODE_URL="https://qr.expo.dev/eas-update?slug=exp&projectId=$PROJECT_ID&groupId=$GROUP_ID"

          gh pr comment "${{ github.event.pull_request.number }}" \
            --repo "${{ github.repository }}" \
            --body "🚀 **EAS Update Preview**

          📱 **Scan QR code to open in Expo Go:**
          ![QR Code]($QR_CODE_URL)

          Update URL: \`$UPDATE_URL\`"
ポイントとしては、eas-cliをインストールする、eas-cliを利用してそのPRのeas updateを実行する、そのeas updateからGROPU_IDを取得して、QRコードを作る、以上となります。QRコードをつくって、自動でPRコメントにQRコードをポストします。

これで生成したQRコードを読み込むと、expo goまたはdev clientアプリが立ち上がり、PRで変更した差分を含むソース全体がアプリに反映されます。

これによって、アプリをビルドせずにQRコードを読み込むだけで素早く変更を確認することができます。

https://qr.expo.devはeas updateを反映させたQRコードを生成するURLで、expo公式にも案内があります。

https://docs.expo.dev/more/qr-codes/
具体的にこれがどう言うふうなフローでプレビューされるのかは、こちらの動画を見ていただければ、イメージがつくかと思います。
https://www.youtube.com/watch?v=7UVIrqrrrso

 注意dev clientアプリでこのプレビューフローを扱っているときは、ネイティブに変更がある場合にはそのまま使うことができません。なので、もう一度dev clientアプリをビルドして、このフローを使ってみてください。expo goの場合はそもそもネイティブに変更があるようなものを扱うことはできません。

 Expo Github Actionについて実は、これと同じようなことをやっている、公式から出ているexpo-github-actionというものがあります。しかし、こちらの最終更新が2024年でしばらくメンテナンスされていないため、どうようなことをやるCIを、Codexを使いながら作成しました。上記で紹介した動画も,またexpo公式で案内しているこのプレビューフローもこのActionsを使っています。しかし、いまだにNodejsのバージョンが20だったりでメンテナンスされている気配があるため、そのまま使うのは危険そうな感じがします。

 終わりにExpoのOTAアップデート機能は本番リリース向けよりも、このように開発段階で扱うと非常に便利です。みなさんもぜひこのプレビューフローを活用して、QAを素早く実施してみてください！
https://github.com/mu-tomoya/expo-preview
はじめに

用意するもの

手順

注意

Expo Github Actionについて

終わりに

Discussion
