AIチームの作り方｜Claude Code・CodexでWebアプリ開発を分業・自動化する実践ガイド
Claude CodeやCodexのようなコーディングエージェントは、コード生成だけでなく、要件整理、設計、実装、レビュー、テストといった開発工程にも利用できます。 さらに、工程ごとに役割を分け、前工程の成果物を次の担当へ渡すことで、複数のAIを1つの開発チームとして動かすこともできます。この記事では、この仕組みを「AIチーム」と呼びます。 今回は、ログイン機能や生成AIによる回答機能を持たないシンプルな「社内FAQ Webアプリ」を題材にします。HTML、CSS、JavaScript、JSONを中心とした小規模なPoCとして、Web開発側では追加費用をできるだけかけずに試せる構成です。 開発工程を 要件整理 → 設計 → 実装 → レビュー → 修正 → テスト → 統合 に分解し、AIに開発工程そのものを分業させる方法を見ていきます。 1. AIチームの基本構造 今回の開発では、統括、要件整理、設計、実装、レビュー、テストという役割に分けます。分離するのはAIの人数そのものではなく、責任とコンテキストです。 役割 主な仕事 成果物 統括 タスク分解、進捗管理、工程間の調整 タスク、最終成果物 要件整理 必要な機能と制約を整理 requirements.md 設計 画面、データ、処理を設計 design.md 実装 設計をコードへ変換 ソースコード レビュー 要件・設計と実装を照合 レビュー結果 テスト 動作と要件充足を確認 テスト結果 小規模なPoCなら、すべてを別エージェントとして常時起動する必要はありません。同じエージェントでも役割を切り替えられます。一方、複数エージェントを利用できる環境では、依存関係の少ないタスクを分離して進めることもできます。 2. 今回作る社内FAQアプリ PoCでは、FAQ一覧、キーワード検索、カテゴリ絞り込み、FAQ登録・編集・削除を実装します。ログイン、本格的なデータベース、生成AIによる回答機能は対象外です。 技術構成はHTML、CSS、JavaScript、JSONとし、AIチームの開発ワークフローを確認することに集中します。 3. 成果物を受け渡すフォルダを作る faq-poc/ ├── data/ │ └── faq.json ├── docs/ │ ├── requirements.md │ └── des...