Codex CLIでモバイル開発｜React Native・Flutter実践

📚 この記事は「OpenAI Codex CLI 完全攻略シリーズ」の Episode 24 です。

モバイルアプリ開発は画面数が多く、プラットフォーム固有の対応も必要なため、工数がかかりがちな領域です。OpenAI Codex CLIを活用すれば、React Native・Flutterの開発速度を大幅に向上させることが可能です。

本記事では、Codex CLIの基礎を理解している方向けに、モバイルアプリ開発での実践的な活用法を解説します。

Codex CLIがモバイル開発に強い理由

マルチモーダル入力（スクリーンショット→コード化）

Codex CLIの大きな強みの一つがマルチモーダル入力のサポートです。スクリーンショットやデザインモックアップを入力として渡し、それに対応するコードを生成できます。

# デザインモックからReact Nativeコンポーネントを生成
codex "このスクリーンショットのUIをReact Nativeで実装してください" \
  --image ./designs/login-screen.png

これにより、デザイナーから受け取ったFigma画面のスクリーンショットをそのまま入力し、UIコンポーネントの初期実装を自動化できます。完璧なコードではないものの、手作業でゼロから書くのと比べて60〜70%の時間短縮が期待できます。

ローカルファースト設計とモバイルプロジェクトの相性

Codex CLIのサンドボックス実行は、モバイルプロジェクトのディレクトリ構造を安全に操作できるメリットがあります。

• ファイルの読み取り・変更がサンドボックス内で完結
• node_modulesやPodsディレクトリの不用意な変更を防止
• 生成されたコードのプレビュー→承認→適用のワークフロー

SES現場では顧客プロジェクトのコードを扱うため、サンドボックスによる安全性は特に重要です。

React Native開発でのCodex CLI活用

コンポーネント生成とリファクタリング

React Nativeのコンポーネント生成は、Codex CLIが最も威力を発揮する領域の一つです。

# カスタムButtonコンポーネントの生成
codex "React NativeでiOSとAndroid両対応のカスタムButtonコンポーネントを作成。
- primary, secondary, outlinedの3バリアント
- ローディング状態のサポート
- アクセシビリティ対応
- TypeScriptで型定義"

# 既存コンポーネントのリファクタリング
codex "src/components/UserProfile.tsxをReact Native Paper v5のコンポーネントに移行してください"

生成されたコンポーネントは自動的にプロジェクトの命名規則に合わせられるため、コードレビューの負荷も軽減されます。

ナビゲーション・状態管理のコード生成

React Navigationの設定やRedux/Zustandのストア設計も、Codex CLIで効率化できます。

# React Navigationのスタック構成を生成
codex "以下の画面構成でReact Navigation v7のスタックナビゲーションを設定:
- AuthStack: Login, Register, ForgotPassword
- MainStack: Home, Profile, Settings
- TabNavigator: Home, Search, Notifications, Profile
TypeScript + 型安全なナビゲーションpropsも定義"

React Nativeテストの自動化

テスト生成はCodex CLIの定番ユースケースです。

# コンポーネントテストの自動生成
codex "src/components/配下の全コンポーネントに対してJest + React Native Testing Libraryのテストを生成。
各コンポーネントに対して:
- レンダリングテスト
- ユーザーインタラクションテスト
- スナップショットテスト"

テスト自動化の詳細はCodex CLI高度なテクニックでも解説しています。

Flutter開発でのCodex CLI活用

Widgetツリーの生成とカスタマイズ

FlutterのWidget構造はネストが深くなりがちですが、Codex CLIなら自然言語で指示するだけで適切なWidgetツリーを生成できます。

# プロフィール画面のWidget生成
codex "Flutterで以下の仕様のプロフィール画面を作成:
- 上部: CircleAvatarでユーザー画像
- 中央: Card内にユーザー情報（名前・メール・電話）
- 下部: 設定メニューのListTile一覧
- Material 3デザイン準拠
- Riverpodで状態管理"

pubspec.yaml依存関係の管理

パッケージの追加や依存関係の整理もCodex CLIで効率化できます。

# 必要なパッケージの選定と追加
codex "このFlutterプロジェクトにHTTP通信、状態管理、ローカルストレージの機能を追加するために
必要なパッケージをpubspec.yamlに追加してください。
2026年時点で推奨されるパッケージを選定し、バージョン指定もしてください"

Dartファイルの自動生成パターン

Flutterの定型的なコードパターンは、Codex CLIで一括生成すると効率的です。

• Freezedモデル: JSONシリアライズ付きのイミュータブルデータクラス
• Riverpodプロバイダー: StateNotifier/AsyncNotifierのボイラープレート
• GoRouterルーティング: パス定義とガード設定

# APIレスポンスモデルの一括生成
codex "api/responses/ディレクトリのJSONサンプルを元に、
Freezed + json_serializableのDartモデルクラスを生成。
各モデルにfactory constructorとtoJsonを含めてください"

実践ワークフロー：アプリ開発の流れ

Step 1: UIデザインからコード生成

1. Figma/Sketchのデザインをスクリーンショットで取得
2. Codex CLIにスクリーンショットと仕様を入力
3. 生成されたコンポーネントを確認・修正
4. プロジェクトに統合

codex "添付のデザインに基づいて、商品一覧画面を実装してください。
- FlatList/ListViewでスクロール可能
- 商品カードにはサムネイル・タイトル・価格を表示
- プルリフレッシュ対応
- 無限スクロール対応" --image ./designs/product-list.png

Step 2: API連携の実装

codex "以下のOpenAPI仕様に基づいて、APIクライアントを実装:
- GET /products: 商品一覧取得
- GET /products/:id: 商品詳細取得
- POST /cart: カートに追加
エラーハンドリング、リトライ、キャッシュ機構も含めてください"

Step 3: テストとデバッグ

# 全画面のウィジェットテスト/コンポーネントテスト生成
codex "src/screens/配下の全画面に対するテストを生成。
モックデータとモックAPIクライアントも含めてください"

# エラーのデバッグ支援
codex "このエラーログを分析して修正してください: [エラーログを貼り付け]"

Codex CLI × モバイル開発のTips

プロンプト設計のコツ

モバイル開発でCodex CLIの精度を上げるためのプロンプト設計のポイントです。

1. フレームワークとバージョンを明示: 「React Native 0.75」「Flutter 3.22」等
2. 状態管理ライブラリを指定: 「Zustand使用」「Riverpod使用」等
3. デザインシステムを指定: 「Material 3準拠」「NativeBase使用」等
4. プラットフォーム差異を明記: 「iOS/Android両対応」「iOS固有の挙動に対応」等

プロンプト例（良い例）:

React Native 0.75 + TypeScript + Zustand + React Navigation v7の環境で、
設定画面（SettingsScreen）を実装してください。
- ダークモード切り替えトグル
- 言語選択（日本語/英語）
- プッシュ通知ON/OFF
- AsyncStorageで設定を永続化

VS Code拡張との併用

Codex CLIとVS Codeの拡張機能を組み合わせると、さらに効率が上がります。

• React Native Tools: デバッグ統合
• Flutter拡張機能: ホットリロード連携
• Codex CLI出力 → VS Codeプレビュー: 生成コードの即時確認

ターミナルでCodex CLIを実行しつつ、VS Codeでリアルタイムにプレビューするデュアルペイン作業が最も効率的です。

SES案件でのモバイル開発についてはReact案件の需要動向もあわせて参照してください。

まとめ

Codex CLIは、モバイルアプリ開発の生産性を大幅に向上させるツールです。

• スクリーンショットからのUI生成で、デザイン→実装のギャップを埋める
• React Native・Flutter両方でコンポーネント/Widget生成が高速化
• テスト自動生成でカバレッジ向上とリグレッション防止
• サンドボックス実行で安全にコード変更を試せる

モバイル開発は画面数の多さやプラットフォーム対応のため、AIツールの恩恵を最も受けやすい領域の一つです。まずは小さなコンポーネント生成から試して、Codex CLIをモバイル開発ワークフローに組み込んでいきましょう。