Level 10 実践: 次のプロダクトのエージェント群を Claude に設計させる
このチュートリアルについて
Section titled “このチュートリアルについて”概念・仕組みを先に理解したい方は Level 10 の概念ガイド を参照してください。
Level 0 から Level 9 まで、my-portfolio を通じて Claude Code の使い方を体得してきた。最後のレベルでは「Claude Code を使って開発する」から「Claude Code を使って開発体制そのものを設計する」へシフトする。
対象読者: Level 9 まで完了しており、エージェント・ワークフロー・自動化の概念を実践で身につけた方。
学習時間の目安: 読了 20分 + 実践 90分
前のレベルからの引き継ぎ
Section titled “前のレベルからの引き継ぎ”Level 9 で my-portfolio は「寝ている間も自動でメンテナンスされる」状態になった。
ここで学んだパターンは汎用的です:
| パターン | Level | 使った場面 |
|---|---|---|
| コンテキスト設定 | 1 | CLAUDE.md で Claude の行動を定義 |
| スラッシュコマンド | 3 | /blog でタスクを1プロンプト化 |
| メモリ | 4 | 文体ルールを記憶させて品質を統一 |
| サブエージェント | 5–6 | Issue 処理・PR レビューを並列化 |
| MCP / ツール連携 | 7 | 外部 API から情報収集 |
| Git worktree 並列実装 | 8 | 複数機能を同時開発 |
| CI 自動化 | 9 | GitHub Actions で 24/7 運用 |
Step 1: 次のプロダクトの要件を書き出す
Section titled “Step 1: 次のプロダクトの要件を書き出す”新しいプロダクトを Claude に設計させる前に、人間側で「何を作るか」を明確にします。
以下はサンプルです。自分のプロダクトに置き換えて使ってください。
プロダクト名: DevMetrics Dashboard
概要: チームの GitHub Activity（PR・Issue・コミット）を可視化する社内ダッシュボード
技術スタック: Next.js 14 + TypeScript + Prisma + PostgreSQL
チーム規模: 開発者 3 名
主な機能:
- GitHub Webhook でイベントを受信して DB に保存
- PR のサイクルタイム（作成〜マージ）を集計・表示
- 週次レポートをメールで送信
- Slack ボットで「今週の PR サマリー」を配信Step 2: Claude にエージェント設計を依頼する
Section titled “Step 2: Claude にエージェント設計を依頼する”プロダクト要件を整理したら、Claude に設計を依頼します。
> 以下のプロダクトを Claude Code で開発・運用するための
> エージェントアーキテクチャを設計してください。
---
プロダクト名: DevMetrics Dashboard
概要: チームの GitHub Activity を可視化する社内ダッシュボード
技術スタック: Next.js 14 + TypeScript + Prisma + PostgreSQL
チーム規模: 開発者 3 名
主な機能:
- GitHub Webhook でイベントを受信して DB に保存
- PR のサイクルタイム（サイクルタイム = 作成〜マージの時間）を集計・表示
- 週次レポートをメールで送信
- Slack ボットで「今週の PR サマリー」を配信
---
設計してほしいもの:
1. CLAUDE.md の構成（プロジェクト概要・開発ルール・禁止事項）
2. スラッシュコマンドの一覧（/feature, /fix, /report など）
3. GitHub Actions ワークフローの一覧（CI・自動化・監視）
4. サブエージェントの役割分担（実装・レビュー・テスト・デプロイ）
5. 開発フロー（Issue 作成 → 実装 → レビュー → マージ → デプロイ）の自動化設計
各項目について、なぜその設計にするのか理由も含めて説明してください。Step 3: 設計書を受け取って精査する
Section titled “Step 3: 設計書を受け取って精査する”Claude が返した設計書を確認します。典型的な出力例:
## DevMetrics Dashboard — エージェントアーキテクチャ設計
### 1. CLAUDE.md 構成
プロジェクト概要セクション:
- DB スキーマ（Prisma）の変更は必ずマイグレーションファイルを生成する
- GitHub Webhook のシークレット検証を省略しない
- 環境変数は .env.example に必ず追記する
禁止事項:
- `prisma db push` を本番環境で直接実行しない（マイグレーション必須）
- GitHub Token をコードに直書きしない
### 2. スラッシュコマンド
| コマンド | 内容 |
|---------|------|
| /feature [説明] | Issue 作成 → ブランチ作成 → 実装 → PR 作成を一連で行う |
| /fix [Issue番号] | バグ修正ブランチを作成し、修正後に PR を作成する |
| /db-migrate [説明] | Prisma スキーマ変更 → マイグレーション生成 → レビュー依頼 |
| /weekly-report | 週次レポートを手動生成してプレビューする |
### 3. GitHub Actions
| ワークフロー | トリガー | 内容 |
|------------|---------|------|
| ci.yml | PR 作成・更新 | lint・typecheck・jest |
| preview.yml | PR 作成 | Vercel プレビュー URL を PR にコメント |
| weekly-report.yml | 毎週月曜 9:00 | レポート生成 → メール送信 |
| db-backup.yml | 毎日 3:00 | PostgreSQL ダンプを S3 に保存 |
| security.yml | 毎日 8:00 | npm audit + Prisma 依存関係チェック |
### 4. サブエージェントの役割分担
- 実装エージェント: 機能実装・コミット（Git worktree で並列化）
- レビューエージェント: PR diff の静的解析・コードレビュー
- テストエージェント: jest テストの生成・実行
- マイグレーションエージェント: Prisma スキーマ変更の安全性チェック
### 5. 開発フロー
1. /feature コマンドで Issue + ブランチを作成
2. 実装エージェントが feature ブランチで実装・コミット
3. PR 作成 → レビューエージェントが自動レビュー
4. テストエージェントが jest を実行して結果を PR にコメント
5. 承認後に main へマージ → Vercel が自動デプロイStep 4: 設計を実装する
Section titled “Step 4: 設計を実装する”設計書を確認したら、Claude に実装を依頼します。
> 設計書に基づいて以下を実装してください。
1. CLAUDE.md を作成する（設計書の1に基づく）
2. .claude/commands/ に /feature・/fix・/db-migrate コマンドを作成する
3. .github/workflows/ に ci.yml・weekly-report.yml・security.yml を作成する
今日は 1 と 2 だけ実装してください。
ファイルを作成したら内容を確認させてください。ポイント: 設計と実装を一気に依頼しない。設計を精査してから、小さい単位で実装を指示する。
Step 5: CLAUDE.md を育てながら開発を進める
Section titled “Step 5: CLAUDE.md を育てながら開発を進める”新プロダクトの開発を進める中で、Claude からフィードバックを受けて CLAUDE.md を更新します。
> 今日の開発で気づいたことを CLAUDE.md に追記してください。
- Prisma のリレーション定義でエラーが多発した。将来のエージェントへの注意事項として
「many-to-many リレーションは explicit join table を使う」を追記してほしい。
- テストファイルは __tests__/ ではなく src/ 以下に置くことにした。
このルールも追記してほしい。CLAUDE.md は「プロジェクトの生きたドキュメント」として開発と並行して育てます。
このチュートリアルの総括
Section titled “このチュートリアルの総括”Level 0 から Level 10 を通じて身につけたスキル:
| スキル | 内容 |
|---|---|
| 文脈を渡す | CLAUDE.md・メモリ・プロンプトでコンテキストを設定する |
| 繰り返しを自動化する | スラッシュコマンド・GitHub Actions で定型作業を排除する |
| 並列で動かす | worktree・サブエージェントで実装速度を上げる |
| 監視・通知する | 脆弱性・品質・デプロイを自動監視する |
| 設計を委譲する | アーキテクチャ設計まで Claude に相談する |
最終的なゴール: Claude Code は「使うツール」から「一緒に設計するパートナー」になる。
この時点の my-portfolio（チュートリアル完了）
Section titled “この時点の my-portfolio（チュートリアル完了）”my-portfolio/
├── CLAUDE.md # プロジェクト知識が蓄積
├── .claude/
│ └── commands/ # /blog・/review などのコマンド群
├── .github/
│ └── workflows/ # CI・週次生成・脆弱性監視
├── scripts/
│ ├── parallel_features.sh # 並列実装
│ ├── review_pr.sh # 自動レビュー
│ └── collect_and_blog.sh # トレンド収集
└── src/
└── content/posts/ # 自動生成記事が蓄積中おめでとうございます。Level 10 完了です。