Expo本番運用ガイド2026：Expo Router・CNG・EAS・OTA更新を実コードで解説

// app.config.ts — アプリの「宣言的な唯一の真実」
import type { ExpoConfig } from 'expo/config';

export default (): ExpoConfig => ({
  name: 'Scorebook',
  slug: 'scorebook',
  scheme: 'scorebook', // ディープリンク・OAuthリダイレクトの基点
  version: '1.4.0',
  orientation: 'portrait',
  newArchEnabled: true, // SDK 56では既定。明示しておくと意図が伝わる
  ios: { bundleIdentifier: 'com.example.scorebook', supportsTablet: true },
  android: { package: 'com.example.scorebook', edgeToEdgeEnabled: true },
  plugins: [
    'expo-router',
    'expo-secure-store',
    ['expo-build-properties', { ios: { deploymentTarget: '15.1' } }],
  ],
  experiments: { typedRoutes: true }, // §2で使う型安全ルーティング
});

app/
├─ _layout.tsx          # ルートレイアウト（全画面の親）
├─ index.tsx            # "/" 画面
├─ (tabs)/              # () = URLに出ないグループ化フォルダ
│  ├─ _layout.tsx       # タブバーの定義
│  ├─ index.tsx         # "/" タブ（ホーム）
│  └─ games.tsx         # "/games" タブ
├─ games/
│  └─ [gameId].tsx      # "/games/:gameId" 動的ルート
├─ +not-found.tsx       # 404画面
└─ api/
   └─ health+api.ts     # "/api/health" APIルート（サーバー）

// app/_layout.tsx
import { Stack } from 'expo-router';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { useReactQueryDevTools } from '@dev-plugins/react-query';

const queryClient = new QueryClient();

export default function RootLayout() {
  useReactQueryDevTools(queryClient);
  return (
    <QueryClientProvider client={queryClient}>
      <Stack screenOptions={{ headerShown: false }}>
        {/* (tabs) グループはタブ自身がヘッダを持つので隠す */}
        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
        <Stack.Screen
          name="games/[gameId]"
          options={{ presentation: 'modal', title: '試合詳細' }}
        />
      </Stack>
    </QueryClientProvider>
  );
}

// app/(tabs)/_layout.tsx
import { Tabs } from 'expo-router';
import { Home, ListChecks } from 'lucide-react-native';

export default function TabLayout() {
  return (
    <Tabs screenOptions={{ tabBarActiveTintColor: '#2563eb' }}>
      <Tabs.Screen
        name="index"
        options={{
          title: 'ホーム',
          // a11y: スクリーンリーダ向けにアイコンの意味を言語化
          tabBarIcon: ({ color, size }) => <Home color={color} size={size} />,
          tabBarAccessibilityLabel: 'ホームタブ',
        }}
      />
      <Tabs.Screen
        name="games"
        options={{
          title: '試合',
          tabBarIcon: ({ color, size }) => <ListChecks color={color} size={size} />,
          tabBarAccessibilityLabel: '試合一覧タブ',
        }}
      />
    </Tabs>
  );
}

// app/games/[gameId].tsx
import { useLocalSearchParams, Link, router } from 'expo-router';
import { View, Text, Pressable } from 'react-native';

export default function GameScreen() {
  // 型引数で params の型を固定。境界で型を絞るのが鉄則
  const { gameId } = useLocalSearchParams<{ gameId: string }>();

  return (
    <View>
      <Text accessibilityRole="header">試合 #{gameId}</Text>

      {/* 宣言的遷移：typedRoutesにより存在しないパスは型エラー */}
      <Link href={`/games/${gameId}/score`} accessibilityRole="link">
        スコア入力へ
      </Link>

      {/* 命令的遷移：イベントハンドラ内ではこちら */}
      <Pressable
        accessibilityRole="button"
        accessibilityLabel="一覧に戻る"
        onPress={() => router.back()}
      >
        <Text>戻る</Text>
      </Pressable>
    </View>
  );
}

// app/api/health+api.ts
export function GET(request: Request) {
  return Response.json({ ok: true, ts: Date.now() });
}

// app/api/notify+api.ts — クライアントに鍵を出さずサーバーで処理
export async function POST(request: Request) {
  const body = await request.json();
  // process.env.* はサーバー側でのみ参照可能（バンドルに埋まらない）
  const res = await fetch('https://api.example.com/push', {
    method: 'POST',
    headers: { Authorization: `Bearer ${process.env.PUSH_API_KEY}` },
    body: JSON.stringify(body),
  });
  return Response.json({ delivered: res.ok }, { status: res.ok ? 200 : 502 });
}

// app.config.ts（抜粋）
plugins: [
  [
    'expo-build-properties',
    {
      ios: { deploymentTarget: '15.1', useFrameworks: 'static' },
      android: { compileSdkVersion: 35, minSdkVersion: 24 },
    },
  ],
  [
    'expo-location',
    { locationWhenInUsePermission: '球場の位置から最寄りの試合を表示します。' },
  ],
],

// plugins/withClearTextDisabled.ts
// 目的：Androidの平文HTTP通信を本番で禁止する（セキュリティ既定の堅牢化）
import { type ConfigPlugin, withAndroidManifest } from 'expo/config-plugins';

const withClearTextDisabled: ConfigPlugin = (config) =>
  withAndroidManifest(config, (cfg) => {
    const app = cfg.modResults.manifest.application?.[0];
    if (app?.$) {
      app.$['android:usesCleartextTraffic'] = 'false';
    }
    return cfg;
  });

export default withClearTextDisabled;

// app.config.ts で読み込む
import withClearTextDisabled from './plugins/withClearTextDisabled';
// plugins 配列に: ...(他のplugin), './plugins/withClearTextDisabled.ts'
// もしくは関数を直接 import して plugins: [withClearTextDisabled]

// eas.json
{
  "cli": { "version": ">= 16.0.0", "appVersionSource": "remote" },
  "build": {
    // 開発：実機で動くdev client（Fast Refresh付き）
    "development": {
      "developmentClient": true,
      "distribution": "internal"
    },
    // 社内配布：ストアを通さずQA・関係者に配る
    "preview": {
      "distribution": "internal",
      "channel": "preview"          // ← §5のOTAチャンネルと対応
    },
    // 本番：ストア提出用。ビルド番号を自動インクリメント
    "production": {
      "channel": "production",
      "autoIncrement": true
    }
  },
  "submit": { "production": {} }
}

# 開発ビルド（一度入れれば、以降のJS変更はMetroから即反映）
eas build --profile development --platform ios

# 社内配布（QRやリンクでインストール）
eas build --profile preview --platform all

# 本番ビルド → そのままストア提出
eas build --profile production --platform all
eas submit --profile production --platform ios

✅ OTAで配信できる（= JSバンドルとアセット）
   ・Reactコンポーネント / 画面ロジックの変更
   ・文言・スタイルの修正、画像差し替え
   ・JSだけで完結するバグfix

❌ OTAで配信できない（= 新しいネイティブビルドが必須）
   ・新しいネイティブモジュールの追加（例：expo-camera を新規導入）
   ・Expo SDK のアップグレード
   ・app.config.ts のネイティブに影響する変更（権限・scheme等）

// app.config.ts（抜粋）
export default (): ExpoConfig => ({
  // ...
  runtimeVersion: { policy: 'fingerprint' }, // ★推奨
  updates: { url: 'https://u.expo.dev/<your-project-id>' },
});

# preview ビルド群へ更新を配信（QA確認用）
eas update --channel preview --message "スコア表示の桁ズレ修正"

# 本番へ配信
eas update --channel production --message "hotfix: 打順入力のクラッシュ修正"

# 不正な更新を無効化し、直前の正常版へ戻す
eas update:rollback --channel production

// 起動時に最新更新を取りに行く（既定はバックグラウンド取得→次回起動で反映）
import * as Updates from 'expo-updates';

export async function syncUpdates() {
  if (__DEV__) return; // 開発中はスキップ
  try {
    const result = await Updates.checkForUpdateAsync();
    if (result.isAvailable) {
      await Updates.fetchUpdateAsync();
      await Updates.reloadAsync(); // 重要更新は即時適用
    }
  } catch (e) {
    // 失敗を黙殺しない：監視基盤へ送る（Sentry等）
    reportError('eas-update-sync-failed', e);
  }
}

# .eas/workflows/deploy-preview.yml
name: Deploy Preview on merge
on:
  push:
    branches: ['main']
jobs:
  publish_preview_update:
    name: Publish OTA to preview
    type: update
    params:
      channel: preview
      message: 'auto: merged to main'

# .eas/workflows/release.yml — タグで本番ビルド＆提出
name: Production release
on:
  push:
    tags: ['v*']
jobs:
  build:
    type: build
    params: { platform: all, profile: production }
  submit:
    needs: [build]
    type: submit
    params: { platform: all, profile: production }

import * as SecureStore from 'expo-secure-store';

// OSの安全領域に保存（端末暗号化ストレージ）
await SecureStore.setItemAsync('session_token', token, {
  keychainAccessible: SecureStore.WHEN_UNLOCKED_THIS_DEVICE_ONLY,
});
const token = await SecureStore.getItemAsync('session_token');