Need
モバイル開発フレームワーク
Default options
Why it's needed
Expo が管理する React Native 開発環境では、Codex が変更と動作確認をすばやく繰り返せます。互換性のあるパッケージやデプロイ用のツールも利用できます。
Codex use case
Expo を使った React Native アプリ開発
専用プラグインを使えば、モバイルアプリのアイデアを実際に動く Expo アプリにできます。
Difficulty Intermediate
Time horizon 1h
Codex と Expo プラグインで React Native アプリのひな形を作り、Expo Router のルーティング規約と Expo のパッケージ管理規約に沿って開発します。Expo Go で手早く動作を確認し、開発クライアントや EAS ビルドには、アプリに必要になった段階で移行します。
Best for
- ネイティブ開発用の IDE を使う前に、Expo で React Native アプリを試作またはリリースしたい開発者
- Codex でルーティング、UI の実装、パッケージのインストール、ビルド、デプロイを Expo の規約に沿って進めたい Expo Router プロジェクト
- ウェブアプリをモバイルアプリに移行する必要がある開発者
Contents
Expo を使った React Native アプリ開発
専用プラグインを使えば、モバイルアプリのアイデアを実際に動く Expo アプリにできます。
Codex と Expo プラグインで React Native アプリのひな形を作り、Expo Router のルーティング規約と Expo のパッケージ管理規約に沿って開発します。Expo Go で手早く動作を確認し、開発クライアントや EAS ビルドには、アプリに必要になった段階で移行します。
Intermediate
1h
Codex と Expo プラグインで React Native アプリのひな形を作り、Expo Router のルーティング規約と Expo のパッケージ管理規約に沿って開発します。Expo Go で手早く動作を確認し、開発クライアントや EAS ビルドには、アプリに必要になった段階で移行します。
Intermediate
1h
Related links
Best for
- ネイティブ開発用の IDE を使う前に、Expo で React Native アプリを試作またはリリースしたい開発者
- Codex でルーティング、UI の実装、パッケージのインストール、ビルド、デプロイを Expo の規約に沿って進めたい Expo Router プロジェクト
- ウェブアプリをモバイルアプリに移行する必要がある開発者
Skills & Plugins
- Expo チームが作成したスキルを使って、Expo Router での UI 構築、ネイティブアプリらしいコンポーネントの実装、データ取得、開発クライアントの設定、デプロイ、アップグレード、モジュール開発、Codex の Run アクションの設定ができます。
| Skill | Why use it |
|---|---|
| Expo | Expo チームが作成したスキルを使って、Expo Router での UI 構築、ネイティブアプリらしいコンポーネントの実装、データ取得、開発クライアントの設定、デプロイ、アップグレード、モジュール開発、Codex の Run アクションの設定ができます。 |
Starter prompt
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 Build に移行します。
この手順なら、Codex は開発の初期段階からアプリのワークフローに集中できます。ネイティブ開発用の IDE やシミュレーターのセットアップ、プロビジョニング、ビルド設定に最初から時間をかけずに済みます。
Expo プラグインの活用
Expo が公開している Expo プラグイン は、Expo での開発に即した指針を Codex に提供します。対象は Expo Router、ネイティブ UI、フォーム、ナビゲーション、アニメーション、データ取得、NativeWind の設定、Expo モジュール、開発クライアント、デプロイ、アップグレード、Codex の実行アクションとアプリの起動処理の連携です。
Codex で Expo アプリに新しい画面やパッケージを追加したり、API 呼び出しを組み込んだり、開発クライアントを準備したりする際に活用してください。TestFlight、App Store、Play Store、EAS Hosting での配信準備にも使えます。
最新の Expo ドキュメントの検索、互換性のあるパッケージのインストール、EAS でのビルドやワークフローの操作、スクリーンショットの撮影、シミュレーターの操作、React Native DevTools の利用、TestFlight のデータへのアクセスが必要な場合は、Expo MCP サーバー も追加できます。
開発と検証の手順
- Codex にリポジトリを調べて、新規の Expo アプリか既存の Expo プロジェクトかを確認するよう依頼します。
- まず Expo Router と Expo Go を使います。Expo パッケージを追加する際は
npx expo installを実行します。 - 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 は独自のルーティング層を実装せずに、画面や操作フローを追加できます。 |
