Expo MCP Server 🚀

Expo開発を劇的に効率化するためのModel Context Protocol (MCP) サーバーです。Cursor、Claude、その他のAIアシスタントでExpo/React Nativeアプリの開発を簡単に行えます。

✨ 主要機能

🎯 Expo開発の包括的サポート

プロジェクト初期化: テンプレート選択から設定まで瞬時にセットアップ
EAS統合: Build、Submit、Update操作をワンコマンドで実行
クロスプラットフォーム: iOS、Android、Web対応の統一開発体験
開発サーバー管理: ホットリロード、トンネリング、デバッグモード制御

🔧 10種類の専門ツール

Project Initializer: Expoプロジェクトの瞬時セットアップ
Config Generator: app.json/app.config.js最適化設定生成
Development Manager: 開発サーバーとデバッグ環境管理
Build Manager: EASビルドとローカルビルド統合管理
EAS Manager: Expo Application Services完全統合
Deployment Helper: OTA更新、Webデプロイ、ストア申請
Authentication Setup: 認証プロバイダー統合とセキュア実装
Storage Manager: AsyncStorage、SecureStore、SQLite統合
Navigation Helper: Expo Router/React Navigation完全サポート
Best Practices: コード品質分析とパフォーマンス最適化

🚀 Cursorでのクイックインストール

ワンクリックインストール

次のリンクをクリックするだけでCursorにMCPサーバーをインストールできます：

📱 Cursor に Expo MCP Server をインストール

手動インストール手順

Cursorで Cmd+Shift+P を押下
"Preferences: Open User Settings (JSON)" を選択
mcpServers セクションに以下を追加：

{
  "mcpServers": {
    "expo": {
      "command": "node",
      "args": [
        "{{path}}/expo-mcp-server/dist/index.js"
      ],
      "env": {
        "NODE_ENV": "production"
      },
      "disabled": false,
      "autoApprove": []
    },
  }
}

Cursorを再起動

🛠️ 基本的な使い方

インストール後、Cursorで以下のコマンドを使用してExpoプロジェクトの開発を開始できます：

新規プロジェクト作成

@expo 新しいTypeScriptプロジェクトをExpo Routerで作成して

EASビルド設定

@expo EASでiOSとAndroidの本番ビルド設定を生成して

認証システム構築

@expo GoogleとAppleサインインの認証システムを実装して

ナビゲーション設定

@expo タブナビゲーションとモーダル画面の構成を作成して

OTA更新デプロイ

@expo 本番環境にOTA更新をデプロイして

📋 利用可能なツール詳細

1. プロジェクト初期化 (`expo_project_init`)

// 使用例
{
  template: 'blank-typescript',
  projectName: 'MyAwesomeApp',
  packageManager: 'yarn',
  features: ['expo-router', 'expo-notifications', 'expo-auth-session'],
  platforms: ['ios', 'android', 'web']
}

2. 設定生成 (`expo_config_generate`)

// 使用例
{
  platform: ['ios', 'android', 'web'],
  environment: 'production',
  features: ['push-notifications', 'deep-linking', 'splash-screen'],
  buildProfile: 'production'
}

3. 開発サーバー管理 (`expo_dev_server`)

// 使用例
{
  platform: 'all',
  port: 8081,
  tunnel: true,
  devClient: true,
  host: 'lan'
}

4. ビルド管理 (`expo_build`)

// 使用例
{
  platform: 'all',
  profile: 'production',
  local: false,
  autoSubmit: true
}

5. EAS操作 (`expo_eas`)

// 使用例
{
  operation: 'build',
  platform: 'all',
  profile: 'production',
  message: 'v1.0.0 リリース',
  autoPublish: true
}

🎨 Expo最新機能の活用例

Expo Router (App Directory)

// app/_layout.tsx
import { Stack } from 'expo-router';

export default function RootLayout() {
  return (
    <Stack>
      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
      <Stack.Screen name="modal" options={{ presentation: 'modal' }} />
    </Stack>
  );
}

EAS Update

# 開発環境へのOTA更新
eas update --branch development --message "新機能追加"

# 本番環境への自動更新
eas update --branch production --auto

Expo Dev Client

// Development builds with custom native code
{
  "plugins": [
    "expo-dev-client",
    [
      "expo-notifications",
      {
        "icon": "./assets/notification-icon.png"
      }
    ]
  ]
}

🔧 開発者向け情報

ローカル開発

git clone <repository-url>
cd expo-mcp-server
npm install
npm run build
npm run dev

テスト実行

npm test
npm run test:coverage

MCP Debug Mode

NODE_ENV=development npm start

📦 対応するExpo機能

コア機能

✅ Expo SDK 50+ 完全対応
✅ Expo Router (App Directory)
✅ EAS Build & Submit
✅ EAS Update (OTA)
✅ Expo Dev Client
✅ Metro bundler最適化

プラットフォーム

✅ iOS (React Native)
✅ Android (React Native)
✅ Web (React DOM)
✅ PWA対応

ライブラリ統合

✅ React Navigation
✅ Expo Router
✅ Expo Authentication
✅ Expo Secure Store
✅ Expo SQLite
✅ Expo Notifications
✅ Expo Location
✅ Expo Camera
✅ Expo AV

🌟 Expo開発ベストプラクティス

パフォーマンス最適化

バンドルサイズ削減: 不要なモジュールの除去
画像最適化: WebP形式とレスポンシブ画像
レンダリング最適化: FlatList、memo、useMemo活用
OTA更新戦略: 段階的ロールアウト

セキュリティ強化

SecureStore使用: 機密データの暗号化保存
証明書ピニング: ネットワーク通信のセキュリティ
コード難読化: リリースビルドの保護
権限管理: 最小権限の原則

開発効率向上

TypeScript活用: 型安全性とIDE支援
ESLint/Prettier: コード品質とフォーマット統一
Storybook: コンポーネント開発
E2Eテスト: Detox/Maestroでの自動テスト

🤝 貢献

プルリクエストを歓迎します！以下の手順で貢献してください：

このリポジトリをフォーク
フィーチャーブランチを作成 (git checkout -b feature/amazing-feature)
コミット (git commit -m 'Add amazing feature')
プッシュ (git push origin feature/amazing-feature)
プルリクエストを作成

📄 ライセンス

このプロジェクトはMITライセンスの下で公開されています。詳細は LICENSE ファイルを参照してください。

🆘 サポート

問題が発生した場合：

Issues で既存の問題を確認
新しいissueを作成
詳細な再現手順を含めて報告

🔗 関連リンク

Expo MCP Server で次世代のモバイル/Web開発体験を始めましょう！ 🚀✨

Expo MCP Server