Claude CodeでExpoアプリ開発を進める手順 — EAS Buildまで

Claude CodeでExpoアプリを作るとはどういうことか

Expoは、Android・iOSアプリをReact Nativeで開発するためのフレームワークです。ファイルベースルーティングやネイティブモジュールの標準ライブラリを備え、create-expo-appコマンドでプロジェクトを作成できます。

Claude CodeとExpoはプラグイン1つで統合されています。claude plugin install expo@claude-plugins-officialを実行すると、Expo特化のスキル群がインストールされます。同時に、ドキュメント・ビルドログ・TestFlightのメタデータにアクセスできるExpo MCPサーバーも登録されます。Expo MCPサーバー経由で、EASビルドの起動と監視、ワークフローの実行、TestFlightのクラッシュ確認までClaude Codeに任せられます。「直近のiOSビルドが失敗した原因を調べて」と頼めば、EASのビルド履歴を読んで原因を探します。

流れは次の4段階です。

前提条件

Expoの開発には以下が必要です。

• Node.js(LTS版)
• macOS、Windows(PowerShellまたはWSL 2)、Linuxのいずれか
• Claude Codeのインストール(curl -fsSL https://claude.ai/install.sh | bash)
• Expoアカウント(EAS Buildを使う場合に必須。expo.devで無料登録可能。Expo MCPサーバーのドキュメント検索ツールsearch_documentationはEASの有料プランが前提)

Expo Goは学習者が手早くExpoを試すためのプレイグラウンドアプリです。自分のアプリのネイティブコードを含めて動かしたいときは、開発ビルド(Expoの開発者ツールを組み込んだ自分のアプリのビルド)を使います。

Expoプロジェクトを作成する

まずcreate-expo-appでプロジェクトを作成します。

npx create-expo-app@latest

create-expo-appは、新規プロジェクトを作るときにだけAIエージェント向けのファイルを書き出します。

プロジェクト単位の指示はAGENTS.mdに書きます。複数のAIコーディングツールを併用する場合の設定ファイル統合パターンはAGENTS.mdとCLAUDE.mdで設定を統合する運用パターンにまとまっています。

Claude Codeは、CLAUDE.mdが無ければAGENTS.mdを直接読みます。この読み込みにはv2.1.277以降が必要です。ところが後からCLAUDE.mdを足すと挙動が変わります。

v2.1.280以降は、実際に何が読まれたかを/memoryに出るパスで確かめられます。

既存プロジェクトには、同じ2ファイルを自分で足します。AGENTS.mdは配布用テンプレートをダウンロードし、すでにAGENTS.mdがある場合は置き換えずに追記します。

curl -o AGENTS.md https://raw.githubusercontent.com/expo/expo/main/packages/create-expo/template/agent-files/AGENTS.md

.claude/settings.jsonには、プラグインを有効にする設定を書きます。

{
  "enabledPlugins": {
    "expo@claude-plugins-official": true
  }
}

デフォルトのプロジェクトは、src/appディレクトリのファイル構成がそのままナビゲーションになるファイルベースルーティングを採用しています。src/app/index.tsxとsrc/app/explore.tsxの2画面をタブナビゲーションとして表示し、src/app/_layout.tsxがプラットフォームごとのタブ構成を定義します。Claude Codeに「設定画面を追加して」のように依頼すると、この規約に沿ってファイルを配置してくれます。

どこに何のファイルを置くかという規約はexpo-project-structureスキルが担います。このスキルは新規プロジェクト専用で、既存アプリをこの構成に作り直す用途には向きません。

Expoプラグインをインストールする

Expo特化のスキルとMCPサーバーは、プラグインを1コマンドでインストールできます。

claude plugin install expo@claude-plugins-official

インストール後、Claude Codeセッション内で/mcpを実行してExpoアカウントにサインインします。セッション内から/plugin install expo@claude-plugins-officialで入れる方法もあります。

スコープの選択肢はv2.1.287のclaude plugin install --helpに出ています。

-s, --scope <scope>  Installation scope: user, project, or local

指定しなければuserスコープで入ります。プロジェクトだけに限定したいときは--scope projectを付けます。ほかのオプションはClaude Code plugin init/installコマンドの全オプションで扱っています。

プラグイン自体はスキルとMCPサーバーの2要素で、create-expo-appが書くコンテキストファイルと合わせて3つが連携します。

• Expo Skills: expo-*(フレームワーク関連)とeas-*(EAS関連)の2系統のスキルを追加します。expo-router(ルーティング)、expo-native-ui(HIG準拠のUI)、expo-upgrade(SDKアップグレード)、eas-app-stores(ストア提出)などがあり、マシンに1回インストールすれば以降のプロジェクトでも使えます
• Expo MCPサーバー: 公式ドキュメント・EASビルド履歴・EAS Updateのチャンネル・TestFlightのメタデータへのライブアクセスを提供するリモートMCPサーバー。Claude CodeとCodexではプラグインが自動登録するため、個別追加は不要です
• プロジェクトコンテキストファイル: create-expo-appが書くAGENTS.mdと.claude/settings.json(前述)。プラグインには含まれません

プラグインを使わずMCPサーバーだけを足す場合は、次のコマンドで登録します(URLはhttps://mcp.expo.dev/mcp、認証はOAuthです)。

claude mcp add --transport http expo https://mcp.expo.dev/mcp

Claudeのウェブ・デスクトップ・モバイルアプリからは、Claude Connectorsに載っているExpoコネクタで接続でき、ローカルへのインストールは要りません。TeamまたはEnterpriseプランでは、組織全体で有効にできます。Claude Code以外のエージェント(Cursor等)には専用プラグインが無いため、Expo SkillsとExpo MCPサーバーを個別にインストールします。

Claude Codeで開発を始める

プロジェクトルートでClaude Codeを起動し、自然言語で作業内容を指示します。

cd my-app
claude

セットアップの確認には、次のプロンプトを使います。

Open package.json and tell me which Expo SDK version this project targets.

package.jsonに記載されたSDKバージョンで応答が返れば、Claude Codeがプロジェクトを正しく読み込めています。

Expoのドキュメントが挙げる具体的なプロンプト例は次の通りです。

expoプラグインが有効なのにローカルに無い場合、セッションに次のエラーが出ます。

Plugin 'expo' is enabled in project settings but isn't installed here.

その開発者のマシンでclaude plugin install expo@claude-plugins-officialを実行し、セッションを再起動します。

実機・シミュレーターで動かす

開発サーバーの起動はnpx expo start(パッケージマネージャーによりyarn/pnpm/bunも可)です。QRコードをExpo Goアプリでスキャンするか、iOSシミュレーター・Androidエミュレーターで直接開きます。

Expo MCPサーバーは、SDK 54以降であればexpo-mcpパッケージを開発依存として追加することで、ローカル機能(スクリーンショット撮影・要素タップ・DevTools起動)を有効にできます。

npx expo install expo-mcp --dev
EXPO_UNSTABLE_MCP_SERVER=1 npx expo start

この状態でClaude Codeに「青い円のViewを追加して、正しく描画されているか確認して」と依頼すると、コードの実装・スクリーンショットの撮影・検証までを1つの指示で完結できます。開発サーバーを再起動したときは、AIツール側のMCP接続も再接続が必要です。

Expo MCPサーバーには制約もあります。同時に接続できる開発サーバーは1つのみで、ローカル機能のiOS対応はシミュレーターに限られ(実機は未対応)、iOSのローカル機能はmacOSホストでのみ動作します。Expoはサーバーに送られたデータをモデルの学習には使わないとしています。ただしデータはMCPクライアントとモデル提供元に渡るため、保持や学習の扱いはそちらの規約に従います。HIPAAやSOC 2の対象になる案件では、有効化の前に各規約を確かめておく必要があります。

EAS Buildでストア提出用バイナリを作る

ストアに提出できるバイナリを作るには、EAS(Expo Application Services)のeas buildを使います。

npm install --global eas-cli
eas login
eas build:configure
eas build --platform all

eas build:configureはEAS用の設定を生成し、eas build --platform allはAndroid・iOS両方のバイナリを1コマンドでクラウド側に送信します。プラットフォームを個別に指定したい場合は--platform androidまたは--platform iosを使います。

プロジェクトの構成によっては追加設定が必要です。環境変数に依存するアプリはビルド設定に環境変数を追加し、モノレポ構成のプロジェクトは専用の手順に従い、プライベートなnpmパッケージを使う場合はnpmトークンをビルド設定に追加します。Node・Yarn・CocoaPods・Xcodeなど特定バージョンのツールに依存する場合も、eas.jsonのビルド設定でバージョンを指定できます。開発用のビルドはチーム内で共有可能で、2人のメンバーが同じプロジェクトフィンガープリントでeas build:devを実行すると、新規ビルドの代わりに既存ビルドがダウンロードされます。

ストア提出には、それぞれ次のアカウントが必要です。

署名鍵(Androidのkeystore、iOSのプロビジョニングプロファイルと配布証明書)はEAS CLIに生成・管理を任せることも、自分で用意した鍵を使うこともできます。アプリストアへの提出を経ずに、実機・シミュレーターへ直接インストールしたいだけであれば、開発ビルド(expo-dev-clientを含むデバッグビルド)を作る方法もあります。

ビルドをCI/CDに組み込む場合は、EAS Workflowsのbuildジョブを使います。

jobs:
  build:
    type: build
    params:
      platform: all
      profile: ${{ github.ref_name == 'main' && 'production' || 'preview' }}

EAS Buildは既存のCIパイプラインやGitHub連携からのトリガーにも対応しています。同じくMCPサーバー経由でデプロイやスケーリングを扱う例はHeroku MCPサーバーでClaude Codeからアプリをデプロイ・スケーリングするが参考になります。

EAS Buildが向く場面と、向かない場面は次の通りです。

よくあるつまずき

• AGENTS.mdの指示が効かない: まず/memoryに出るパスで、実際に読まれたファイルを確かめます(v2.1.280以降)。CLAUDE.md系のファイルがあるときはAGENTS.mdが読まれないため、CLAUDE.mdに@AGENTS.mdと1行書けば取り込めます
• /mcpでサインインできない: Expoアカウントの認証はブラウザ経由です。ブラウザが自動で開かない場合は、ターミナルに表示されるURLを手動で開いてください
• プラグインが有効なのに動かない: .claude/settings.jsonはプラグインを有効にするだけで、実体のインストールは開発者ごとにclaude plugin installが必要です。クローン直後のエラーは前節のメッセージです
• ローカルMCP機能が使えない: expo-mcpはSDK 54以降が前提です。古いSDKのプロジェクトでは、リモートのサーバー機能(ドキュメント検索・ビルド管理)だけが使えます

まとめ

迷ったら、まずAGENTS.mdに指示を書き、CLAUDE.mdは必要になるまで作らないのが衝突の少ない構成です。v2.1.281より前のBedrock経由やテレメトリー無効のセッションではAGENTS.mdを直接読めないため、@AGENTS.mdを書いたCLAUDE.mdが要ります(更新すれば直接読めます)。ゲームエンジンなど他のフレームワークでも同種のMCP連携パターンが提供されており、Unity公式MCPサーバーをClaude Codeで使う方法で類似の設定思想を比較できます。