ソース
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
の最終記録、最終コードを統合し、プロジェクトの最終報告書を自動生成します。
-
Commit(成果をGitへ): 実装、テスト、レビュー、修正が完了した一連の成果を、
プロセスまとめ
ステップ | 担当AIの役割 | 主な成果物 |
---|---|---|
構想・要件定義 | 仕様策定、ゴール設定 | 要件定義書、全体の指示書 |
設計・タスク分割 | 構造設計、タスクの分解 | 設計書、個別プロンプトファイル、plans.md
|
実装・管理 | コード生成、進捗記録、自己監視 | コードベース、plans.md の継続的な更新
|
検証・レビュー | 品質保証、問題発見 | レビュー用プロンプト、レビュー結果、修正計画 |
成果確定 | 成果の統合、記録、報告 | Gitコミット、最終報告書 |
GitHub Copilot でプロンプトファイルの作成方法
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のアプリ全体の指示書
# プロジェクト情報
このプロジェクトは XXX を目的としたアプリケーションです。
## コーディング規約
- TypeScript strict モードを使用
- ESLint の警告は必ず解決
- すべての関数にJSDocコメントを追加
- テストカバレッジは80%以上を維持
## テストについて
実装後は必ず以下を実行してください:
```bash
npm test
npm run lint
```
## plans.md
コードを書く際は必ず plans.md をチェックしてください。
copilot-instructions.md が大きくなっている時は別ファイルに指示書を書き、
その指示書を指定するリンクを書いておきます。
2.plans.prompt.md 個別プロンプトファイル 指示書の作成
AIの長期的な振る舞いやコンテキストを定義する指示書です。
plans.prompt.md 指示書
👆plains.mdの動かし方を書く
プロンプトファイルを作成すると
チャット欄から
/plans
で実行できます。
plans.md に基づいて実装してください。
TDD(テスト駆動開発)で実装してください。
複雑な機能や大規模なリファクタリングに取り組む際は、
必ず plans.md を使用してください。
plans.md を参照し、以下を実行してください:
1. 全体像を理解する
2. 進捗状況を確認する
3. 作業後に plans.md を更新する
4. 発見事項と決定事項を記録する
plans.md はあなたの長期記憶であり、プロジェクトの羅針盤です。
3. Plan(AIが計画を策定)の作成
用意した設計書から plans.mdを作成
フォーマット
# Exec Plan: [機能の名称]
## 全体像: 実装する機能の概要
[全体像を書く]
## 進捗状況
進捗状況: タスクごとのチェックリスト形式(スパイク、機能実装、テスト追加、ドキュメント更新など)
- [ ] [進捗A]
- [ ] [進捗B]
- [ ] テスト追加
- [ ] ドキュメント更新
## 発見と驚き
発見と驚き: 開発中に判明した課題や予想外の挙動(例:既存のバグ、実装方法の違い)を記録
- [*****]
- [*****]
- [*****]
## 決定ログ
決定ログ: 日付とアプローチの選択理由を記録(例:パフォーマンスやメモリ使用量に基づく決定)
## To-Do
1. [ ] コア機能の実装
2. [ ] エッジケースのテスト
3. [ ] パフォーマンス最適化
To-Do: 次に取り組むべき具体的なタスクリスト
Plans.mdのサンプル
# Exec Plan: JSONパーサーのストリーミング対応
## 全体像
ストリーミングツールコール用のJSONパーサーを実装する。
AI時代に最適化されたパーサーとして、
リアルタイム処理を可能にする。
## 進捗状況
- [ ] スパイク: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. レビュー用のプロンプトファイルの作成
レビュー指示書の作成
# modelを指定します。
# GPT5-Codexでレビューします。
[GPT5-Codexでレビューの指示書を書いてもらいます]
7. レビュー GPT5-Codexはレビューが得意
実装終了後に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のエンジニアが語る開発を10倍速にするCodeXの使い方大全:バイブコーディングで設計→実装→レビューまで自動化|チャエン | 重要AIニュースを毎日発信⚡️
https://note.com/chaen_channel/n/n68e6ae9df467