mcpField
E
expo-expert

expo-expert

github.com/raintree-technology開発59 回インストール
リポジトリ

expo-expert について

expo-expert は、Development Build、ネイティブモジュール、EAS を使った Expo／React Native アプリ開発の参考スキルです。ルーティングやローカル永続化からビルド、提出、OTA 更新まで扱う開発者を対象としています。

主な機能

  1. 01Development Build ワークフローの案内
  2. 02Swift と Kotlin のネイティブモジュール例
  3. 03EAS Build、Submit、Update の案内
  4. 04Expo Router のファイルベースルーティング
  5. 05SQLite とファイルシステムでの永続化
  6. 06トラブルシューティングと避けるべきパターン

活用シーン

  1. 01カスタムネイティブ開発ビルドの設定
  2. 02Expo Modules SDK によるネイティブモジュール作成
  3. 03モバイルアプリのビルドと OTA 更新の管理
  4. 04ローカルストレージとルーティング方式の選定

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/raintree-technology/claude-starter --skill expo-expert

インストール後、Claude Code で/expo-expertを入力して読み込まれたか確認します。

詳細

スキル：Expo エキスパート（スタンダード 2026）

役割： Expo エキスパートは、最新のスケーラブルなモバイルインフラストラクチャーの設計者です。2026 年、Expo は完全に開発ビルドのパラダイムへ移行し、「Ejecting」は不要になりました。このスキルでは、Expo Modules SDK と EAS（Expo Application Services）に注目し、マネージドに近いワークフローを保ちながらネイティブ機能を活用します。

🎯 主な目標

  1. 最新ワークフローの習得： Expo のエコシステムを離れることなく、カスタムネイティブコードを実装するために expo-dev-client を活用します。
  2. ネイティブモジュールの開発： Expo Modules SDK（Swift/Kotlin）を使用して、高性能なネイティブブリッジを作成します。
  3. EAS のオーケストレーション： EAS Build、Submit、Update（OTA）を使用して CI/CD パイプラインを管理します。
  4. ローカルインテリジェンス： Expo SQLite とネイティブファイルシステム管理を使用して、永続ストレージを実装します。

🏗️ 2026 年の Expo ツールベルト

1. コアサービス
  • Expo SDK 55： React Native の新アーキテクチャが必須です。
  • Expo Router 4+： 静的型付けと自動ディープリンクに対応したファイルベースのルーティングです。
  • EAS Build： iOS と Android 向けのクラウドベースのバイナリ生成です。
2. 専門 SDK
  • Expo Modules SDK： 最新のネイティブモジュールを作成するための標準です。
  • Expo Image： blurhash に対応した高忠実度の画像読み込みです。
  • Expo SQLite： localStorage API を完全にサポートするローカルデータベースです。

🛠️ 実装パターン

1. Expo モジュール（Swift/Kotlin）

2026 年のネイティブコードの記述には、従来のブリッジよりも安全で高速な「DSL」アプローチを使用します。

// ios/MyModule.swift
import ExpoModulesCore

public class MyModule: Module {
  public function definition() -> ModuleDefinition {
    Name("MyModule")
    Function("hello") { (name: String) -> String in
      return "Hello \(name) from Native!"
    }
  }
}
2. Expo Router（ファイルベースのナビゲーション）

ファイルシステムに基づいてルートを自動生成します。

// app/user/[id].tsx
import { useLocalSearchParams } from 'expo-router';

export default function UserPage() {
  const { id } = useLocalSearchParams();
  return <Text>User ID: {id}</Text>;
}
3. EAS Update（OTA）

App Store の審査を受けずに、重大なバグ修正を数分でデプロイします。

eas update --branch production --message "Fix: Hydration error in Checkout"

🚫 「禁止事項」（アンチパターン）

  1. 絶対に「Eject」しないでください（npx expo prebuild は問題ありませんが、厳密に必要な場合を除き、ios/android フォルダーをコミットしないでください）。
  2. ユースケースに Expo Router が適している場合、react-native-navigation は絶対に使用しないでください。
  3. AsyncStorage に大きなデータを絶対に保存しないでください。Expo SQLite または File System を使用してください。
  4. app.json の設定で重い処理を絶対に行わないでください。複雑なネイティブ変更には Config Plugins を使用してください。

🛠️ トラブルシューティングとインフラストラクチャー

問題考えられる原因2026 年の適切な対処方法
ネイティブモジュールが見つからないGo/Prebuilt Expo Go を使用しているeas build --profile development を使用して開発ビルドを作成します。
ビルド失敗（EAS）ライブラリに Config Plugin が不足しているapp.json の plugins を確認し、デバッグのためにローカルで npx expo prebuild を実行します。
古い OTA アップデートアップデートマニフェストでのキャッシュexpo-updates API を使用して、アプリ起動時に再確認を強制します。
Android のエッジツーエッジ表示システム UI が SDK 55 と互換性がないexpo-system-ui を使用して、ステータスバーの動作を一貫させます。

📚 参考資料

📊 品質指標

  • ビルド成功率： EAS で > 95%。
  • OTA 成功率： > 99%。
  • ネイティブクラッシュ率： < 0.1%。

🔄 SDK 48 から 55 への進化

  • SDK 50： Dev Client がデフォルトで導入されました。
  • SDK 52： Expo Router が標準になりました。
  • SDK 54： iOS 用の RN が事前コンパイルされ、「Liquid Glass」に対応しました。
  • SDK 55： 新アーキテクチャが必須になり、予測型戻るジェスチャーに対応しました。

Expo エキスパート スタンダード終了（v1.1.0）

コメント

Markdown 対応