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サーバーも登録されます。プロジェクト作成からストア提出用バイナリの生成(EAS Build)まで、Claude Codeのセッション内で完結する構築フローです。

前提条件

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で無料登録可能)

Androidの実機テストにはExpo Goアプリ(Google Playで配布)、iOSの実機テストにはApple Developer Programへの登録が必要です。Expo Goは学習用のプレイグラウンドアプリで、独自のネイティブモジュールを含む本番アプリの検証には使えません。カスタムネイティブモジュールを使う場合は、後述する開発ビルドを使います。

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

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

npx create-expo-app@latest

このコマンドで作成したプロジェクトには、AIエージェント向けの設定ファイルが最初から含まれています。

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

既存プロジェクトにこの3ファイルが無い場合は自分で追加します。配布用テンプレートのAGENTS.mdをダウンロードし、CLAUDE.mdには@AGENTS.mdと書き、.claude/settings.jsonにプラグインの有効化設定を加えれば、新規プロジェクトと同じ状態になります。

デフォルトのプロジェクトは、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アカウントにサインインします。プロジェクトだけにスコープを限定してインストールしたい場合は--scope projectを付けます(claude plugin install expo@claude-plugins-official --scope project)。--scopeオプション全体の挙動はClaude Code plugin init/installコマンドの全オプションで確認できます。

プラグインは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ではプラグインが自動登録するため、個別追加は不要です
• プロジェクトコンテキストファイル: AGENTS.md・CLAUDE.md・.claude/settings.json(前述)

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プラグインが有効なのにローカルにインストールされていない場合、Claude Codeセッションでエラーが出ます。この場合は開発者本人のマシンで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はサーバーに送られたデータをモデルの学習には使わないとしています。

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が向く場面と、向かない場面は次の通りです。

よくあるつまずき

• /mcpでサインインできない: Expoアカウントの認証はブラウザ経由です。ブラウザが自動で開かない場合は、ターミナルに表示されるURLを手動で開いてください
• プラグインが有効なのに動かない: .claude/settings.jsonはプラグインを「有効」にするだけで、実体のインストールは開発者ごとにclaude plugin installが必要です。チームメンバーがクローン直後にエラーを見たら、まずこのインストール忘れを疑います
• ローカルMCP機能が使えない: expo-mcpはSDK 54以降が前提です。古いSDKのプロジェクトでは、リモートのサーバー機能(ドキュメント検索・ビルド管理)だけが使えます
• iOS実機でのスクリーンショット撮影ができない: Expo MCPサーバーのローカル機能は、iOSに関してはシミュレーターのみに対応しており、物理デバイスでは動作しません

まとめ

Claude CodeでのExpoアプリ開発は、プラグイン1つでスキル・MCPサーバー・プロジェクトコンテキストファイルがまとめてセットアップされる構築フローです。create-expo-appでプロジェクトを作り、claude plugin install expo@claude-plugins-officialでプラグインを入れ、eas buildでストア提出用バイナリを作るところまでが一続きの作業になります。ゲームエンジンなど他のフレームワークでも同種のMCP連携パターンが提供されており、Unity公式MCPサーバーをClaude Codeで使う方法で類似の設定思想を比較できます。