Expo SDK 52 - React Native開発の標準化

Expo SDK 52の位置づけ

Expoは2016年に登場したReact Native向けフレームワークで、ネイティブビルド環境なしでモバイルアプリを開発できる点が特徴です。2026年4月時点で、npm週間ダウンロード数は850万回(npm trends)を記録し、React Nativeエコシステムの事実上の標準となっています。

Expo SDK 52は2024年11月にリリースされ、2026年4月時点で最も安定したバージョンです。React 19やReact Compilerと連携し、React Native開発体験を大幅に向上させています。Flutter 4が独自エコシステムを構築する一方、ExpoはWebとモバイルの技術スタック統一を重視しています。

EAS(Expo Application Services)の進化

EAS Buildの改善点

EAS BuildはクラウドベースのCI/CDサービスで、ローカルにXcodeやAndroid Studioがなくてもビルド可能です。SDK 52では以下が強化されました。

// eas.json - EAS Build設定例
{
  "build": {
    "production": {
      "ios": {
        "resourceClass": "m-medium", // M4最適化インスタンス
        "distribution": "store",
        "credentialsSource": "auto"
      },
      "android": {
        "buildType": "apk",
        "gradleCommand": ":app:assembleRelease"
      }
    },
    "development": {
      "developmentClient": true,
      "distribution": "internal",
      "ios": {
        "simulator": true
      }
    }
  }
}

EAS Updateによるオーバーザエアー配信

EAS UpdateはJavaScriptバンドルのみを更新し、App Store審査なしで即座にデプロイできる機能です。SDK 52では以下が改善されました。

// app.json - EAS Update設定
{
  "expo": {
    "name": "MyApp",
    "slug": "my-app",
    "version": "1.0.0",
    "runtimeVersion": {
      "policy": "appVersion" // appVersionと一致する端末のみ更新
    },
    "updates": {
      "url": "https://u.expo.dev/your-project-id",
      "enabled": true,
      "fallbackToCacheTimeout": 3000,
      "checkAutomatically": "ON_LOAD"
    }
  }
}

実測では、1MBのJSバンドル更新が平均2.3秒で完了し、ユーザーは次回起動時に新バージョンを使用できます(Expo公式ベンチマーク、2026年1月)。

# EAS Updateのデプロイ
eas update --branch production --message "Fix critical bug"

# チャンネル別配信(A/Bテスト)
eas update --branch beta --message "New feature test"

Expo Routerの革新

ファイルベースルーティング

Expo Router(v3.5)はNext.jsスタイルのファイルベースルーティングをReact Nativeで実現します。

app/ ディレクトリ構成:

• _layout.tsx (ルートレイアウト)
• (tabs)/ (タブナビゲーショングループ)
  • _layout.tsx
  • index.tsx (/tabs/)
  • profile.tsx (/tabs/profile)
• [id].tsx (動的ルート /123)
• modal.tsx (モーダル表示)

// 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>
  );
}

// app/[id].tsx - 型安全な動的ルート
import { useLocalSearchParams } from 'expo-router';

export default function DetailScreen() {
  // 型推論される
  const { id } = useLocalSearchParams<{ id: string }>();

  return <Text>Detail for item {id}</Text>;
}

型安全なナビゲーション

// hooks/useTypedNavigation.ts
import { useRouter } from 'expo-router';

export function useTypedRouter() {
  const router = useRouter();

  return {
    ...router,
    // 型安全なpush
    pushProfile: (userId: string) => router.push(`/profile/${userId}`),
    pushSettings: () => router.push('/settings'),
  };
}

Next.js 16のApp Routerと同じ思想で、ルーティングロジックがファイルシステムに反映されるため、コードレビューが容易になります。

React Native 0.77とNew Architecture

Fabricレンダラの完全統合

React Native 0.77ではFabric(新UIレンダラ)が標準となり、同期レンダリングによるフレームドロップが解消されました。

※ iPhone 15 Pro、中規模アプリでの実測(React Native公式ブログ、2025年12月)

// app.json - New Architecture有効化
{
  "expo": {
    "plugins": [
      [
        "expo-build-properties",
        {
          "ios": {
            "newArchEnabled": true
          },
          "android": {
            "newArchEnabled": true
          }
        }
      ]
    ]
  }
}

TurboModulesで非同期処理が高速化

TurboModulesはネイティブモジュールの新実装で、遅延ロードにより起動時間を短縮します。

// 従来のNative Modules
import { NativeModules } from 'react-native';
const { MyModule } = NativeModules; // 起動時に全モジュールロード

// TurboModules
import { TurboModuleRegistry } from 'react-native';
const MyModule = TurboModuleRegistry.get('MyModule'); // 使用時のみロード

実測では、TurboModules採用アプリは起動時間が平均45%短縮されました(Expo公式ベンチマーク)。

Custom Development Clientの実用性

従来のExpo Goの制限

Expo Goは事前ビルド済みアプリで開発できますが、カスタムネイティブコードを含められません。Custom Development ClientはこれをCLI一発で解決します。

# Development Clientビルド
npx expo run:ios --device

# 自動的に以下を実行:
# 1. CocoaPods install
# 2. Xcodeプロジェクト生成
# 3. デバイスへインストール

// package.json - カスタムネイティブライブラリ使用例
{
  "dependencies": {
    "expo": "~52.0.0",
    "expo-camera": "~15.0.0",      // カメラAPI
    "expo-location": "~18.0.0",    // 位置情報
    "react-native-vision-camera": "^4.0.0" // サードパーティライブラリ
  }
}

Config Pluginsによる自動ネイティブ設定

Config Pluginsはネイティブコードの変更をJavaScript/TypeScriptで記述できる仕組みです。

// app.config.ts
import { ExpoConfig, ConfigContext } from 'expo/config';

export default ({ config }: ConfigContext): ExpoConfig => ({
  ...config,
  name: 'MyApp',
  slug: 'my-app',
  plugins: [
    [
      'expo-camera',
      {
        cameraPermission: 'Allow $(PRODUCT_NAME) to access camera for QR scanning',
      },
    ],
    [
      'expo-location',
      {
        locationAlwaysAndWhenInUsePermission: 'Allow location for delivery tracking',
      },
    ],
    // カスタムプラグイン
    './plugins/withCustomFont.ts',
  ],
});

// plugins/withCustomFont.ts
import { ConfigPlugin, withDangerousMod } from '@expo/config-plugins';
import fs from 'fs';
import path from 'path';

const withCustomFont: ConfigPlugin = (config) => {
  return withDangerousMod(config, [
    'ios',
    async (config) => {
      const fontsDir = path.join(config.modRequest.platformProjectRoot, 'Fonts');
      if (!fs.existsSync(fontsDir)) {
        fs.mkdirSync(fontsDir);
      }
      // カスタムフォントをコピー
      fs.copyFileSync('./assets/fonts/CustomFont.ttf', path.join(fontsDir, 'CustomFont.ttf'));
      return config;
    },
  ]);
};

export default withCustomFont;

本番採用事例

大規模サービスでの採用例

2026年4月時点で、以下の企業がExpo SDK 52を本番採用しています。

• Coinbase(暗号資産取引所): iOS/Androidで月間アクティブユーザー1500万人
• Kraken(暗号資産取引所): EAS Updateで週次デプロイを実現
• Brex(法人向けクレジットカード): Expo RouterでWeb/Mobileを統一
• Th3rdwave(フィンテック): TurboModulesで起動時間を2秒から0.8秒に短縮

// Coinbase採用パターン(公開情報から再構成)
// app/_layout.tsx
import { Stack } from 'expo-router';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

export default function RootLayout() {
  return (
    <QueryClientProvider client={queryClient}>
      <Stack screenOptions={{ headerShown: false }}>
        <Stack.Screen name="(tabs)" />
        <Stack.Screen name="trade/[pair]" options={{ presentation: 'modal' }} />
      </Stack>
    </QueryClientProvider>
  );
}

TanStack Queryとの組み合わせが2026年のベストプラクティスです。

中小企業での活用例

// 小規模SaaS向けシンプル構成
// app.json
{
  "expo": {
    "name": "SmallBizApp",
    "slug": "small-biz-app",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "userInterfaceStyle": "automatic",
    "plugins": [
      "expo-router",
      "expo-secure-store", // トークン保存
      "expo-notifications" // プッシュ通知
    ],
    "extra": {
      "eas": {
        "projectId": "your-project-id"
      }
    }
  }
}

パフォーマンス最適化戦略

Hermes JavaScriptエンジン

React Native 0.77ではHermesがデフォルトで有効化され、起動時間が30%短縮されています。

// app.json
{
  "expo": {
    "jsEngine": "hermes" // デフォルトで有効
  }
}

※ Android中規模アプリでの実測(React Native公式)

React Native Performance Monitor

# パフォーマンス計測
npx expo start --dev-client

# デバッグメニュー -> "Perf Monitor"
# 表示される指標:
# - JS Thread FPS
# - UI Thread FPS
# - Bridge Traffic

React Native vs Flutter比較

Flutter 4との主な違いを整理します。

CI/CDパイプライン例

GitHub Actionsとの統合

# .github/workflows/eas-build.yml
name: EAS Build

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
      
      - name: Setup Expo
        uses: expo/expo-github-action@v8
        with:
          expo-version: latest
          eas-version: latest
          token: ${{ secrets.EXPO_TOKEN }}
      
      - run: npm ci
      
      - name: Run Tests
        run: npm test -- --coverage
      
      - name: EAS Build (iOS)
        run: eas build --platform ios --profile production --non-interactive
      
      - name: EAS Build (Android)
        run: eas build --platform android --profile production --non-interactive
      
      - name: EAS Submit
        run: |
          eas submit --platform ios --latest
          eas submit --platform android --latest

Bitrise統合

# bitrise.yml
workflows:
  primary:
    steps:
      - git-clone@8: {}
      - npm@1:
          inputs:
            - command: ci
      - script@1:
          title: EAS Build
          inputs:
            - content: |
                #!/bin/bash
                npx eas-cli build --platform all --profile production

セキュリティとコンプライアンス

環境変数の安全な管理

# .env.production
API_URL=https://api.example.com
API_KEY=your-secret-key

# EAS Secretsに登録
eas secret:create --scope project --name API_KEY --value your-secret-key

// app.config.ts
export default {
  extra: {
    apiUrl: process.env.API_URL,
    // API_KEYはEAS Secretsから注入される
  },
};

// Constants.expoConfig経由でアクセス
import Constants from 'expo-constants';

const API_URL = Constants.expoConfig?.extra?.apiUrl;

今後の展望

Expo公式ロードマップ(2026年4月版)では以下が予定されています。

• SDK 53(2026年Q3): React Native 0.78対応、Static Hermes最適化
• Expo Router v4(2026年Q3): Server Componentsサポート(実験的)
• EAS Insights(ベータ): リアルタイムクラッシュレポート・パフォーマンス監視
• Expo Orbit改善: デバイス管理UIの刷新

React Server Componentsのモバイル対応は2026年後半から実験が始まる見込みです。

よくある質問

Expo Goでできないことは何ですか?
Expo Goはカスタムネイティブコード(Swift/Kotlin)を実行できません。サードパーティのネイティブライブラリ(例: react-native-ble-plx)を使う場合は、Custom Development Clientが必要です。

EAS Buildは無料で使えますか?
無料枠は月30ビルドまでです。優先キュー・M4最適化・無制限ビルドが必要な場合はPriority Plan($99/月)またはEnterprise Plan(要問い合わせ)が必要です。

既存のReact Nativeアプリに後から導入できますか?
可能です。npx install-expo-modulesでExpo Modulesを既存プロジェクトに追加できます。ただしExpo Routerへの移行はルーティングロジックの全面書き換えが必要です。

Webアプリも同じコードで作れますか?
Expo RouterはWeb対応していますが、プラットフォーム固有のUIコンポーネント(例: FlatList)はWebではreact-native-webによる代替実装になります。完全な共通化は困難で、80〜90%の共有率が現実的です。Next.js 16との使い分けを推奨します。

まとめ

Expo SDK 52は2026年時点でReact Native開発の事実上の標準となり、開発体験を大幅に向上させました。以下のポイントを再確認します。

• EAS Build/UpdateでCI/CDが完全自動化、App Store審査不要の即時デプロイ
• Expo Routerの型安全なファイルベースルーティングでコード品質向上
• New Architecture対応でアプリ起動時間45%短縮、60FPS維持
• Config Pluginsでネイティブ設定をコード化、再現性確保

Web開発者がモバイルアプリを構築する場合、2026年時点でExpo SDK 52が最も学習コストが低く、エコシステムも成熟しています。Swift 6やFlutter 4と比較検討し、チームのスキルセットに合った選択を推奨します。

参考リソース

• Expo公式ドキュメント - APIリファレンスと移行ガイド
• EAS Services - Build/Update/Submitの詳細
• Expo Router Documentation - ルーティングガイド
• React Native Directory - 互換ライブラリ検索