目次

はじめに

0.1　対象読者と前提知識

0.2　本書で使用する環境

0.3　本書の全体像

0.4　本書を読み終えると何ができるか

0.5　謝辞

第1章　Claude Codeを始める前に

1.1　AI駆動開発とClaude Code

• 1.1.1　AIコーディングツールがもたらすインパクト
• 1.1.2　コード補完からエージェントへ
• 1.1.3　AI駆動開発とは何か
• 1.1.4　Claude Codeの主要機能
• 1.1.5　なぜ「今」Claude Codeなのか
• 1.1.6　開発者の役割変化：実装者からテックリードへ
• 1.1.7　まとめ

1.2　Claude Codeの強みと他のツールとの違いを知ろう

• 1.2.1　AIコーディングツールの形態を知ろう
• 1.2.2　Claude Codeの特徴を知ろう
• 1.2.3　他の主要ツールと比べてみよう
• 1.2.4　まとめ

1.3　自分にぴったりの料金プランを選ぼう

• 1.3.1　Claude Codeを使う2つの選択肢
• 1.3.2　サブスクリプションの3つのプランを知ろう
• 1.3.3　API従量課金の仕組みを知ろう
• 1.3.4　自分に合ったプランを選ぼう
• 1.3.5　まとめ

第2章　環境構築とはじめの一歩

2.1　開発に必要なツールを揃えよう

• 2.1.1　GitとGitHubを確認しよう
• 2.1.2　Node.jsを確認しよう
• 2.1.3　そのほかの準備を確認しよう
• 2.1.4　まとめ

2.2　サブスクリプションプランで使う準備をしよう

• 2.2.1　アカウントを準備しよう
• 2.2.2　サブスクリプションプランを有効にしよう
• 2.2.3　まとめ

2.3　API従量課金で使う準備をしよう

• 2.3.1　Claude Consoleのアカウントとクレジットを準備しよう
• 2.3.2　まとめ

2.4　Claude Codeをインストールしてみよう

• 2.4.1　インストール方法を知ろう
• 2.4.2　Windowsでインストールしよう
• 2.4.3　macOSでインストールしよう
• 2.4.4　ログインしてアカウントを選ぼう
• 2.4.5　API従量課金でログインしよう
• 2.4.6　アップデート方法を知ろう
• 2.4.7　まとめ

2.5　claude doctorでClaude Codeの動作確認をしよう

• 2.5.1　claude doctorの役割を知ろう
• 2.5.2　claude doctorを実行してみよう
• 2.5.3　出力結果を読み解こう
• 2.5.4　まとめ

2.6　はじめてのClaude Code：起動から最初の対話まで

• 2.6.1　対話モードを知ろう
• 2.6.2　Claude Codeを起動しよう
• 2.6.3　最初の質問をしてみよう
• 2.6.4　作業を終えたら終了しよう
• 2.6.5　まとめ

2.7　【実践】企業サイトを作ってみよう

• 2.7.1　今回のシナリオ
• 2.7.2　Step 1：フォルダを作ってClaude Codeを起動しよう
• 2.7.3　Step 2：プロンプト1つでサイトを作ろう
• 2.7.4　Step 3：要素を追加しよう
• 2.7.5　まとめ

2.8　Git操作もClaude Codeにお任せしよう

• 2.8.1　企業サイトのコードをGitで管理しよう
• 2.8.2　リポジトリを作成してコミットしよう
• 2.8.3　コミットを工夫しよう
• 2.8.4　ブランチを作って変更を加えよう
• 2.8.5　GitHubにプッシュしてPRを作ろう
• 2.8.6　まとめ

第3章　Claude Codeとの対話の基本をマスターしよう

3.1　対話モードで会話を始めてみよう

• 3.1.1　テキスト入力をマスターしよう
• 3.1.2　入力のキャンセルと編集を覚えよう
• 3.1.3　確認動作の仕組みを知っておこう
• 3.1.4　キーボードショートカットを使いこなそう
• 3.1.5　まとめ

3.2　「コンテキスト」の仕組みを知ろう

• 3.2.1　コンテキストの正体を知ろう
• 3.2.2　コンテキストに何が含まれているかを知ろう
• 3.2.3　コンテキストが上限に近づくとどうなるかを知ろう
• 3.2.4　/contextでコンテキストの使用状況を確認しよう
• 3.2.5　コンテキストの管理方法を押さえよう
• 3.2.6　まとめ

3.3　＠記法でファイルを読み込ませよう

• 3.3.1　Claude Codeにファイルを「見せる」方法を知ろう
• 3.3.2　＠記法の基本的な使い方を試してみよう
• 3.3.3　複数のファイルを一度に読み込ませよう
• 3.3.4　コンテキストを意識したファイル参照のコツを押さえよう
• 3.3.5　まとめ

3.4　便利なスラッシュコマンドを使いこなそう

• 3.4.1　スラッシュコマンドとは
• 3.4.2　コンテキスト管理のコマンドを覚えよう
• 3.4.3　セッション管理のコマンドを覚えよう
• 3.4.4　プロジェクト設定のコマンドを知っておこう
• 3.4.5　情報確認のコマンドを使ってみよう
• 3.4.6　コマンド補完を活用しよう
• 3.4.7　まとめ

3.5　パーミッションのルールを知ろう

• 3.5.1　パーミッション設定が必要な理由を知ろう
• 3.5.2　パーミッションの仕組みを知ろう
• 3.5.3　3つのルールを覚えよう：deny、ask、allow
• 3.5.4　「安全に使う」ための考え方を身につけよう
• 3.5.5　settings.jsonで設定しよう
• 3.5.6　設定を確認しよう
• 3.5.7　まとめ

3.6　【実践】メモアプリを作ってみよう

• 3.6.1　今回のシナリオ
• 3.6.2　Step 1：プロジェクトを作成しよう
• 3.6.3　Step 2：メモの追加・表示機能を作ろう
• 3.6.4　Step 3：メモの編集・削除機能を追加しよう
• 3.6.5　Step 4：カテゴリ分類機能を追加しよう
• 3.6.6　Step 5：ローカルストレージでデータを永続化しよう
• 3.6.7　今回使った知識を振り返ろう
• 3.6.8　メモアプリをGitで管理しよう
• 3.6.9　まとめ

第4章　CLAUDE.mdでプロジェクトの「記憶」を作ろう

4.1　プロジェクトメモリを理解しよう

• 4.1.1　Claude Codeはセッションごとに記憶を失う
• 4.1.2　CLAUDE.mdはプロジェクトの「引き継ぎ書」
• 4.1.3　配置場所の全体像を知ろう
• 4.1.4　何をどこに書くかの判断基準
• 4.1.5　CLAUDE.mdが読み込まれるタイミングを確認しよう
• 4.1.6　まとめ

4.2　/initで設定ファイルを自動生成しよう

• 4.2.1　/initで生成されたCLAUDE.mdを確認しよう
• 4.2.2　/initの情報収集を把握しよう
• 4.2.3　CLAUDE.mdを/initで継続的に更新しよう
• 4.2.4　自動生成の限界を知ろう
• 4.2.5　まとめ

4.3　役立つCLAUDE.mdを書き込んでみよう

• 4.3.1　/initの出力を手動で磨き上げよう
• 4.3.2　まず書いてみたい6つのセクションを押さえよう
• 4.3.3　自動生成されたセクションを磨き上げよう
• 4.3.4　コーディング規約を書き足そう
• 4.3.5　禁止事項を明記しよう
• 4.3.6　CLAUDE.mdを簡潔に保つコツを知ろう
• 4.3.7　完成版のCLAUDE.mdを確認しよう
• 4.3.8　まとめ

4.4　情報を整理して階層的に管理しよう

• 4.4.1　CLAUDE.mdが大きくなる問題に向き合おう
• 4.4.2　サブディレクトリにCLAUDE.mdを配置しよう
• 4.4.3　＠記法で外部ファイルを参照しよう
• 4.4.4　＠記法の注意点を押さえよう
• 4.4.5　サブディレクトリ配置と＠記法を使い分けよう
• 4.4.6　まとめ

4.5　場所ごとのルールを細かく設定しよう

• 4.5.1　3つ目の整理方法を学ぼう
• 4.5.2　Rulesの基本構成を知ろう
• 4.5.3　paths指定で必要なルールだけ読み込ませよう
• 4.5.4　Globパターンの書き方を押さえよう
• 4.5.5　ベストプラクティスを知ろう
• 4.5.6　3つの整理方法を使い分けよう
• 4.5.7　まとめ

4.6　CLAUDE.mdをチームで共有しよう

• 4.6.1　CLAUDE.mdをGit管理する意義を知ろう
• 4.6.2　Git管理するファイルとしないファイルを整理しよう
• 4.6.3　チームでCLAUDE.mdを育てていく方法を知ろう
• 4.6.4　まとめ

4.7　【実践】CLAUDE.mdを整理しよう

• 4.7.1　第4章の知識を実践で確かめよう
• 4.7.2　Step 1：現在のCLAUDE.mdを確認しよう
• 4.7.3　Step 2：＠記法でコーディング規約を分離しよう
• 4.7.4　Step 3：Rulesでコンポーネントルールを追加しよう
• 4.7.5　ここまでの実践を振り返ろう
• 4.7.6　まとめ

第5章　効果的な開発の進め方をマスターしよう

5.1　伝わる指示と伝わらない指示の違いを知ろう

• 5.1.1　曖昧な指示がもたらす問題
• 5.1.2　なぜ具体的な指示が必要なのか
• 5.1.3　良い指示と悪い指示を比べてみよう
• 5.1.4　指示を具体化するためのチェックリスト
• 5.1.5　まとめ

5.2　タスクを小さく分けて進めよう

• 5.2.1　一括指示の落とし穴
• 5.2.2　なぜ段階的に指示するのか
• 5.2.3　タスクを分割する考え方
• 5.2.4　指示→確認→次へのサイクル
• 5.2.5　まとめ

5.3　エラーが出ても慌てず対処しよう

• 5.3.1　エラーは開発の一部
• 5.3.2　エラーが出たとき、最初にやるべきこと
• 5.3.3　エラー報告の5つの情報を伝えよう
• 5.3.4　まとめ

5.4　/rewindで過去のやり取りに戻ろう

• 5.4.1　指示を間違えたら、どうする？
• 5.4.2　チェックポイント機能を知ろう
• 5.4.3　/rewindを使おう
• 5.4.4　復元方法を選ぼう
• 5.4.5　巻き戻せる範囲と制限事項を知ろう
• 5.4.6　Gitとの使い分けを知ろう
• 5.4.7　まとめ

5.5　よく使う操作をスキルにまとめよう

• 5.5.1　スキルとは
• 5.5.2　スキルの仕組みを知ろう
• 5.5.3　SKILL.mdの基本構造を知ろう
• 5.5.4　【実践】/code-reviewスキルを作ってみよう
• 5.5.5　まとめ

5.6　【実践】メモアプリに新機能を追加しよう

• 5.6.1　今回のシナリオ
• 5.6.2　Step 1：セクション5.1のチェックリストで具体的に指示しよう
• 5.6.3　Step 2：あえて曖昧な指示を出してみよう
• 5.6.4　Step 3：/rewindで巻き戻して再挑戦しよう
• 5.6.5　Step 4：/code-reviewスキルでコードを確認しよう
• 5.6.6　まとめ

第6章　既存のコードを読み解いて改善しよう

6.1　既存プロジェクトにClaude Codeを導入しよう

• 6.1.1　サンプルコードをクローンしよう
• 6.1.2　コードの概要を把握しよう
• 6.1.3　/initでClaude Codeに分析させよう
• 6.1.4　CLAUDE.mdを調整しよう
• 6.1.5　まとめ

6.2　コードの意味を解説してもらおう

• 6.2.1　プロジェクトの全体像を把握しよう
• 6.2.2　わからない用語を質問しよう
• 6.2.3　プロジェクト全体の改善点を把握しよう
• 6.2.4　まとめ

6.3　テストコードを書いてもらおう

• 6.3.1　既存テストを確認しよう
• 6.3.2　テストルールを整備しよう
• 6.3.3　テストを書いてもらおう
• 6.3.4　まとめ

6.4　リファクタリングでコードをきれいにしよう

• 6.4.1　改善ポイントを決めよう
• 6.4.2　現状をコミットしよう
• 6.4.3　テストを整えてリファクタリングしよう
• 6.4.4　リファクタリングはどこまでやるべきか
• 6.4.5　まとめ

6.5　ドキュメントを自動で生成しよう

• 6.5.1　READMEを自動生成しよう
• 6.5.2　JSDocコメントを追加しよう
• 6.5.3　CLAUDE.mdにドキュメントルールを追加しよう
• 6.5.4　まとめ
• 6.5.5　第6章の振り返り

第7章　MCPで外部サービスとつなげよう

7.1　MCPの仕組みを知ろう

• 7.1.1　外部サービスとの連携に進もう
• 7.1.2　MCPとは何か
• 7.1.3　MCPのアーキテクチャを知ろう
• 7.1.4　MCPサーバーの世界を見てみよう
• 7.1.5　本章のロードマップ
• 7.1.6　まとめ

7.2　MCPサーバーを追加・管理しよう

• 7.2.1　Playwright MCPとは
• 7.2.2　claude mcp addコマンドを理解しよう
• 7.2.3　MCPサーバーを追加しよう
• 7.2.4　接続状態を確認しよう
• 7.2.5　MCPサーバーを削除しよう
• 7.2.6　MCPサーバーの接続がうまくいかないときは
• 7.2.7　まとめ

7.3　ブラウザ操作を自動化しよう（Playwright）

• 7.3.1　Playwright MCPを改めて追加しよう
• 7.3.2　Step 1：Webページを開いてみよう
• 7.3.3　Step 2：ページ上で操作してみよう
• 7.3.4　Step 3：スクリーンショットを撮ろう
• 7.3.5　ツール実行の許可設定
• 7.3.6　まとめ

7.4　最新ドキュメントを読み込ませよう（Context7）

• 7.4.1　APIキーを取得しよう
• 7.4.2　Context7 MCPを設定しよう
• 7.4.3　Context7を使ってドキュメントを取得しよう
• 7.4.4　利用回数の制限に注意しよう
• 7.4.5　まとめ

7.5　データベースを操作しよう（Supabase）

• 7.5.1　Supabaseとは
• 7.5.2　Supabaseアカウントを登録しよう
• 7.5.3　Organizationを作成しよう
• 7.5.4　プロジェクトを作成しよう
• 7.5.5　Supabase MCPを設定しよう
• 7.5.6　プロジェクトを確認してみよう
• 7.5.7　テーブルを作ろう
• 7.5.8　ハンズオンで作成したプロジェクトを削除しよう
• 7.5.9　Supabase MCPの利用上の注意
• 7.5.10　まとめ

第8章　学んだことを総動員してアプリを作ろう

8.1　完成イメージを描いてプロジェクトを作ろう

• 8.1.1　完成イメージを確認しよう
• 8.1.2　Next.jsプロジェクトを作成しよう
• 8.1.3　テスト環境をセットアップしよう
• 8.1.4　まとめ

8.2　CLAUDE.mdで開発の土台を固めよう

• 8.2.1　/initでCLAUDE.mdの雛形を作ろう
• 8.2.2　生成されたCLAUDE.mdを確認しよう
• 8.2.3　CLAUDE.mdを調整しよう
• 8.2.4　Context7 MCPを追加しよう
• 8.2.5　完成版のCLAUDE.mdを確認しよう
• 8.2.6　変更をコミットしよう
• 8.2.7　まとめ

8.3　Supabaseでデータベースを準備しよう

• 8.3.1　Supabase MCPを追加しよう
• 8.3.2　新しいSupabaseプロジェクトを作成しよう
• 8.3.3　環境変数を設定しよう
• 8.3.4　接続を確認しよう
• 8.3.5　Supabaseに関する知識をCLAUDE.mdに反映しよう
• 8.3.6　変更をコミットしよう
• 8.3.7　まとめ

8.4　タスク管理の基本機能を作ろう

• 8.4.1　タスク管理機能を実装しよう
• 8.4.2　ブラウザで動作を確認しよう
• 8.4.3　CRUD実装の知識をCLAUDE.mdに反映しよう
• 8.4.4　変更をコミットしよう
• 8.4.5　まとめ

8.5　Playwrightで動作確認しよう

• 8.5.1　Playwright MCPを追加しよう
• 8.5.2　E2Eテストを実行しよう
• 8.5.3　まとめ

8.6　UIライブラリでデザインを整えよう

• 8.6.1　shadcn/uiをセットアップしよう
• 8.6.2　CLAUDE.mdに反映しよう
• 8.6.3　UIをshadcn/uiで組み替えよう
• 8.6.4　CLAUDE.mdにデザインルールを追記しよう
• 8.6.5　変更をコミットしよう
• 8.6.6　まとめ

8.7　Vercelにデプロイして世界に公開しよう

• 8.7.1　GitHubにプッシュしよう
• 8.7.2　Vercelでデプロイしよう
• 8.7.3　デプロイを確認しよう
• 8.7.4　まとめ

第9章　実務で活かすために

9.1　AIに任せることと人間が判断することを分けるべき理由

• 9.1.1　これまでの体験から判断軸を整理しよう
• 9.1.2　生成されたコードに責任を持つ重要性
• 9.1.3　まとめ

9.2　チーム開発におけるClaude Code活用の課題と解決策

• 9.2.1　コーディングスタイルのばらつきをCLAUDE.mdで揃えよう
• 9.2.2　知見の属人化をスキルで解消しよう
• 9.2.3　新メンバーの立ち上がりをオンボーディングで支えよう
• 9.2.4　まとめ

9.3　GitHub上でClaude Codeにレビューと修正を依頼しよう

• 9.3.1　Claude Code GitHub Actionsを知ろう
• 9.3.2　/install-github-appで設定しよう
• 9.3.3　PRを作ってClaude Codeのレビューを体験しよう
• 9.3.4　まとめ

おわりに

巻末付録

付録A　Git・GitHubの環境を準備しよう

付録B　Node.jsをインストールしよう

付録C　スキルの詳しい使い方

索引