Claude Codeとは何か — AI駆動の開発ツールを始めよう

AIコーディングツールの進化

ソフトウェア開発は急速に変化しています。GitHub Copilotの登場以降、AIがコードを補完・生成する時代が到来しました。しかし従来のAIツールは「提案」を出すだけで、実際のファイル操作やコマンド実行は開発者が行う必要がありました。

Claude Codeはこの常識を覆します。Anthropicが2025年に公開した公式CLIツールで、AIが直接ファイルを読み書きし、ターミナルでコマンドを実行し、Gitでコミットやプルリクエストまで作成できます。チャットボットではなく、開発環境に深く統合されたエージェント型ツールです。

Stack Overflow Developer Survey 2024によると、開発者の76%がAIコーディングツールを使用中または使用予定と回答しています。その中でもClaude Codeは「エージェント型」という新しいカテゴリのパイオニアです。

Claude Codeの特徴

Claude Codeが従来のAIツールと決定的に異なる点は、エージェントループで動作することです。

ユーザーのプロンプト
  → Claudeが計画を立てる
    → ファイルを読む（Read, Glob, Grep）
      → コードを編集する（Edit, Write）
        → コマンドを実行する（Bash）
          → 結果を確認して次のアクションを決定
            → 必要に応じて繰り返し
              → 最終結果をユーザーに報告

この一連の流れが自律的に実行されます。「ログイン画面のバグを直して」と一言伝えるだけで、Claudeは関連ファイルを探し、コードを読み、修正を加え、テストを実行し、結果を報告します。

主な特徴を整理します。

何ができるのか — 具体例

Claude Codeで実現できるタスクの具体例を見てみましょう。

バグ修正

> ユーザーがログイン後にリダイレクトされない問題を修正して。
  エラーログは src/auth/callback.ts の45行目付近

Claudeはファイルを読み、問題を特定し、修正コードを適用し、関連テストを実行します。

新機能追加

> ブログ記事にコメント機能を追加して。既存の記事コンポーネントの
  パターンに従って、Supabaseをバックエンドに使って

コードレビュー

> このブランチの変更をレビューして。セキュリティとパフォーマンスの
  観点で問題がないか確認して

リファクタリング

> src/utils/ のヘルパー関数をTypeScriptに移行して。
  既存のテストが通ることを確認してから進めて

ドキュメント生成

> APIエンドポイントのドキュメントをOpenAPI形式で生成して

料金体系と利用方法

Claude Codeは以下の方法で利用できます。

APIキーでの利用は、入力トークンと出力トークンに対して課金されます。Opus 4.6は最も高性能ですが、Sonnet 4.5やHaiku 4.5を選ぶことでコストを抑えられます。

他のAIツールとの比較

Claude Codeの最大の強みは、Anthropic公式ツールとしてClaudeモデルと最も深く統合されていること、そしてMCP（Model Context Protocol）による外部サービス連携が充実していることです。

演習課題

1. Anthropicの公式サイト（https://claude.ai）でアカウントを作成してください
2. 自分の開発環境（Windows/Mac/Linux）でNode.js 18以上がインストールされているか確認してください
3. 普段の開発で「AIに任せたい」と思うタスクを3つリストアップしてみてください

参考文献

• Anthropic公式ドキュメント「Claude Code Overview」 https://docs.anthropic.com/en/docs/claude-code
• Stack Overflow「2024 Developer Survey — AI Tools」 https://survey.stackoverflow.co/2024/
• Anthropic「Model Context Protocol（MCP）仕様」 https://modelcontextprotocol.io/

インストールと初期設定 — 環境構築から最初の対話まで

前提条件の確認

Claude Codeをインストールする前に、以下の前提条件を確認しましょう。

バージョン確認コマンドです。

node --version    # v18.0.0以上が必要
npm --version     # Node.jsに同梱

Node.jsが未インストールの場合は、https://nodejs.org/ から LTS版をダウンロードしてインストールしてください。

インストール手順

npmでグローバルにインストールします。

npm install -g @anthropic-ai/claude-code

インストール完了後、バージョンを確認します。

claude --version

アップデートする場合は同じコマンドを再実行します。

npm install -g @anthropic-ai/claude-code@latest

初回起動と認証

プロジェクトディレクトリに移動してClaudeを起動します。

cd /path/to/your/project
claude

初回起動時に認証が求められます。2つの認証方法があります。

方法1: Anthropicアカウント（推奨）

ブラウザが開き、Anthropicアカウントでログインします。Claude ProまたはMaxプランが必要です。

方法2: APIキー

環境変数にAPIキーを設定します。

# Linux/Mac
export ANTHROPIC_API_KEY=sk-ant-api03-xxxxx

# Windows (PowerShell)
$env:ANTHROPIC_API_KEY = "sk-ant-api03-xxxxx"

# Windows (コマンドプロンプト)
set ANTHROPIC_API_KEY=sk-ant-api03-xxxxx

認証が完了すると、対話型のREPL（Read-Eval-Print Loop）が起動します。

╭─────────────────────────────────────────────╮
│ ✻ Welcome to Claude Code!                    │
│                                               │
│   /help for help, /clear to clear context    │
╰─────────────────────────────────────────────╯

>

起動オプション

Claude Codeにはさまざまな起動オプションがあります。

# 基本起動（対話モード）
claude

# 初期プロンプト付きで起動
claude "このプロジェクトの構造を説明して"

# 非対話モード（結果を出力して終了）
claude -p "package.jsonの依存関係を一覧して"

# 前回の会話を続ける
claude -c

# モデルを指定して起動
claude --model sonnet    # Sonnet 4.5（高速・低コスト）
claude --model opus      # Opus 4.6（最高性能）
claude --model haiku     # Haiku 4.5（最軽量）

# 追加ディレクトリを指定
claude --add-dir ../shared-lib

# パイプで入力を渡す
cat error.log | claude -p "このエラーの原因を分析して"

最初の対話を試す

起動したら、簡単な対話を試してみましょう。

> このプロジェクトの構造を教えて

Claudeは自動的にGlobツールでファイル構造を調べ、Readツールで重要なファイルを読み、プロジェクトの概要を説明してくれます。

次に、ファイルの内容について質問します。

> README.mdの内容を要約して

特定のファイルについて質問するときは、@記号でファイルを参照できます（オートコンプリート対応）。

> @src/index.ts のメイン関数を説明して

権限モードの理解

Claude Codeがファイル操作やコマンド実行をする際、権限の承認が求められます。これは安全機構です。

権限モードは Shift+Tab で切り替えられます。

初心者はDefaultモードで始め、Claudeの動作を理解してからAuto-Acceptに移行することをお勧めします。

/init でプロジェクトを設定

新しいプロジェクトで最初に実行すべきコマンドがあります。

> /init

このコマンドはプロジェクトを分析し、CLAUDE.mdファイルを自動生成します。CLAUDE.mdはClaudeへの「指示書」で、プロジェクト固有のルールやコマンドを記述します。詳細は第6講で学びます。

基本的なキーボードショートカット

演習課題

1. Claude Codeをインストールし、claude --versionでバージョンを確認してください
2. 任意のプロジェクトディレクトリでclaudeを起動し、認証を完了してください
3. 「このプロジェクトの構造を教えて」とプロンプトを入力し、Claudeの応答を確認してください
4. /initを実行して、CLAUDE.mdが生成されることを確認してください
5. Shift+Tabで権限モードを切り替え、各モードの表示を確認してください

参考文献

• Anthropic公式「Claude Code CLI Reference」 https://docs.anthropic.com/en/docs/claude-code/cli-reference
• Anthropic公式「Getting Started with Claude Code」 https://docs.anthropic.com/en/docs/claude-code/getting-started
• Node.js公式「Downloads」 https://nodejs.org/en/download/

ファイル操作とコード編集 — AIと一緒にコードを書く

Claude Codeの内蔵ツール

Claude Codeがファイルを操作する際、内部で専用のツールを使い分けています。これらのツールを理解することで、Claudeへの指示がより的確になります。

読み取り系（Read, Glob, Grep）は自動許可されるため、Claudeはコードベースを自由に探索できます。書き込み系（Edit, Write, Bash）は安全のため承認が必要です。

Read — ファイルを読む

Readツールはファイルの内容を取得します。テキストファイルだけでなく、画像（PNG, JPG）、PDF、Jupyterノートブック（.ipynb）も読めます。

> src/components/Button.tsx の内容を見せて

Claudeは自動的にReadツールを使い、ファイルの全内容を取得します。大きなファイルの場合は、特定の行範囲だけを読むこともできます。

> package.json の1行目から20行目まで見せて

@記号でファイルを直接参照することもできます。オートコンプリートが効くので便利です。

> @src/utils/format.ts のformatDate関数を説明して

Glob — ファイルを検索する

Globツールはファイル名のパターンマッチングで検索します。

> src/ 以下のすべてのTypeScriptファイルを一覧して

Claudeは内部で **/*.ts のようなglobパターンを使って検索します。よく使うパターンをまとめます。

Grep — ファイル内容を検索する

Grepツールはripgrepベースの高速検索エンジンです。正規表現が使えます。

> プロジェクト全体で "TODO" コメントを検索して

> "useEffect" を使っているファイルを全部見つけて

検索のモードは3種類あります。

正規表現の例:

> "function\s+\w+Auth" というパターンで検索して

これで function loginAuth, function checkAuth 等がマッチします。

Edit — ファイルの一部を修正する

Editツールはファイル内の特定の文字列を別の文字列に置換します。ファイル全体を書き換えるのではなく、ピンポイントで修正するため、既存コードへの影響が最小限です。

> Button.tsx の背景色を blue から green に変更して

Claudeは内部で以下のような操作を行います。

Edit:
  file: src/components/Button.tsx
  old_string: "backgroundColor: 'blue'"
  new_string: "backgroundColor: 'green'"

replace_all オプションを使うと、ファイル内の全ての出現箇所を一括置換できます。変数名のリネームなどに便利です。

> Button.tsx 内の "isActive" を "isEnabled" にすべてリネームして

Write — ファイルを作成する

Writeツールはファイルを新規作成するか、既存ファイルを完全に上書きします。

> src/utils/validator.ts を新規作成して、メール・電話番号・
  URLのバリデーション関数を含めて

Claudeは要件に沿ったコードを生成し、Writeツールでファイルを作成します。VS Code拡張を使っている場合、差分ビューで変更内容を確認してから承認できます。

実践的なワークフロー

これらのツールを組み合わせた実践的なワークフローを見てみましょう。

バグ修正の流れ

> ログイン時に "Invalid token" エラーが出る問題を調査して修正して

Claudeの内部動作: 1. Grep で "Invalid token" を検索 → エラー発生箇所を特定 2. Read で関連ファイルを読み込み → コードの流れを理解 3. Glob で関連テストファイルを検索 → 既存テストを確認 4. Edit でバグを修正 → 最小限の変更 5. Bash でテストを実行 → 修正の検証

リファクタリングの流れ

> src/api/ のfetch呼び出しをすべてaxiosに移行して

Claudeの内部動作: 1. Grep で fetch( を全検索 → 対象ファイルを把握 2. Read で各ファイルの内容を確認 → 移行計画を立てる 3. Edit で各ファイルのfetchをaxiosに置換 → 段階的に修正 4. Bash で npm install axios → 依存パッケージ追加 5. Bash でテスト実行 → 動作確認

効果的なプロンプトのコツ

ファイル操作の指示をする際のコツをまとめます。

# 悪い例（曖昧）
> バグを直して

# 良い例（具体的）
> src/auth/login.ts の handleSubmit 関数で、
  パスワードが空の場合にバリデーションエラーを
  表示する処理が抜けている。修正してテストも書いて

# さらに良い例（パターン指定）
> @src/components/UserCard.tsx を参考にして、
  同じパターンで ProductCard コンポーネントを作成して。
  propsの型定義も含めて

演習課題

1. 任意のプロジェクトで「すべてのTODOコメントを検索して」と指示してください
2. 「README.mdに新しいセクション『開発環境』を追加して」と指示し、Editツールの動作を観察してください
3. 「src/ 以下で最も行数が多いファイルを5つ教えて」と指示し、Claudeがどのツールを使うか確認してください
4. 「新しいユーティリティ関数ファイル utils/string-helpers.ts を作成して」と指示し、Writeツールの動作を確認してください

参考文献

• Anthropic公式「Claude Code Tools」 https://docs.anthropic.com/en/docs/claude-code/tools
• ripgrep公式ドキュメント https://github.com/BurntSushi/ripgrep
• glob パターンリファレンス https://github.com/isaacs/node-glob

Bashツールとターミナル操作 — コマンド実行の自動化

Bashツールの役割

Claude Codeの中で最も強力なツールがBashです。シェルコマンドを直接実行できるため、ビルド、テスト、パッケージ管理、デプロイなど、開発のあらゆる段階を自動化できます。

> npm install を実行して
> テストを全部実行して
> Dockerコンテナを起動して

これらの指示に対して、Claudeは適切なコマンドを構築し、Bashツールで実行します。結果はClaudeのコンテキストに追加され、エラーが発生した場合は自動的に原因を分析して対処します。

コマンド実行の仕組み

Bashツールの主要パラメータを理解しましょう。

タイムアウトは最大10分（600,000ms）まで設定可能です。長時間かかるビルドやテストはバックグラウンドで実行できます。

> Next.jsのビルドを実行して（時間がかかるのでバックグラウンドで）

よく使うコマンドパターン

パッケージ管理

> expressとtypescriptの型定義をインストールして

Claudeは以下のようなコマンドを実行します。

npm install express
npm install -D @types/express

ビルドとテスト

> TypeScriptをコンパイルして、テストを実行して

npx tsc --noEmit && npm test

コマンドを && で連結することで、前のコマンドが成功した場合のみ次を実行します。

開発サーバー

> 開発サーバーをバックグラウンドで起動して

npm run dev  # バックグラウンドで実行

Docker操作

> docker-compose.ymlに従ってコンテナを起動して

docker compose up -d

!コマンドによるクイック実行

Claude CodeのREPL内で、!プレフィックスを使うとBashコマンドを直接実行できます。

> !git status
> !npm run build
> !ls -la src/

!コマンドの出力はClaudeのコンテキストに自動追加されます。これを活用して、コマンド結果をもとにClaudeに分析を依頼できます。

> !npm test 2>&1
> テスト結果を分析して、失敗しているテストの原因を説明して

パイプ入力

外部コマンドの結果をClaude Codeに渡すことも可能です。

# エラーログをClaudeに分析させる
cat error.log | claude -p "このエラーの原因と対処法を教えて"

# git diffの内容をレビューさせる
git diff | claude -p "この変更をレビューして"

# テスト結果を渡す
npm test 2>&1 | claude -p "失敗しているテストを修正して"

非対話モード（-pフラグ）を使うことで、CIパイプラインやスクリプトからClaude Codeを呼び出せます。

権限管理とセキュリティ

Bashツールは強力な分、セキュリティに注意が必要です。Claude Codeは安全なコマンドと危険なコマンドを区別します。

自動許可できるコマンド

settings.json で特定のコマンドパターンを事前許可できます。

{
  "permissions": {
    "allow": [
      "Bash(npm run *)",
      "Bash(git status)",
      "Bash(git diff *)",
      "Bash(npx tsc *)",
      "Bash(python -X utf8 *)"
    ]
  }
}

ワイルドカード * はスペースの後に配置し、任意の引数にマッチさせます。

拒否すべきコマンド

{
  "permissions": {
    "deny": [
      "Bash(rm -rf *)",
      "Bash(curl * | bash)",
      "Bash(sudo *)"
    ]
  }
}

deny ルールは allow より優先されます。

権限評価の順序

deny → ask → allow → デフォルト（確認を要求）

最初にdenyをチェックし、マッチしたら即座にブロックします。次にaskをチェックし、マッチしたら必ず確認を要求します。最後にallowをチェックし、マッチしたら自動許可します。

エラーハンドリング

コマンドが失敗した場合、Claudeは自動的にエラーを分析し、対処を試みます。

> npm run build を実行して

もしビルドエラーが発生した場合:

1. Claudeがエラーメッセージを読み取る
2. エラーの原因を特定（型エラー、依存関係不足など）
3. 修正案を提案または自動修正
4. 再ビルドして成功を確認

この「実行 → エラー → 修正 → 再実行」のループがClaude Codeのエージェント型の真骨頂です。

バックグラウンドタスク

長時間かかるコマンドはバックグラウンドで実行できます。

> フルテストスイートをバックグラウンドで実行して、
  終わったら結果を教えて

バックグラウンドタスクの状態は以下で確認できます。

演習課題

1. !node --version と !npm --version を実行して、出力を確認してください
2. 任意のプロジェクトで「依存パッケージをインストールしてビルドして」と指示してください
3. settings.json の permissions.allow に Bash(npm run *) を追加し、npmコマンドが自動許可されることを確認してください
4. 「テストを実行して、失敗があれば修正して」と指示し、Claudeのエラーハンドリングを観察してください

参考文献

• Anthropic公式「Claude Code Permissions」 https://docs.anthropic.com/en/docs/claude-code/permissions
• Anthropic公式「Claude Code Settings」 https://docs.anthropic.com/en/docs/claude-code/settings
• bash公式「Shell Builtin Commands」 https://www.gnu.org/software/bash/manual/

Git連携 — コミット・PR・ブランチをAIに任せる

Claude CodeとGit

Claude CodeはGit操作と深く統合されています。コードの変更をコミットし、プルリクエストを作成し、ブランチを管理するまでの一連のワークフローをAIに委ねることができます。

内部的にはBashツールで git コマンドを実行していますが、Claudeはgitのベストプラクティスを理解しており、適切なコミットメッセージの作成やブランチ戦略の提案も行います。

コミットの作成

最も頻繁に使うGit操作がコミットです。

> 現在の変更をコミットして

Claudeは以下の手順を自動実行します。

1. git status で変更ファイルを確認
2. git diff で変更内容を分析
3. git log で最近のコミットスタイルを確認
4. 変更内容に基づいたコミットメッセージを作成
5. 関連ファイルをステージング（git add）
6. コミットを実行

生成されるコミットメッセージの例:

feat: ユーザー認証にパスワードリセット機能を追加

- パスワードリセットフォームの実装
- メール送信APIの統合
- リセットトークンの生成と検証ロジック

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Claudeは自動的に Co-Authored-By タグを追加し、AI生成コードであることを明示します。

プルリクエストの作成

GitHub CLIの gh コマンドと連携して、プルリクエストを作成できます。

> この機能ブランチのPRを作成して

Claudeの動作:

1. ブランチの全コミットを分析（base branchからの差分）
2. 変更の概要・目的を理解
3. PRタイトル（70文字以内）を生成
4. 詳細な説明文を作成
5. gh pr create でPRを作成

PRの説明文は以下の形式です。

## Summary
- ユーザー認証にパスワードリセット機能を追加
- メールテンプレートの新規作成
- 入力バリデーションの強化

## Test plan
- [ ] パスワードリセットフォームの表示確認
- [ ] メール送信の動作確認
- [ ] 無効なトークンでのエラーハンドリング確認

🤖 Generated with Claude Code

ブランチ操作

> feature/password-reset ブランチを作成して切り替えて

git checkout -b feature/password-reset

ブランチの比較や差分確認も自然言語で指示できます。

> mainブランチとの差分を見せて
> このブランチで変更した全ファイルの一覧を出して
> 直近5コミットの内容を要約して

コードレビュー

Claude Codeはコードレビューにも活用できます。

> このブランチの変更をレビューして。セキュリティと
  パフォーマンスの観点で問題がないか確認して

Claudeは差分を分析し、以下の観点でレビューを行います。

• セキュリティ: SQLインジェクション、XSS、認証の不備
• パフォーマンス: N+1クエリ、不要な再レンダリング
• コード品質: 命名規則、DRY原則、型安全性
• テスト: テストカバレッジ、エッジケースの見落とし

Git Worktree で並行作業

複数のタスクを同時に進める場合、Git Worktreeが便利です。

# 別のworktreeを作成
git worktree add ../project-feature-a -b feature-a

# 新しいworktreeでClaude Codeを起動
cd ../project-feature-a
claude

各worktreeは完全に独立したファイルシステムを持つため、複数のClaude Codeセッションが互いに干渉しません。

安全に使うためのルール

Claude CodeのGit操作には、組み込みの安全機構があります。

やらないこと（Claudeの制約）

• git push --force は明示的な指示がない限り実行しない
• git reset --hard は確認なしに実行しない
• main/masterへの直接force pushは警告を出す
• .env や認証情報を含むファイルはコミットしない
• コミットを勝手に修正（amend）しない

推奨設定

プロジェクトの settings.json でGitコマンドを事前許可しておくと便利です。

{
  "permissions": {
    "allow": [
      "Bash(git status)",
      "Bash(git diff *)",
      "Bash(git log *)",
      "Bash(git add *)",
      "Bash(git commit *)",
      "Bash(git checkout *)",
      "Bash(git branch *)"
    ],
    "ask": [
      "Bash(git push *)"
    ]
  }
}

git push は ask に設定し、常に確認を求めるのが安全です。

PRからのセッション再開

GitHub PRとClaude Codeセッションを紐づけることができます。

# PRからセッションを再開
claude --from-pr 123

これにより、PRのコンテキスト（コメント、レビュー指摘）をClaudeが把握した状態で作業を再開できます。レビュー指摘の対応が効率的になります。

演習課題

1. 任意のプロジェクトで「現在の変更をコミットして」と指示し、Claudeが生成するコミットメッセージを確認してください
2. 「直近10コミットの傾向を分析して」と指示し、コミットメッセージのスタイル分析を確認してください
3. テスト用ブランチを作成し、簡単な変更を加えた後、「PRを作成して」と指示してみてください
4. 「mainブランチとの差分をレビューして」と指示し、Claudeのコードレビュー能力を確認してください

参考文献

• Anthropic公式「Common Workflows — Git Operations」 https://docs.anthropic.com/en/docs/claude-code/common-workflows
• GitHub CLI公式「gh pr create」 https://cli.github.com/manual/gh_pr_create
• Git公式「git-worktree」 https://git-scm.com/docs/git-worktree

CLAUDE.mdとメモリ — AIへの指示書を書く

なぜAIに指示書が必要なのか

Claude Codeは優秀なエンジニアですが、あなたのプロジェクト固有のルールは知りません。「テストは vitest で書く」「コミットメッセージは日本語」「APIキーは .env.local に入れる」——こうしたプロジェクト固有の慣習は、明示的に伝える必要があります。

CLAUDE.mdは、Claudeが毎回の会話の冒頭で自動的に読み込む特別なファイルです。ここに書かれた指示は、すべてのセッションで一貫して適用されます。人間の新メンバーに渡すオンボーディングドキュメントのAI版と考えてください。

CLAUDE.mdの階層構造

Claude Codeは複数のレベルでCLAUDE.mdを読み込みます。上位ほど優先度が高くなります。

CLAUDE.local.md は自動的に .gitignore に追加されるため、個人的な設定（ローカルのパスやAPIキーの場所など）を安全に記述できます。

効果的なCLAUDE.mdの書き方

基本構成

# プロジェクト名

## ビルド・テスト・デプロイ
- ビルド: `npm run build`
- テスト全体: `npm test`
- 単一テスト: `npm test -- --filter "テスト名"`
- リント: `npm run lint`
- デプロイ: `npm run deploy`（mainブランチのみ）

## コード規約
- TypeScript strict mode必須
- コンポーネントは関数コンポーネントのみ（class不可）
- スタイルはTailwind CSS（CSS Modulesは使わない）
- コミットメッセージは日本語、Conventional Commits形式

## アーキテクチャ
- フロントエンド: Next.js 15 (App Router)
- バックエンド: Supabase (PostgreSQL + Auth)
- 状態管理: Zustand（Reduxは使わない）

## 注意事項
- IMPORTANT: .envファイルは絶対にコミットしないこと
- テストは必ずvitestで書く（jestは使わない）

書き方のコツ

簡潔に保つ: Claudeがコードから推測できることは書かない。

# 悪い例（冗長）
TypeScriptはJavaScriptのスーパーセットで、
静的型付けを提供するプログラミング言語です...

# 良い例（簡潔）
- TypeScript strict mode必須
- any型は禁止、unknown + 型ガードを使用

重要な指示を強調する:

IMPORTANT: データベースのマイグレーションは必ずPR経由で行うこと
YOU MUST: テストが通らない変更はコミットしないこと

「IMPORTANT」「YOU MUST」「NEVER」などの強調表現は、Claudeの注意を引くのに効果的です。

/init コマンドで自動生成

/init コマンドを実行すると、Claudeがプロジェクトを分析して CLAUDE.md の雛形を自動生成します。

> /init

Claudeは以下を分析します: - package.json（依存関係、スクリプト） - tsconfig.json（TypeScript設定） - .eslintrc（リント設定） - ディレクトリ構造（フレームワーク判定） - 既存のREADME.md

生成された CLAUDE.md は必要に応じて手動で調整してください。

ルールファイルによるモジュール化

CLAUDE.md が肥大化した場合、.claude/rules/ ディレクトリにトピック別のファイルを分割できます。

.claude/rules/
  code-style.md      # コーディング規約
  testing.md         # テスト方針
  security.md        # セキュリティルール
  api-design.md      # API設計ガイドライン

特定のファイルにのみ適用するルールも定義できます。

---
paths:
  - "src/api/**/*.ts"
---
# APIルール
- レスポンスは必ず { data, error } 形式
- 認証が必要なエンドポイントにはmiddlewareを適用
- エラーコードはHTTPステータスに準拠

この paths フロントマターにより、src/api/ 以下のファイルを編集する場合にのみこのルールが適用されます。

自動メモリ（Auto Memory）

Claude Codeには自動メモリ機能があります。セッション中に学んだパターンや発見をClaudeが自動的にメモファイルに保存します。

保存先: ~/.claude/projects/<project>/memory/MEMORY.md

MEMORY.md の先頭200行がセッション開始時に自動読み込まれます。トピック別のファイル（debugging.md, api-conventions.md など）を作成し、MEMORY.md からリンクすることもできます。

メモリの確認・編集:

> /memory

このコマンドでシステムエディタが開き、メモリファイルを直接編集できます。

メモリに保存されるもの

• プロジェクトのアーキテクチャパターン
• デバッグで発見した問題と解決策
• ユーザーの好み（コードスタイル、ワークフロー）
• 重要なファイルパス

メモリに保存されないもの

• 一時的なタスクの詳細
• 検証されていない推測
• CLAUDE.mdと重複する情報

@import でファイルを参照

CLAUDE.md内で他のファイルを参照できます。

プロジェクト概要は @README.md を参照。
Git運用ルールは @docs/git-workflow.md に記載。
個人設定は @~/.claude/my-preferences.md を参照。

@ 構文で参照されたファイルはClaudeのコンテキストに自動的に含まれます。

演習課題

1. プロジェクトで /init を実行し、生成された CLAUDE.md の内容を確認してください
2. CLAUDE.md に「テストは vitest で書く」「コミットメッセージは日本語」などの独自ルールを追加してください
3. .claude/rules/ ディレクトリにルールファイルを作成し、特定のディレクトリにスコープを限定してください
4. /memory で自動メモリの内容を確認してください

参考文献

• Anthropic公式「Memory — CLAUDE.md」 https://docs.anthropic.com/en/docs/claude-code/memory
• Anthropic公式「Best Practices」 https://docs.anthropic.com/en/docs/claude-code/best-practices
• Conventional Commits仕様 https://www.conventionalcommits.org/ja/

MCPサーバー連携 — 外部ツール・データベースとの統合

MCPとは何か

MCP（Model Context Protocol）は、AIツールと外部データソースを接続するためのオープンスタンダードです。Anthropicが策定し、業界標準として普及が進んでいます。

MCPなしの場合、Claude Codeは「ファイルシステムとターミナル」だけが作業空間です。MCPを使うと、データベース、Issueトラッカー、デザインツール、クラウドサービスなどにClaude Codeから直接アクセスできます。

MCPなし:
  Claude Code ──→ ローカルファイル + ターミナル

MCPあり:
  Claude Code ──→ ローカルファイル + ターミナル
              ──→ Supabase (データベース)
              ──→ GitHub (Issues, PRs)
              ──→ Figma (デザイン)
              ──→ Slack (メッセージ)
              ──→ Notion (ドキュメント)
              ──→ Sentry (エラー監視)

MCPサーバーの追加

MCPサーバーは claude mcp add コマンドで追加します。3つのトランスポート方式があります。

HTTP方式（推奨）

リモートサーバーへHTTP接続します。最も簡単で推奨される方式です。

# Notion連携
claude mcp add --transport http notion https://mcp.notion.com/mcp

# GitHub連携
claude mcp add --transport http github https://api.githubcopilot.com/mcp/

SSE方式

Server-Sent Eventsを使うリモートサーバーです。

claude mcp add --transport sse asana https://mcp.asana.com/sse

Stdio方式

ローカルプロセスとして起動するサーバーです。npmパッケージとして配布されるMCPサーバーが多いです。

# PostgreSQL直接接続
claude mcp add --transport stdio postgres -- \
  npx -y @modelcontextprotocol/server-postgres \
  postgresql://user:pass@localhost:5432/mydb

Windows注意: Stdio方式で npx を使う場合、cmd /c ラッパーが必要です。

claude mcp add --transport stdio my-server -- \
  cmd /c npx -y @some/mcp-package

設定のスコープ

MCPサーバーの設定は3つのスコープがあります。

プロジェクトスコープの例（.mcp.json）:

{
  "mcpServers": {
    "supabase": {
      "type": "http",
      "url": "https://mcp.supabase.com"
    },
    "context7": {
      "type": "http",
      "url": "https://mcp.context7.com"
    }
  }
}

人気のMCPサーバー

OAuth認証

多くのクラウドMCPサーバーはOAuth認証が必要です。

> /mcp

セッション内で /mcp コマンドを実行すると、MCPサーバーの一覧と認証状態が表示されます。未認証のサーバーを選択するとブラウザが開き、OAuth認証フローが始まります。

認証トークンはセキュアに保存され、自動的にリフレッシュされます。

実践例: Supabase連携

Supabase MCPサーバーを使うと、データベース操作を自然言語で行えます。

> Supabaseのusersテーブルに新しいカラム "avatar_url" を追加して

Claudeの動作: 1. MCPツール mcp__supabase__list_tables でテーブル構造を確認 2. MCPツール mcp__supabase__apply_migration でマイグレーション適用 3. MCPツール mcp__supabase__generate_typescript_types で型定義を更新

> 過去24時間のAPIエラーログを見せて

> RLSポリシーのセキュリティアドバイザリーを確認して

実践例: Context7でドキュメント検索

Context7 MCPサーバーを使うと、ライブラリの最新ドキュメントを検索できます。

> Next.jsのServer Actionsの最新の使い方を調べて

Claudeは内部でContext7のAPIを呼び出し、最新のドキュメントとコード例を取得します。AIの知識カットオフに依存せず、常に最新の情報にアクセスできます。

MCPサーバーの管理

# 一覧表示
claude mcp list

# 詳細確認
claude mcp get supabase

# 削除
claude mcp remove supabase

# セッション内でステータス確認
/mcp

演習課題

1. claude mcp list で現在のMCPサーバー設定を確認してください
2. Context7 MCPサーバーを追加し、任意のライブラリのドキュメントを検索してみてください
3. プロジェクトで使っているデータベースやAPIサービスのMCPサーバーがあるか調べてください
4. /mcp コマンドで認証状態を確認し、必要に応じてOAuth認証を行ってください

参考文献

• Anthropic公式「MCP — Model Context Protocol」 https://docs.anthropic.com/en/docs/claude-code/mcp
• MCP仕様「Model Context Protocol Specification」 https://modelcontextprotocol.io/
• MCP公式サーバー一覧 https://github.com/modelcontextprotocol/servers

フックとカスタマイズ — ワークフローの自動化

フックとは何か

Claude Codeのフックは、特定のイベントが発生したときに自動実行されるシェルコマンドやLLMプロンプトです。CLAUDE.mdの指示が「アドバイス」であるのに対し、フックは確実に実行される自動化ルールです。

例えば、以下のような自動化が可能です:

• ファイル編集後にリントを自動実行
• コミット前にテストを自動実行
• セッション開始時に環境変数を設定
• 特定のコマンドの実行をブロック

フックのイベント一覧

Claude Codeのライフサイクルに沿って、多数のイベントポイントが用意されています。

フックの設定方法

settings.json にフックを定義します。

{
  "hooks": {
    "PreToolUse": [
      {
        "matcher": "Edit",
        "hooks": [
          {
            "type": "command",
            "command": "echo 'ファイル編集が行われます'"
          }
        ]
      }
    ]
  }
}

matcher の仕組み

matcher はフックを適用するツールやイベントを絞り込みます。

フックの3つのタイプ

1. Command型（シェルコマンド）

最も一般的なタイプです。シェルコマンドを実行します。

{
  "type": "command",
  "command": "npm run lint --fix"
}

入力: stdin にJSON形式のイベントデータが渡されます。 出力: exit code で結果を伝えます。

2. Prompt型（LLM判定）

LLMにフックのコンテキストを渡し、Yes/Noの判定を求めます。

{
  "type": "prompt",
  "prompt": "この変更はセキュリティポリシーに違反していませんか？"
}

コードレビューの自動化や、特定のパターンの検出に使えます。

3. Agent型（サブエージェント）

Read, Grep, Globなどのツールを使えるサブエージェントを起動します。

{
  "type": "agent",
  "prompt": "変更されたファイルにTODOコメントが残っていないか確認してください"
}

実践的なフック例

ファイル編集後にリント実行

{
  "hooks": {
    "PostToolUse": [
      {
        "matcher": "Edit",
        "hooks": [
          {
            "type": "command",
            "command": "npx eslint --fix $(echo $CLAUDE_TOOL_INPUT | jq -r '.file_path')"
          }
        ]
      }
    ]
  }
}

完了通知（Windows）

{
  "hooks": {
    "Stop": [
      {
        "matcher": "",
        "hooks": [
          {
            "type": "command",
            "command": "start /b powershell -ExecutionPolicy Bypass -File notify.ps1"
          }
        ]
      }
    ]
  }
}

Claudeの応答が完了するたびにWindowsの通知を表示します。長時間のタスクを待っている間に便利です。

危険なコマンドのブロック

{
  "hooks": {
    "PreToolUse": [
      {
        "matcher": "Bash",
        "hooks": [
          {
            "type": "command",
            "command": "bash -c 'input=$(cat); if echo \"$input\" | grep -q \"rm -rf\"; then echo \"rm -rf は禁止です\" >&2; exit 2; fi'"
          }
        ]
      }
    ]
  }
}

exit code 2 を返すとClaudeの操作をブロックし、stderr のメッセージがClaudeに伝えられます。

スラッシュコマンド

Claude Codeには組み込みのスラッシュコマンドがあり、よく使う操作をショートカットできます。

カスタムスラッシュコマンド（Skills）

独自のスラッシュコマンドを作成できます。

~/.claude/skills/fix-issue/SKILL.md    # 個人用
.claude/skills/fix-issue/SKILL.md      # プロジェクト用

SKILL.md の例:

---
name: fix-issue
description: GitHubのIssueを修正する
allowed-tools: Read, Grep, Bash, Edit
---
GitHub Issue #$ARGUMENTS を修正してください。
1. `gh issue view $0` でIssueの内容を確認
2. 関連コードを調査して修正
3. テストを書いて実行
4. コミットを作成

使用方法:

> /fix-issue 42

演習課題

1. settings.json にStop フックを追加し、Claudeの応答完了時に通知を表示してください
2. PreToolUse フックで特定のBashコマンドをブロックしてみてください
3. /compact でコンテキストを圧縮し、使用量の変化を /context で確認してください
4. カスタムSkillを1つ作成し、/スキル名 で実行できることを確認してください

参考文献

• Anthropic公式「Hooks」 https://docs.anthropic.com/en/docs/claude-code/hooks
• Anthropic公式「Skills（Slash Commands）」 https://docs.anthropic.com/en/docs/claude-code/skills
• Anthropic公式「Settings」 https://docs.anthropic.com/en/docs/claude-code/settings

エージェント型ワークフロー — 複雑なタスクを自律的に解決する

エージェントループの仕組み

Claude Codeの最大の特徴はエージェントループです。単純な質問応答ではなく、計画→実行→検証→修正のサイクルを自律的に繰り返します。

プロンプト受信
  → 計画を立てる
    → ツールを使って調査（Read, Grep, Glob）
      → 変更を実行（Edit, Write, Bash）
        → 結果を検証（Bash でテスト実行）
          → 問題があれば修正を繰り返す
            → 完了を報告

このループは1回のプロンプトで数十回のツール呼び出しを行うこともあります。開発者が個々のステップを指示する必要はなく、最終的なゴールだけを伝えれば、Claudeが自律的に進めます。

プランモードの活用

複雑なタスクでは、まずプランモードで調査・設計を行い、その後実装に移ることが推奨されます。

プランモードへの移行

Shift+Tab を2回押す → Plan モードに切替

または:

> /plan

プランモードではClaude は読み取り専用で動作します。ファイルの読み込み、検索、分析は行いますが、編集やコマンド実行は行いません。

推奨ワークフロー

1. プランモードで調査
   > このプロジェクトの認証フローを調査して、
     パスワードリセット機能を追加するための実装プランを作って

2. プランをレビュー
   Claude が実装計画を提示 → ユーザーが確認・修正

3. 通常モードで実装
   Shift+Tab で Normal モードに切替
   > プランに従って実装を進めて

サブエージェントの活用

サブエージェントは、メインの会話とは別のコンテキストウィンドウで動作する独立したエージェントです。

なぜサブエージェントが必要か

Claude Codeのコンテキストウィンドウ（会話に含められる情報量）は有限です。大規模な調査をメインの会話で行うと、コンテキストが埋まって性能が低下します。

サブエージェントに調査を委任すると、メインの会話はクリーンに保たれ、要約された結果だけが返ってきます。

使い方

> サブエージェントを使って、プロジェクト全体のAPI
  エンドポイントを調査して一覧にまとめて

Claudeは自動的にTask（サブエージェント）ツールを使い、独立したコンテキストで調査を行います。

カスタムエージェントの定義

.claude/agents/ に専用エージェントを定義できます。

.claude/agents/security-reviewer.md

---
name: security-reviewer
description: コードのセキュリティレビューを実施
tools: Read, Grep, Glob, Bash
model: opus
---
あなたはシニアセキュリティエンジニアです。
以下の観点でコードをレビューしてください:
- インジェクション攻撃（SQL, XSS, コマンド）
- 認証・認可の不備
- シークレットのハードコーディング
- 安全でないデータ処理

ヘッドレスモード（自動化）

Claude Codeは非対話型のヘッドレスモードで動作できます。CI/CDパイプラインやスクリプトからの呼び出しに最適です。

# 単発のタスク実行
claude -p "このプロジェクトのリント警告をすべて修正して" \
  --allowedTools "Edit" "Bash(npm run lint *)" \
  --max-turns 20

# JSONで結果を取得
claude -p "package.jsonの依存関係を分析して" \
  --output-format json

# コスト上限を設定
claude -p "テストカバレッジを80%以上にして" \
  --max-budget-usd 5.00

バッチ処理

複数のファイルに同じ操作を適用する場合:

for file in $(find src -name "*.js" -type f); do
  claude -p "このファイルをTypeScriptに変換して: $file" \
    --allowedTools "Edit" "Write" "Read" \
    --max-turns 10
done

コンテキスト管理戦略

エージェント型ワークフローで最も重要なのはコンテキスト管理です。

/clear — タスク間のリセット

無関係なタスク間では必ず /clear を実行してください。前のタスクの情報が残っていると、混乱の原因になります。

> /clear
> 次のタスク: ユーザープロフィール機能を実装して

/compact — 長い会話の圧縮

会話が長くなった場合、/compact で要約できます。

> /compact API設計の決定事項に焦点を当てて圧縮して

フォーカス指示を添えることで、重要な情報を優先的に残せます。

コンテキスト使用量の確認

> /context

カラーグリッドでコンテキストの使用状況を可視化できます。

チェックポイントと巻き戻し

Claude Codeはすべてのアクションでチェックポイントを作成します。

Esc + Esc → Rewind メニュー

巻き戻しオプション:

これにより、Claudeの変更が期待通りでなかった場合に安全にやり直せます。

Writer/Reviewer パターン

品質を最大化するために、2つのセッションを使い分ける手法があります。

セッション A（Writer）:
  > 認証機能を実装して

セッション B（Reviewer）: ← 新しいターミナルで起動
  > セッションAで実装された認証機能のコードを
    レビューして。セキュリティとテストの観点で

Reviewerは新しいコンテキストで動作するため、Writerの思い込みに影響されず、客観的なレビューが可能です。

効果的なプロンプトの書き方

エージェント型ワークフローでは、プロンプトの質がClaudeの性能に直結します。

# 悪い例
> メール機能を作って

# 良い例
> src/features/email/ にメール送信機能を実装して。
  以下の要件:
  - SendGridのAPIを使用（@types/sendgrid のパターン参照）
  - テンプレートエンジンはhandlebars
  - エラー時はリトライ（最大3回、指数バックオフ）
  - テストはvitest（src/features/auth/ のテストパターンを参考に）
  実装後にテストを実行して全パスすることを確認して

ポイント: - 参照すべきパターンを具体的に指定 - 検証方法（テスト実行）を含める - 技術選定の判断を事前に提供

演習課題

1. プランモードで「このプロジェクトのアーキテクチャを分析して」と指示し、Claudeの調査プロセスを観察してください
2. /compact を実行し、/context で圧縮前後のコンテキスト使用量を比較してください
3. ヘッドレスモードで claude -p "README.mdを要約して" --output-format json を実行してください
4. Esc+Esc で巻き戻しメニューを開き、チェックポイントの一覧を確認してください

参考文献

• Anthropic公式「Common Workflows」 https://docs.anthropic.com/en/docs/claude-code/common-workflows
• Anthropic公式「Best Practices — Context Management」 https://docs.anthropic.com/en/docs/claude-code/best-practices
• Anthropic公式「Claude Code Sub-agents」 https://docs.anthropic.com/en/docs/claude-code/sub-agents

実践プロジェクト — Claude Codeで本格的なアプリを作る

本講義の目標

これまでの9講義で学んだ知識を統合し、Claude Codeを使って実際のアプリケーションを構築します。フルスタックのTODOアプリを題材に、「プロンプト設計 → 実装 → テスト → デプロイ」の一連のワークフローを体験します。

プロジェクト: フルスタックTODOアプリ

技術スタック

完成イメージ

• ユーザー登録・ログイン機能
• TODOの作成・編集・削除・完了切替
• カテゴリによるフィルタリング
• レスポンシブデザイン

ステップ1: プロジェクトの初期化

まずClaude Codeを起動し、プロジェクトを作成します。

> Next.js 15のプロジェクトを作成して。
  App Router, TypeScript, Tailwind CSS, ESLintを有効にして。
  プロジェクト名は "todo-app"

Claudeは以下を実行します:

npx create-next-app@latest todo-app \
  --typescript --tailwind --eslint --app \
  --src-dir --import-alias "@/*"

プロジェクトが作成されたら、CLAUDE.mdを設定します。

> /init

自動生成されたCLAUDE.mdに以下を追加します:

## プロジェクト固有ルール
- Supabaseをバックエンドに使用
- Server Componentsを優先、クライアントは最小限
- テストはvitest + @testing-library/react
- コミットメッセージは日本語

ステップ2: データベース設計

Supabase MCPサーバーを使ってデータベースを設計します。

> Supabaseにtodosテーブルを作成して。
  カラム: id(uuid), user_id(uuid, auth.users参照),
  title(text), description(text, nullable),
  category(text, default 'general'),
  is_completed(boolean, default false),
  created_at(timestamptz), updated_at(timestamptz)。
  RLSポリシーも設定して、本人のみCRUD可能にして

Claudeは mcp__supabase__apply_migration ツールを使い、テーブルとRLSポリシーを作成します。

-- Claudeが生成するマイグレーション例
CREATE TABLE todos (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE NOT NULL,
  title TEXT NOT NULL,
  description TEXT,
  category TEXT DEFAULT 'general',
  is_completed BOOLEAN DEFAULT false,
  created_at TIMESTAMPTZ DEFAULT now(),
  updated_at TIMESTAMPTZ DEFAULT now()
);

ALTER TABLE todos ENABLE ROW LEVEL SECURITY;

CREATE POLICY "Users can manage their own todos"
  ON todos FOR ALL
  USING (auth.uid() = user_id)
  WITH CHECK (auth.uid() = user_id);

ステップ3: 認証の実装

> Supabase Authを使ったログイン・サインアップページを実装して。
  メール/パスワード認証を使用。
  src/app/login/page.tsx と src/app/signup/page.tsx を作成して。
  認証後は / にリダイレクト

Claudeはサーバーコンポーネントとクライアントコンポーネントを適切に使い分け、フォーム送信はServer Actionsで処理します。

ステップ4: TODOのCRUD実装

> TODOのCRUD機能を実装して。
  - src/app/page.tsx: TODO一覧（Server Component）
  - src/components/TodoItem.tsx: 個別のTODO表示
  - src/components/AddTodoForm.tsx: 新規追加フォーム
  - src/actions/todo.ts: Server Actions（作成・更新・削除）
  @src/app/login/page.tsx のパターンを参考にして

ここで重要なのは @src/app/login/page.tsx のパターンを参考にして という指示です。Claudeに既存のコードパターンを参照させることで、プロジェクト内のコードスタイルに一貫性を持たせます。

ステップ5: UIの改善

> Tailwind CSSでUIを改善して。
  - ダークモード対応
  - カテゴリごとの色分け表示
  - 完了済みTODOのスタイル変更（取り消し線）
  - スマホ対応のレスポンシブデザイン
  - ローディングスケルトン（loading.tsx）

ステップ6: テストの作成

> vitestとTesting Libraryでテストを書いて。
  - src/actions/todo.test.ts: Server Actionsの単体テスト
  - src/components/TodoItem.test.tsx: コンポーネントテスト
  テストを実行して全パスすることを確認して

Claudeは必要な依存関係のインストール、テストファイルの作成、テスト実行までを自動で行います。

ステップ7: コミットとPR

> これまでの変更をコミットして。
  機能ごとに分けて複数コミットにして

Claudeは変更をグループ化し、意味のあるコミットに分割します。

feat: Supabaseデータベースとテーブル設計
feat: ユーザー認証（ログイン・サインアップ）
feat: TODOのCRUD機能実装
style: ダークモード対応とレスポンシブデザイン
test: Server ActionsとコンポーネントのテストPR作成:

> PRを作成して

ステップ8: デプロイ

> Vercelにデプロイする手順を教えて。
  環境変数の設定も含めて

プロンプト設計のベストプラクティス（総まとめ）

本講座全体を通じて学んだ、効果的なプロンプトの原則をまとめます。

1. 検証手段を含める

> テストを書いて → テストを実行して → 全パスを確認して

Claudeに自己検証させることで、品質が大幅に向上します。これは最も効果の高いテクニックです。

2. 既存パターンを参照させる

> @src/features/auth/ のパターンに従って、
  新しいプロフィール機能を実装して

3. 具体的な制約を与える

> Zustandを使って（Reduxは使わない）
> Server Componentsを優先（クライアントは最小限）

4. 段階的に進める

大きなタスクは分割して進めます。

Step 1: > データベース設計をして
Step 2: > 認証を実装して
Step 3: > CRUD機能を実装して
Step 4: > テストを書いて

5. コンテキストを管理する

> /clear     # タスク間でクリア
> /compact   # 長い会話を圧縮
> /context   # 使用量を確認

これからの学習ロードマップ

Claude Codeの基礎を習得した後の次のステップを提案します。

演習課題

1. 本講義のTODOアプリをClaude Codeで実際に作成してください（Supabaseアカウント不要の場合はローカルストレージ版に変更可）
2. 作成したアプリにフィルタリング機能（カテゴリ、完了/未完了）を追加してください
3. テストカバレッジを確認し、不足しているテストをClaude Codeに書かせてください
4. CLAUDE.mdを充実させ、プロジェクト固有のルールを10個以上記述してください
5. カスタムSkillを1つ作成し、開発ワークフローを自動化してください

参考文献

• Anthropic公式「Claude Code Best Practices」 https://docs.anthropic.com/en/docs/claude-code/best-practices
• Anthropic公式「Common Workflows」 https://docs.anthropic.com/en/docs/claude-code/common-workflows
• Next.js公式「Getting Started with App Router」 https://nextjs.org/docs/app
• Supabase公式「Auth with Next.js」 https://supabase.com/docs/guides/auth/server-side/nextjs