Need
モバイルフレームワーク
Default options
Why it's needed
Expo は、迅速なイテレーション、互換性のあるパッケージ、デプロイツールを備えた、マネージドな React Native 開発フローを Codex に提供します。
Codex use case
Expo による React Native アプリ構築
専用プラグインを使い、モバイルアプリのアイデアを動作する Expo アプリに仕上げます。
Difficulty 中級
Time horizon 1時間
Expo プラグインと Codex を使って React Native アプリのひな型を作成し、Expo Router と Expo 標準のパッケージ規約に従いながら、Expo Go ですばやくテストします。開発クライアントや EAS ビルドへ移行するのは、アプリで必要になった場合だけです。
最適な用途
- ネイティブ IDE のワークフローに移る前に、Expo を使って React Native アプリのプロトタイプ作成やリリースを行いたい開発者。
- ルーティング、UI、パッケージのインストール、ビルド、デプロイで、Codex が Expo の規約に従う必要がある Expo Router プロジェクト。
- Web アプリをモバイルアプリに移行する必要がある開発者。
Contents
Expo による React Native アプリ構築
専用プラグインを使い、モバイルアプリのアイデアを動作する Expo アプリに仕上げます。
Expo プラグインと Codex を使って React Native アプリのひな型を作成し、Expo Router と Expo 標準のパッケージ規約に従いながら、Expo Go ですばやくテストします。開発クライアントや EAS ビルドへ移行するのは、アプリで必要になった場合だけです。
中級
1時間
Expo プラグインと Codex を使って React Native アプリのひな型を作成し、Expo Router と Expo 標準のパッケージ規約に従いながら、Expo Go ですばやくテストします。開発クライアントや EAS ビルドへ移行するのは、アプリで必要になった場合だけです。
中級
1時間
最適な用途
- ネイティブ IDE のワークフローに移る前に、Expo を使って React Native アプリのプロトタイプ作成やリリースを行いたい開発者。
- ルーティング、UI、パッケージのインストール、ビルド、デプロイで、Codex が Expo の規約に従う必要がある Expo Router プロジェクト。
- Web アプリをモバイルアプリに移行する必要がある開発者。
スキルとプラグイン
- Expo が提供するスキルを使って、Expo Router の UI、ネイティブアプリらしいコンポーネント、データ取得、開発クライアント、デプロイ、アップグレード、モジュール、Codex Run アクションの連携設定に対応します。
| Skill | Why use it |
|---|---|
| Expo | Expo が提供するスキルを使って、Expo Router の UI、ネイティブアプリらしいコンポーネント、データ取得、開発クライアント、デプロイ、アップグレード、モジュール、Codex Run アクションの連携設定に対応します。 |
開始用プロンプト
Expo プラグインを使い、このアイデアを基に Expo で React Native アプリを構築してください：
[describe the app idea, target users, and the main workflow]
要件：
- Expo Router と Expo 標準のプロジェクト規約から始める
- カスタムビルドを作成する前に、まず `npx expo start` と Expo Go を試す
- Expo パッケージには `npx expo install` を使い、依存関係の互換性を維持する
- ナビゲーション、フォーム、リスト、空の状態、読み込み状態には、ネイティブアプリらしい UI パターンを使う
成果物：
- 動作するアプリの機能一式
- 実行コマンド
- Expo Go、実機、シミュレーター、開発クライアント、EAS のいずれを使ったかを含む、使用した検証手順
Expo プラグインを使い、このアイデアを基に Expo で React Native アプリを構築してください：
[describe the app idea, target users, and the main workflow]
要件：
- Expo Router と Expo 標準のプロジェクト規約から始める
- カスタムビルドを作成する前に、まず `npx expo start` と Expo Go を試す
- Expo パッケージには `npx expo install` を使い、依存関係の互換性を維持する
- ナビゲーション、フォーム、リスト、空の状態、読み込み状態には、ネイティブアプリらしい UI パターンを使う
成果物：
- 動作するアプリの機能一式
- 実行コマンド
- Expo Go、実機、シミュレーター、開発クライアント、EAS のいずれを使ったかを含む、使用した検証手順
まずは Expo Go
Codex でモバイルアプリのアイデアを
テスト済みの React Native アプリに仕上げたい場合は、Expo が有力な第一候補です。まず expo start を実行し、次に Expo Go
を実機で使います。その後は、アプリに必要なのが
カスタムネイティブコード、ストア配布、または Expo Go では実行できない機能である場合に限り、開発クライアントまたは EAS ビルドに移行します。
この進め方なら、Codex は初回からアプリのワークフローに集中でき、 ネイティブ IDE やシミュレーターのセットアップ、プロビジョニング、ビルド構成に時間を費やさずに済みます。
Expo プラグインの利用
Expo は Expo プラグイン を公開しました。このプラグインは、Expo Router、ネイティブ UI、フォーム、 ナビゲーション、アニメーション、データ取得、NativeWind のセットアップ、Expo モジュール、開発 クライアント、デプロイ、アップグレード、Codex Run アクションの連携設定について、Expo に即したガイダンスを Codex に提供します。
このプラグインは、Codex による新しい Expo 画面の作成、パッケージの追加、API 呼び出しの組み込み、開発クライアントの準備、または TestFlight、App Store、Play Store、EAS Hosting 向けのアプリの準備に使用します。
タスクで最新の Expo ドキュメントの検索、互換性のあるパッケージのインストール、EAS のビルドおよび ワークフロー操作、スクリーンショットの取得、シミュレーターの操作、React Native DevTools、 TestFlight データが必要な場合は、必要に応じて Expo MCP サーバー を追加します。
イテレーションの流れ
- リポジトリを調べ、新規の Expo アプリか 既存の Expo プロジェクトかを確認するよう、Codex に依頼します。
- Expo Router と Expo Go から始め、
npx expo installを使用して Expo パッケージを追加します。 - Codex に、ネイティブアプリらしいナビゲーション、 読み込み状態、空の状態、エラー状態を備えた 1 つの完全なワークフローを構築するよう依頼します。
- 実機上の Expo Go や シミュレーターなど、利用できる最速の方法で検証し、必要な場合にのみ開発クライアントまたは EAS に移行します。
おすすめのフォローアッププロンプト
Expo プラグインを使い、次の [feature/screen/flow] をこのアプリに追加してください：
[describe one feature, screen or user flow]
制約：
- ルーティング層には Expo Router を引き続き使用する
- パッケージのインストールは Expo と互換性のある方法で行う
- まず Expo Go でテストする
- この機能で必要な場合にのみ、開発クライアントまたは EAS に移行する
実装後、実際に使用した正確な実行手順と、検証した内容を教えてください。
Tech stack
Need
Default options
Why it's needed
Need
ルーティング
Default options
Why it's needed
Expo Router なら、ナビゲーションをファイルベースで予測しやすい状態に保てるため、Codex は独自のルーティング層を設けることなく画面やフローを追加できます。
| Need | Default options | Why it's needed |
|---|---|---|
| モバイルフレームワーク | Expo と React Native | Expo は、迅速なイテレーション、互換性のあるパッケージ、デプロイツールを備えた、マネージドな React Native 開発フローを Codex に提供します。 |
| ルーティング | Expo Router | Expo Router なら、ナビゲーションをファイルベースで予測しやすい状態に保てるため、Codex は独自のルーティング層を設けることなく画面やフローを追加できます。 |
