ソース

Shipping with Codex - YouTube

4つのセッション

挨拶
UIを作成
plans.mdの実行
レビュー

環境

Windows11
VSCode
GitHub Copilot (PRO)
使用モデル: GPT5-Codex

目的

GitHub Copilot で Codex を使った plans.md の使い方です。

GitHub Copilot のモデル選択でGPT5-Codexを選んでください。

アイデアからAIを使ったアプリ開発の流れ（自己管理型エージェント方式）

この流れは、AIが単にコードを生成するだけでなく、仕様決定から実行、記録、進捗管理までを一貫して担うプロセスです。

1. 構想と要件定義

（何を作るのかの決定）

アイデアの具体化：
- アイデアメモから作りたいものを考える: 漠然としたアイデアを、実現したい機能やユーザーの課題解決といった観点から明確にします。
- 要件定義書の作成（AI活用）: AIに具体的なゴール、主要機能、ターゲットユーザー、満たすべき制約を整理させ、要件定義書として具体化します。
全体の指示書作成:
- AIがプロジェクト全体を理解し、自己管理を進めるための「プロジェクト憲章」や「全体指示書」を作成します。これには、技術スタックの候補なども含めます。

2. 設計とタスク分割

（どうやって実現するのかの決定）

設計書の作成（AI活用）:
- 要件定義書に基づき、システム構成図、データモデル（ER図）、主要コンポーネントの設計、API仕様などを含む設計書をAIに作成させます。
個別プロンプトファイルの作成:
- 設計書に基づき、各コンポーネントや機能の実装に特化した個別プロンプトファイル（例：認証機能、データベース接続など）を作成します。これにより、AIへの指示が一貫し、再利用性が高まります。
タスクリストと計画の作成:
- plans.mdの作成: 設計書を元に、実装に必要なタスクリストと、その実行順序、見積もり時間、依存関係をAIにブレイクダウンさせ、plans.md（プロジェクト計画・進捗管理ファイル）を作成します。

3. 実装と継続的進捗管理

（計画に基づいた実行と記録）

実装の実行と進捗の継続的な更新:
- 実装の実行: AIが個別プロンプトファイルと plans.md に従い、コード生成とテストを繰り返し実行します。
- 進捗と記録の永続化: AIは実装タスクを完了するたびに、plans.mdに実行内容、完了日時、発生した課題（あれば）、次のステップなどを記録し、進捗を継続的に更新します。これは、AIの自己管理と記録の永続化の核となります。
実行中のベストプラクティス（監視）:
- AIは実装中、コーディング規約の遵守、セキュリティ上の懸念点、パフォーマンスなどのベストプラクティスを常に自己監視します。不備があれば即座に修正を試みます。

4. 検証とフィードバック

（品質保証と軌道修正）

レビュー用のプロンプトファイルの作成:
- 実装されたコードや設計に対して、品質基準、テストカバレッジ、コードレビューの観点を定めたレビュー用プロンプトファイルを作成します。
レビューの実行:
- レビュー GPT5-Codex（または高性能AI）の活用: 作成したレビュー用プロンプトファイルを使用し、別の高性能AI（レビュー専門）にコード、設計、ドキュメントのレビューを実行させます。
必要に応じた軌道修正:

レビュー結果や実行中に見つかった問題点に基づき、AIは要件定義、設計書、plans.md、またはコード自体の軌道修正（修正計画の立案と実行）を行います。

5. 成果の確定と報告

成果のコミットと報告:
- Commit（成果をGitへ）: 実装、テスト、レビュー、修正が完了した一連の成果を、plans.mdに記載された記録とともにGitリポジトリへコミットします。
- 報告書の自動作成: AIは、要件定義書、設計書、plans.mdの最終記録、最終コードを統合し、プロジェクトの最終報告書を自動生成します。

プロセスまとめ

ステップ	担当AIの役割	主な成果物
構想・要件定義	仕様策定、ゴール設定	要件定義書、全体の指示書
設計・タスク分割	構造設計、タスクの分解	設計書、個別プロンプトファイル、`plans.md`
実装・管理	コード生成、進捗記録、自己監視	コードベース、`plans.md`の継続的な更新
検証・レビュー	品質保証、問題発見	レビュー用プロンプト、レビュー結果、修正計画
成果確定	成果の統合、記録、報告	Gitコミット、最終報告書

GitHub Copilot でプロンプトファイルの作成方法

1. /saveコマンドのプロンプトファイルの新規作成方法

GitHub Copilotのチャット欄で
/save
コマンドを実行すると、現状のチャットの保存と、tools等を設定した新規promptファイルが作成できます。

※👆️new.prompt.md のファイル名は後から変更します。
保存先は *.prompt.mdファイルを保存する場所に設定されています。

2. 基本のプロンプトファイルの新規作成方法

👇️MCP出現以前の一世代前の通常のプロンプトファイルの作り方。

VSCodeでCtrl+Shift+pでコマンド入力欄を開く

👆️promptと入力

👆️チャット：プロンプトファイルの構成...を選択

👆️新しいファイルか、既存のプロンプトファイル科を選択

👆️場所を選択

👆️プロンプトファイルの名前を入力

👆️空のプロンプトファイルが作成できます。

	---
	mode: agent
	---
	Define the task to achieve, including specific requirements, constraints, and success criteria.

GitHub Copilot のチャット欄で
/[ファイル名]
で実行出来るようになります。

再現方法

0. アイデアメモから作りたいものを

Spec（仕様書を提示）

作業を開始する前に、アイデア出しを行い、要件定義書と設計書をAIと壁打ちして作成します 。これは、以降の計画策定のインプットとなります。

要件定義書
設計書
をAIを使って書く

1. copilot-instructions.md GitHub Copilotのアプリ全体の指示書

copilot-instructions.md

# プロジェクト情報

このプロジェクトは XXX を目的としたアプリケーションです。

## コーディング規約

- TypeScript strict モードを使用
- ESLint の警告は必ず解決
- すべての関数にJSDocコメントを追加
- テストカバレッジは80%以上を維持

## テストについて

実装後は必ず以下を実行してください：

	```bash
	npm test
	npm run lint
	```

## plans.md

コードを書く際は必ず plans.md をチェックしてください。

👆この内容は、今までの自分自身のアプリやツールの全体の指示書に、plans.mdのことを追加で記入しているだけです。

copilot-instructions.md が大きくなっている時は別ファイルに指示書を書き、
その指示書を指定するリンクを書いておきます。

2. plans.prompt.md 個別プロンプトファイル指示書の作成

GitHub Copilot のplans.prompt.mdは、AGENT.mdの代替です。

AIの長期的な振る舞いやコンテキストを定義する指示書です。

plans.prompt.md 指示書

👆plains.mdの動かし方を書く

プロンプトファイルを作成すると
GitHub Copilot のチャット欄からスラッシュコマンドで実行します。

/plansで実行できます。

実際の内容

.github\prompts\plans.prompt.md


`[パス]\plans.md` に基づいて実装してください。
TDD（テスト駆動開発）で実装してください。

複雑な機能や大規模なリファクタリングに取り組む際は、
必ず `[パス]\plans.md` を参照してください。

`[パス]\plans.md` を参照し、以下を実行してください：

1. 全体像を理解する
2. 進捗状況を確認する
3. 作業後に `[パス]\plans.md` を常に最新の状態に更新する
4. 発見事項と決定事項を記録する

`[パス]\plans.md` はあなたの長期記憶であり、プロジェクトの羅針盤です。

3. Plan（AIが計画を策定）の作成

用意した設計書から plans.mdを作成

[パス]\plans.mdに作成します。

定型フォーマット

👇[***] プレースホルダーは自分自身のに書き換えてください。

plans.md

# Exec Plan: [機能の名称]

## 全体像: 実装する機能の概要
[実装したい機能の全体像を書く、目的や理由など]

## 進捗状況、ToDoリスト
タスクごとのチェックリスト形式のToDoリスト

- [ ] [進捗A]
- [ ] [進捗B]
- [ ] テスト追加
- [ ] ドキュメント更新

## 発見と驚き
開発中に判明した課題や予想外の挙動（例：既存のバグ、実装方法の違い）を記録

- [*****]
- [*****]
- [*****]

## 決定ログ
決定ログ: [日付とアプローチの選択理由を記録（例：パフォーマンスやメモリ使用量に基づく決定）]

| 日付 | 決定事項 | 理由 |
| :--- | :--- | :--- |
| YYYY/MM/DD | [決定内容] | [理由] |
| YYYY/MM/DD | [決定内容] | [理由] |
| YYYY/MM/DD | [決定内容] | [理由] |

## 作業の要約
[作業完了後の作業の要約を書きます。]

## To-Do: 次に取り組むべき具体的なタスクリスト
1. [ ] [*****]
2. [ ] [*****]
3. [ ] [*****]

plans.mdのサンプル

plans.md

# Exec Plan: JSONパーサーのストリーミング対応

## 全体像
ストリーミングツールコール用のJSONパーサーを実装する。
AI時代に最適化されたパーサーとして、
リアルタイム処理を可能にする。

## 進捗状況、ToDoリスト
タスクごとのチェックリスト形式のToDoリスト

- [ ] スパイク：XXXライブラリの調査
- [ ] 機能実装：ストリーミングAPI
- [ ] テスト追加
- [ ] ドキュメント更新

## 発見と驚き
開発中に判明した課題や予想外の挙動（例：既存のバグ、実装方法の違い）を記録
- YYYライブラリには既存のバグがあった
- ZZZの実装方法が予想と異なった

## 決定ログ
| 日付 | 決定事項 | 理由 |
| :--- | :--- | :--- |
| 2025-01-15 | アプローチAを選択。 | 理由：パフォーマンスが優れているため |
| 2025-01-15 | アプローチBを却下。 | 理由：メモリ使用量が多すぎる |

## 作業の要約
[作業完了後の作業の要約を書きます。]

## To-Do: 次に取り組むべき具体的なタスクリスト
1. [ ] コア機能の実装
2. [ ] エッジケースのテスト
3. [ ] パフォーマンス最適化

4. Exec Plan（plans.mdで実行と記録） Code（実装）

plans.mdに実装の実行と進捗の継続的な更新します。
アプリの進捗と記録の永続化

/plains

実行中のベストプラクティス（監視）

監視コマンドを別ターミナルで実行することが監視のベストプラクティスとされています。

テストを監視します。
テストが長時間失敗している状態（赤い状態）が続く場合は、人間の介入が必要です。

npm test -- --watch

6. レビュー用のプロンプトファイルの作成

レビュー指示書の作成

review.prompt.md

# modelを指定します。
# GPT5-Codexでレビューします。
[GPT5-Codexでレビューの指示書を書いてもらいます]

7. レビュー GPT5-Codexはレビューが得意

※Claude Codex CLI には /review コマンドが用意されていますが、GitHub Copilot は自作する必要があります。

実装終了後にGPT5-Codexでレビューします。

GitHub Copilot のスラッシュコマンドで、

/review

👆️でレビューできるようにします。

レビューのコマンド

# 基本的な使い方
## 1. レビュー実行
/review

## 2. 問題が見つかった場合
「この問題を修正してください」

## 3. 修正後、再度レビュー
/review

## 4. このように、問題がなくなるまで繰り返します。

## 5. 最終確認
git add .
git commit -m "機能実装完了"
git push origin feature-branch

# オプション選択
1. ベースブランチと比較（mainとの差分）← 通常はこれ
2. コミットされていない変更
3. 特定のコミット
4. カスタムレビュー指示

8. 必要に応じて軌道修正

要件定義書、設計書、指示書などを見直す
そもそも要件定義書から見直したい時は躊躇せずにやり直す。

9. Commit（成果をGitへ）

	git add .
	git commit -m "機能実装完了"
	git push origin feature-branch

最後に

Daniel氏のコメント：
「これが私の毎日のワークフローです。PRを作る前に必ず/reviewを使っています」

注意

自分独自のルールを持ち込まない
できれば英語でルールを書く

実績(動画より)

1時間の自動作業で：
4,200行以上のコード生成
すべてのテストが合格
ドキュメント完備

Fel氏のコメント：
「通常なら数週間かかる作業が、数分のプロンプトと数時間の自動作業で完成します」

その他 Tips

UI開発のコツ

	## agents.md への追加

	UIを実装したら、必ずスクリーンショットを生成して
	視覚的に検証してください。

	デザインと完全に一致するまで、
	微調整を繰り返してください。

1 実践ワークフロー①：UI開発の自動化（Nacho氏の事例）

基本的なプロンプト

	このデザインを実装してください。

	[ChatGPTで生成したUIモックアップの画像を添付]

マルチモーダル検証の設定

Makefileを作成

# SwiftUIプレビューを抽出してスナップショット生成
generate-snapshots:
    swift test --enable-code-coverage
    python extract_previews.py

agents.mdに指示を追加

	## UI検証について

	UIコードを書いたら、必ず以下のスクリプトを実行して
	視覚的に検証してください：

	```bash
	make generate-snapshots
	```

	生成されたスクリーンショットを確認し、
	デザインと一致しているか検証してください。

Codexへのプロンプト

この画面のUIを実装してください。
実装後、スナップショットを生成して
視覚的に検証してください。

Codexによる解決

「ChatGPTアプリのような大規模プロジェクトでも、ピクセルパーフェクトになるまで何時間も動いてくれます」

実装 90% → Codexに依頼
微調整 10% → Codexに依頼して他の作業へ

これまでのAIレビューとGPT5-Codexのレビューの質の違い

GPT5-Codexはレビューに自信を持っています。

従来のツール：

❌ スタイルの問題: インデントが4スペースではありません
❌ 命名: 変数名が長すぎます
❌ コメント: ここにコメントを追加してください
❌ 改行: 空行が多すぎます
...（20〜30個の指摘）

GPT5-Codex：

🚨 P0: セキュリティの問題
ユーザー入力が直接SQLクエリに使用されています。
SQLインジェクションのリスクがあります。

[詳細な説明とテストケース]

「1つか2つの本当に重要な問題だけを教えてくれます。時間を無駄にしません」

レビュースレッドの独立性

	実装スレッド（バイアスあり）
	「この方法で実装する！」
	　↓
	　❌ 客観的な視点が失われる

	レビュースレッド（バイアスなし）
	「新鮮な目で確認」
	　↓
	　✅ 問題を発見しやすい

Daniel氏：コメント

「実装バイアスがないので、バグを見つけやすいんです」

実践ノウハウ集

長時間作業のコツ

	1. 最初に全体計画を立てさせる
	2. 進捗を plans.md で管理させる
	3. 定期的にテストを監視
	4. 必要に応じて軌道修正

GPT5-Codex インストールと初期設定

npm install -g @openai/codex

起動

codex

基本的なプロンプト例

シンプルな依頼：

	この機能を実装してください：
	- ユーザー認証
	- JWT トークン生成
	- リフレッシュトークン対応

詳細な依頼：

	以下の仕様に基づいてAPIを実装してください：

	1. エンドポイント: POST /api/users
	2. 認証: Bearer トークン必須
	3. バリデーション: emailは必須、パスワードは8文字以上
	4. レスポンス: 201 Created または 400 Bad Request

	実装後、テストを書いて実行してください。

	```

	## agents.mdのテンプレート

	```agents.md
	# プロジェクト情報

	このプロジェクトは XXX を目的としたアプリケーションです。

	## コーディング規約

	- TypeScript strict モードを使用
	- ESLint の警告は必ず解決
	- すべての関数にJSDocコメントを追加
	- テストカバレッジは80%以上を維持

	## テストについて

	実装後は必ず以下を実行してください：

	```bash
	npm test
	npm run lint
	```

	## Exec Planについて

	複雑な機能実装時は plans.md を使用してください。

参考

Shipping with Codex - YouTube
https://www.youtube.com/watch?v=Gr41tYOzE20

【保存版】OpenAIのエンジニアが語る開発を１０倍速にするCodeXの使い方大全：バイブコーディングで設計→実装→レビューまで自動化｜チャエン | 重要AIニュースを毎日発信⚡️
https://note.com/chaen_channel/n/n68e6ae9df467