my-portfolio（Next.js 14 + TypeScript の個人ポートフォリオサイト）を題材に、Claude Code を Level 0 から Level 10 まで段階的に使いこなすチュートリアルです。
チュートリアルの読み方
初めて読む場合は、先に Claude Code レベル概要 で Level 0〜10 の分け方、学習順序、ゴールイメージを確認してください。
各レベルは以下の構成で進みます。
- 完成イメージ — そのレベルで何が出来上がるかを最初に確認する
- Step N: [動詞 + 目的語] — 1ステップずつ手を動かす
- ✅ 確認 — 各ステップ後に「うまくいっているか」を確認する
- 💡 何が起きたか — 操作と概念をつなぐ補足説明（重要ステップのみ）
コマンドはコピペで動く形で記載しています。詰まったら ✅ 確認の条件と照合してください。
チュートリアルの流れ
| レベル | ポートフォリオでやること | 完成するもの |
|---|---|---|
| レベル概要 | Level 0〜10 の全体像と学習ゴールを確認する | 自分の現在地と読み進め方 |
| Level 0 | Claude Code を起動して詰まる体験をする | ファイルは変わらない（詰まる体験が目的） |
| Level 1 | CLAUDE.md を作って About ページを生成する | CLAUDE.md + About.tsx |
| Level 2 | GitHub Issues を読んで Skills コンポーネントを実装する | GitHub MCP 設定 + Skills.tsx |
| Level 3 | /blog コマンドで記事を量産する | .claude/commands/blog.md + MDX 記事 |
| Level 4 | 文体ルールをメモリに書いて品質を統一する | 3層 CLAUDE.md 構造 |
| Level 5 | Issue → 実装 → テスト → PR を 1 つの流れで進める | 自動 PR 作成フロー |
| Level 6 | PR が来るたびに自動でレビューが走る仕組みを作る | GitHub Actions 自動レビュー |
| Level 7 | トレンドからブログネタを自動収集する | トレンド収集〜記事生成スクリプト |
| Level 8 | 3機能を Git worktree で並列実装する | 3ブランチ並列実装 + 3つの PR |
| Level 9 | 週次記事生成・脆弱性監視を 24/7 自動化する | 週次・日次 GitHub Actions |
| Level 10 | 次のプロダクトのエージェント群を Claude に設計させる | 新プロダクトの設計書 |
始め方
レベル概要 で全体像を確認してから、Level 0 から始める か、自分の現在地のレベルから読んでください。
Claude Code の概要は Anthropic の公式ドキュメント、API の前提は Claude API ドキュメントを参照しています。[1][2]
参考文献
- Anthropic, Claude Code documentation
- Anthropic, Claude API documentation