Claude CodeでReact Native・Expoモバイル開発を加速する——Expo公式MCPとEAS自動化

はじめに

Swift/ネイティブiOSでも、Webフロントエンドでもない。「iPhoneとAndroidを1つのコードで」——React NativeとExpoを使ったクロスプラットフォーム開発を、Expo公式MCPサーバーとClaude Codeで自動化する話だ。

React Native・Expoはクロスプラットフォーム開発のスタンダードになっているが、iOS/Android固有のコード差異・ネイティブモジュールの統合・EASビルド設定の複雑さには専門知識が必要だ。App Store提出・TestFlight配信・Google Play管理を把握しているエンジニアがチームに限られることも多い。

この状況に対してExpoは、Claude Code・Cursor・VS Code向けに公式MCPサーバー（docs.expo.dev/eas/ai/mcp/）を提供した。ツールベンダーがAIコーディング支援を「公式サポート」として位置づけた重要な変化だ。この記事では、Expo公式MCPとCLAUDE.mdを組み合わせたReact Native開発の自動化フローを見ていく。

Expo MCP Server + CLAUDE.mdでReact Native開発を設計する

Expo公式MCPサーバーを設定することが、このフローの起点だ。

# Expo MCP Serverの設定
claude mcp add expo

Expo MCPが有効になると、ExpoプロジェクトのEASビルド・デプロイ・設定をClaude Codeから直接操作できるようになる。Expoは合わせて公式Skills（docs.expo.dev/skills/）も提供しており、React Native開発・デプロイ・デバッグの自動化スキルがClaude Code向けに用意されている。

CLAUDE.mdでの開発規約定義がこのMCPとセットで機能する。

# CLAUDE.md（React Native・Expo開発規約）
## React Native Development Policy

### プロジェクト設定
- フレームワーク: Expo（bare workflow禁止。必要なネイティブモジュールはEAS Build経由）
- ナビゲーション: Expo Router（React Navigation直接使用禁止）
- 状態管理: Zustand（Redux禁止。過剰設計の防止）
- TypeScript: strict mode（any禁止）

### コンポーネント設計
- 全コンポーネントはfunctional components（class component禁止）
- StyleSheetオブジェクト使用（インラインスタイル禁止）
- プラットフォーム差異: Platform.select() または .ios.tsx/.android.tsx 分岐
- FlatListには必ずkeyExtractor・getItemLayout・memo化を適用

### テスト要件
- コンポーネントテスト: React Native Testing Library（@testing-library/react-native）
- E2Eテスト: Detox（重要ユーザーフローのみ：ログイン・購入・主要機能）
- パフォーマンス: FlatListの再レンダリング検知テストを必須とする

### パフォーマンスルール
- useCallback/useMemoは計測ベースで適用（過剰最適化禁止）
- 画像: expo-imageを使用（react-native Imageの代わりに）
- 大きなリストはFlashListを検討（FlatListの代替）

Expo Routerを使ったタブナビゲーションの実装指示パターンはこうなる。

「Expo Routerを使ったタブナビゲーションを実装して。
構造:
- (tabs)/_layout.tsx にタブ設定
- タブ: Home・Search・Profile
- 各タブはStack navigatorで深いナビゲーションに対応
- iOS/Android差異（Androidのback button）を考慮」

CLAUDE.mdにExpo Router必須の規約が入っているため、この指示でExpo Router前提の実装が生成される。

React Native固有のベストプラクティスをCLAUDE.mdにゼロから定義するより、コミュニティで整備されたルールセットを出発点にカスタマイズする方が効率的だ。react-native-skills（github.com/gigs-slc/react-native-skills）には130+ルールが含まれており、Callstack・Vercel・Expo由来のベストプラクティスが体系的にまとまっている。

EAS Build・Deploy自動化——App Store提出まで

EASの設定をClaude Codeに依頼するとき、CLAUDE.mdにプロファイル設計が定義されていれば正しい構成が生成される。

「EAS Buildの設定をして。
要件:
- development profile: Expo Go（シミュレータ）
- preview profile: 内部配布用APK/IPA（TestFlightへ）
- production profile: App Store/Google Play提出用
- 環境変数はeasのenvで管理（.env禁止）」

development/preview/productionの3プロファイル設計と用途をCLAUDE.mdに明記しておくことが重要だ。EASの設定ミスで「本番に開発設定が入る」という事故が起きやすいのは、プロファイルの役割が曖昧な場合だ。

expo-toolkit（github.com/rahulkeerthi/expo-toolkit）はインタラクティブウィザード付きのExpo総合ツールで、プロジェクト初期化からApp Store提出まで一貫して扱える。

expo-toolkit init → build → submit

Expo公式Skills（docs.expo.dev/skills/）の中にはEAS Workflowsに特化したスキルもあり、複雑なCI/CDパイプラインの自動構築をClaude Codeで操作できる。expo-toolkitとEAS Workflowsスキルの組み合わせが、App Store提出までの自動化の現実的な構成になる。

TestFlight配信の設定も同様に自然言語で依頼できる。「TestFlight内部テスターに自動配信するEAS Submitを設定して」という指示で、証明書設定・提出設定が生成される。App Store提出手続きの学習コストをClaude Codeが吸収する形になる。

Jest + Detox——2層モバイルテストの自動生成

React Nativeのテスト戦略は2層で設計する。

| レイヤー | ツール | 対象 |

|---------|-------|-----|

| ユニット/コンポーネント | Jest + React Native Testing Library | 全コンポーネント |

| E2E | Detox | 重要ユーザーフローのみ |

コンポーネントテストはClaude Codeに「このコンポーネントのReact Native Testing Libraryテストを書いて。スナップショット・レンダリング・ユーザーインタラクションを網羅して」と依頼するだけで生成できる。

DetoxのE2Eテスト生成パターンはこうなる。

// Claude Codeが生成するDetox E2Eテスト（ログインフロー）
describe('Login Flow', () => {
  beforeAll(async () => {
    await device.launchApp();
  });

  it('メールとパスワードでログインできること', async () => {
    await element(by.id('email-input')).typeText('test@example.com');
    await element(by.id('password-input')).typeText('password123');
    await element(by.id('login-button')).tap();
    await expect(element(by.id('home-screen'))).toBeVisible();
  });

  it('無効なパスワードでエラーが表示されること', async () => {
    await element(by.id('password-input')).typeText('wrong');
    await element(by.id('login-button')).tap();
    await expect(element(by.text('パスワードが正しくありません'))).toBeVisible();
  });
});

Detoxを使う際の現実的な制約を理解することが重要だ。Detoxはシミュレータ/実機に依存するため、CIで「フレイキー（不安定）なテスト」が発生しやすい——ネットワーク遅延・タイムアウト・画面描画タイミングの差異でテストが間欠的に失敗する問題だ。CLAUDE.mdに「Detoxはログインフロー・購入フロー・主要機能の3フローのみ」と定義することで、CIに現実的な実行時間でE2Eを組み込める。全機能をDetoxでカバーしようとすると、CIが不安定になって誰もテストを信じなくなる。

Expo Goで実機テスト中にエラーが出たとき、Claude Codeに「このエラーを解析して」と依頼するだけでスタックトレースの原因を特定してくれる。

まとめ

React Native・Expo開発のClaude Code活用は、Expo公式MCPサーバーを設定してCLAUDE.mdに開発規約を定義するところから始まる。MCP経由でExpoプロジェクトの設定・ビルド・デプロイをClaude Codeから直接操作できるようになり、CLAUDE.mdの規約がコンポーネント生成・EAS設定・テスト生成の判断基準になる。

EASビルドプロファイルの設計は「development/preview/productionの3プロファイルと用途をCLAUDE.mdに明記する」だけで大半のミスが防げる。Detoxは「重要3フローのみ」に絞ることでCIの現実的な実行時間が確保される。

ExpoがClaude Code向けに公式MCPを提供しているという事実は、「主要ツールベンダーがAI支援を標準として位置づけた」という業界の変化を示している。まずExpo MCPをプロジェクトに追加して、EAS Buildの設定をClaude Codeに依頼するところから体験してみてほしい。

コメント

タイトルとURLをコピーしました