目次
はじめに
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 まとめ