Module 3 : Claude Code 基礎

3.1 Claude Code とは？ — Webチャット版との決定的な違い

Claude Codeは、Anthropic社が提供する「ターミナルで動くAIエージェント」です。単なるチャットボットではなく、あなたのPCの中に常駐してファイルを読み書きし、コマンドを実行し、ブラウザを開き、Gitに push する、まさに AI エンジニアがあなたの隣で働いているような体験ができます。

Webチャット vs Claude Code — 決定的な3つの違い

「エージェント」とはどういう意味？

単にテキストで答えるだけでなく、自律的に一連のタスクを実行できるAIを「AIエージェント」と呼びます。Claude Code は次のサイクルを自動で回します:

1. 計画: 依頼を受けたら、必要な手順を考える
2. 実行: ファイル読取・編集・コマンド実行を自分で行う
3. 検証: 出力を見て、エラーなら自分で直す
4. 報告: 最終成果を人間に返す

HP制作で Claude Code が最強な3つの理由

3.2 事前準備 — ターミナル超入門 + アカウント・環境

A-1. ターミナルとは何か？

ターミナルとは、PC に「文字で命令を送る」ための窓口アプリです。普段マウスで操作していること（フォルダを開く、ファイルを移動する、アプリを起動するなど）を、キーボードで「コマンド」を入力することで実行します。

私たちが普段触れているのは「グラフィカル画面（GUI）」で、これは美しいですが AIが操作するには遠い世界 です。一方ターミナル（CUI）は文字ベースなので、AIが直接コマンドを書いて実行できる場所 なのです。Claude Code はこのターミナル上で動きます。

A-2. ターミナルの開き方

A-3. 最低限覚える5つのコマンド

これだけで Claude Code を始められます。まずは1つずつ実際に打って Enter してみてください。

A-4. 実際にやってみる（5分エクササイズ）

ターミナルで下記を順番に打ってみてください。1行ずつ Enter キーを押します:

# 1. 今どこにいる？
pwd

# 2. このフォルダの中身は？
ls

# 3. ホーム（自分の家）に戻る
cd ~

# 4. 学習用フォルダを作る
mkdir claude-lesson

# 5. そのフォルダに入る
cd claude-lesson

# 6. もう一度今どこ？を確認
pwd

最後の pwd で /Users/あなたの名前/claude-lesson（または /home/...）が出れば成功！ これで「Claude Code を起動できる準備」が完了します。

📖 Part B: Claude アカウントと料金プラン

B-1. Claude アカウント作成（無料・5分）

1. claude.ai にアクセス
2. 「Continue with Google」または「Continue with Email」を選択
   （個人で使う Gmail / Outlook どちらでも OK）
3. 電話番号認証（SMS）: 国を「Japan +81」、自分の携帯番号を入力 → 6桁の認証コードを SMS で受け取り入力
4. 「同意して進む」→ ホーム画面に到達すれば成功

B-2. 料金プランの選択

Claude Code を使うには Pro 以上の有料プランが必要です（無料アカウントは Web チャットのみ）。

B-3. 支払い方法の登録

claude.ai → 左上「Settings (歯車)」→ 「Billing」→ クレジットカード番号、有効期限、CVCコード、住所を登録します。Visa / MasterCard / Amex が利用可能。日本の発行カードもOK。

📖 Part C: PC 環境のチェック

下記いずれかに当てはまれば Claude Code を快適に動かせます:

自分の環境を確認するコマンド

ターミナルで以下を打ち、結果をメモしておくと次レッスンで役立ちます:

# Mac / Linux: OS バージョン確認
sw_vers       # ← Mac の場合
uname -a      # ← Mac / Linux 共通

# CPU タイプ（Mac）
uname -m      # arm64 = Apple Silicon、x86_64 = Intel Mac

# 空き容量を確認
df -h ~

# Windows (PowerShell): OS確認
Get-ComputerInfo | Select-Object OsName, OsVersion, CsTotalPhysicalMemory

準備チェックリスト（次レッスンへ進む前に）

• ターミナルが開けて、pwd・ls・cd・mkdir が打てた
• claude.ai でアカウント作成し、ログインできた
• Claude Pro または Max プランに加入し、支払い方法を登録した
• PC に空き容量 5GB 以上ある
• Mac の場合、CPU タイプを確認した（Apple Silicon か Intel か）
• Windows の場合、WSL2 が入っているかを確認した（wsl --list）
• 学習用フォルダ ~/claude-lesson を作成した

3.3 インストール手順 — Step-by-Step 完全ガイド

Step 1: Homebrew をインストール（Mac / Linux）

Homebrew（ホームブリュー） は Mac/Linux 用の「ソフト管理ツール」です。これを入れておくと、後から多くのツールを brew install xxx の一行でインストールできます。Windows ユーザーは WSL2 (Ubuntu) を起動してからこのステップを実行してください（WSL2 内では Linux と同じ手順です）。

1-1. インストールコマンドを実行

ターミナルに下記を 1行で コピー&ペーストして Enter:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

1-2. 途中で起こる3つの場面

1. 「Press RETURN to continue」と出たら: Enter を1回押すだけ。
2. 「Password:」と聞かれたら: Mac ログイン時のパスワードを入力して Enter。画面には何も表示されませんが、ちゃんと入力されています。
3. 処理に5〜10分かかる: コマンドラインツール（Xcode CLT）も自動で入ります。コーヒーでも飲んで待機。

1-3. 完了後に必ずやる「PATH 設定」（Apple Silicon Mac の場合）

完了画面に「==> Next steps:」と表示されたら、その下の 2行のコマンドをコピーして実行します（Apple Silicon Mac の場合）:

echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> ~/.zprofile
eval "$(/opt/homebrew/bin/brew shellenv)"

※ Intel Mac の場合は /usr/local/bin/brew、Linux の場合は ~/.profile や /home/linuxbrew/.linuxbrew/bin/brew など、画面の指示に従ってください。

1-4. 動作確認 — Homebrew が使えるか？

brew --version

期待される出力:

Homebrew 4.4.x
...

これが出れば Step 1 完了 ✅。出ない場合は下記の「よくあるエラー」へ。

Step 2: Node.js をインストール

Node.js は JavaScript 実行環境。Claude Code の一部機能や、後で導入する npm（Node Package Manager） 経由のパッケージで必要になります。

2-1. Mac / Linux: Homebrew でインストール

brew install node

完了まで2〜5分。

2-2. Windows (WSL2): apt-get でインストール

# Ubuntu 22.04 / 24.04 の場合（推奨ノードバージョン）
curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt-get install -y nodejs

2-3. 動作確認

node --version
npm --version

期待される出力:

v22.10.0
10.9.0

バージョン番号が出れば Step 2 完了 ✅。v18.0.0 以上であれば Claude Code の動作要件を満たしています（v20+ 推奨）。

Step 3: Claude Code 本体のインストール

2つの方法から選べます。初心者には方法A（公式スクリプト）を推奨します。

curl -fsSL https://claude.ai/install.sh | bash

brew install anthropic/claude/claude-code

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

3-1. インストール実行

方法 A の場合、上のコマンドをコピペして Enter。30秒〜2分で完了します。

3-2. 動作確認

claude --version

期待される出力:

Claude Code 1.x.x

これが出れば Step 3 完了 ✅。

Step 4: 作業フォルダを作って起動 + 初回認証

4-1. 学習用フォルダを作って入る

mkdir ~/my-first-claude
cd ~/my-first-claude
pwd

pwd で /Users/あなたの名前/my-first-claude が出れば OK。

4-2. Claude Code を起動

claude

4-3. 初回認証フロー

初回起動時は、自動でブラウザが開いて Claude アカウントとの紐付けが行われます:

1. ターミナルに 「Open this URL in your browser to authenticate:」 と出る
2. ブラウザが自動で開く（または手動でその URL を貼り付ける）
3. claude.ai にログイン済みなら「Authorize Claude Code」ボタンが出るのでクリック
4. 「✓ Successfully authenticated!」と表示されたらブラウザを閉じる
5. ターミナルに自動で戻り、ようこそ画面が出る

4-4. 起動画面（これが見えれば成功）

╭───────────────────────────────────────────╮
│  ✻ Welcome to Claude Code!                │
│                                           │
│   /help for help, /status for info        │
│                                           │
│   cwd: /Users/takeshi/my-first-claude     │
╰───────────────────────────────────────────╯

 > 

> の後ろに日本語で指示を打てます。これでセットアップ完了 🎉。次のレッスン 3.4 で「初めての対話」を体験します。

4-5. 終了するには

Claude Code を終了したいときは:

/exit

または Ctrl + D でも OK。再度起動するには claude を再実行するだけ。

📋 インストール完了チェック

• brew --version でバージョン番号が出る
• node --version で v18 以上が出る
• claude --version でバージョン番号が出る
• claude で起動画面 (Welcome to Claude Code!) が出る
• 初回認証が完了し、claude.ai と接続できた

3.4 初めての対話 — 5つの体験で完全マスター

体験 1: 自己紹介させてみる（30秒で安心する）

まず安全な「読み取り専用」の依頼で慣らします。下記をターミナルに入力して Enter:

こんにちは。あなたについて教えてください。
このフォルダで何ができますか？

こんな応答が返ります（一例）

こんにちは！私は Claude Code、Anthropic 社の AI エージェントです。

このフォルダ（/Users/takeshi/my-first-claude）は現在空のようです。
ここで以下のようなことができます:

1. **ファイル作成・編集**: HTML/CSS/JS、Markdown、Python など
2. **コマンド実行**: ビルド、テスト、git 操作
3. **検索**: フォルダ内の特定の文字列を探す
...

体験 2: ファイルを作らせてみる（許可プロンプトを覚える）

次に「ファイルを作る」というPCに影響する依頼を出します:

このフォルダに hello.txt を作って、
中身に「はじめまして、Claude Code！」と
書いてください。

「許可プロンプト」が出る

Claude Code は、ファイル作成・編集・削除、コマンド実行などPCに影響する操作の前に必ず確認画面を出します:

● Write(hello.txt)
  ⎿ I'll create hello.txt with the content you specified.

  Do you want to make this change?
  ❯ 1. Yes
    2. Yes, and don't ask again for this file
    3. No, and tell Claude what to do differently (esc)

数字キー 1 を押して Enter。Claude が hello.txt を作成し、内容を書き込みます。

確認: ファイルができたか？

Claude Code を一旦サスペンド（裏に回す）して別のターミナルで:

ls
cat hello.txt

hello.txt という名前と「はじめまして、Claude Code！」の中身が表示されれば成功 ✅

体験 3: ファイルを読んで要約させる（読み取り操作）

hello.txt の中身を読んで、
内容を要約してください。

読み取り操作には許可プロンプトが出ません（書き換えがないため）。Claude はすぐに内容を読み、要約を返します:

● Read(hello.txt)
  ⎿ Read 1 line

「はじめまして、Claude Code！」というメッセージが書かれた、
新しい挨拶のテキストファイルです。

体験 4: 複数ファイルをまとめて作る（連続作業）

このフォルダに
- index.html
- style.css
- script.js
の3ファイルを作ってください。
中身は「Hello World」と表示する
シンプルなサイトで。
作り終えたら open でブラウザで開いて。

Claude が以下のような流れで動きます:

1. ● Write(index.html) → 許可 → 作成
2. ● Write(style.css) → 許可 → 作成
3. ● Write(script.js) → 許可 → 作成
4. ● Bash(open index.html) → 許可 → 実行

各ステップで「Yes」を選ぶと、最終的に Mac の標準ブラウザで「Hello World」サイトが開きます🎉

体験 5: 修正・言い直し（対話で軌道修正）

AI なので時々ズレた応答が来ます。そんな時の言い直し方:

# ふわっとした指示
このフォルダのHTMLを読みやすくして

もし Claude が想定と違う書き換えをしたら、続けてこう打てば直してもらえます:

違います、見た目を変えずに
HTML の構造（インデント）だけ整えてください。
スペースは2つで揃えて。

具体的に「何を残し、何を変えてほしいか」を伝えるのがコツ。Claude Code は会話履歴を覚えているので、「さっきのは戻して、代わりに〜」と言えば前の状態に戻すこともできます。

その他、こんな指示も通ります

• 「このフォルダの構造をツリー表示して」
• 「index.html のタイトル部分だけ変更して」
• 「このフォルダ全体を zip にまとめて」
• 「現在の日本時刻をファイルに記録して」
• 「エラーメッセージを見て、何がダメか教えて」
• 「この HTML を Tailwind CSS でリファクタリングして」
• 「git init して最初のコミットを作って」

📋 体験完了チェック

• 体験1: 自己紹介の応答を受け取った
• 体験2: hello.txt を許可プロンプト経由で作成できた
• 体験3: ファイルの内容を読み上げてもらえた
• 体験4: 複数ファイルをまとめて作って、ブラウザで開けた
• 体験5: 言い直しで Claude の応答を修正できた

3.5 基本操作・スラッシュコマンド・モデル選択

必須キーボード操作

スラッシュコマンド（頻用）

モデルの使い分け — Haiku / Sonnet / Opus

3.6 CLAUDE.md とパーミッション — プロジェクトの設計図

Claude Code の真価は、プロジェクトごとの一貫性にあります。その中核が CLAUDE.md と .claude/ フォルダです。

CLAUDE.md — プロジェクトのメモリ

プロジェクトのルートに置くと、Claude Code が毎回起動時に自動で読み込むファイル。プロジェクト固有のルールをここに書けば、毎回説明する必要がなくなります。

# 私のカフェサイト プロジェクト

## 技術スタック
- 静的HTML/CSS/JS（フレームワーク不使用）
- デプロイ: Vercel

## 設計ルール
- 配色: ベージュ #F5E6D3 とダークブラウン #3E2723
- フォント: 見出しは 'Noto Serif JP'、本文は 'Noto Sans JP'
- CSS変数は :root に集約
- JavaScript は最小限、jQuery は使わない
- すべて日本語 / 絵文字は使わない

## よく使うコマンド
- デプロイ: `vercel --prod`
- ローカル起動: `python3 -m http.server 8080`

## 注意事項
- 画像は assets/images/ 配下に配置
- 本番環境変数は .env.production に記載

.claude/ フォルダ — 高度なカスタマイズ

プロジェクト配下に .claude/ フォルダを作ると、さらに細かい設定ができます:

パーミッション（権限）の仕組み

Claude Code は「安全第一」設計。危険な操作は毎回確認が入ります。頻繁に出る操作は、settings.json で事前許可できます:

// .claude/settings.json
{
  "permissions": {
    "allow": [
      "Bash(npm:*)",         // npm 系コマンドは全部OK
      "Bash(git:add)",       // git add は許可
      "Bash(git:commit)",    // git commit も許可
      "Write(**/*.md)",      // .md ファイルへの書込は許可
      "Edit(src/**)"         // src配下の編集は許可
    ],
    "deny": [
      "Bash(rm:-rf)",        // rm -rf は絶対禁止
      "Bash(sudo:*)"         // sudo も禁止
    ]
  }
}

3.7 拡張機能 — MCP と Skills で Claude を強化

Claude Code はそのままでも強力ですが、拡張機能を使うと真価を発揮します。2026年時点で押さえるべきは3つ:

① MCP (Model Context Protocol) — 外部連携の標準

MCPは、Claude に外部サービスの操作能力を与える仕組み。Anthropic が2024年末に公開した規格で、2026年現在 3,000以上の連携が存在します。

MCP の追加方法（例: GitHub連携）

# Claude Code を起動してから
claude mcp add github

# 認証を済ませれば、こう使える:
> GitHub で open している私のPRを全部リストして、
  一番レビューが必要なものを教えて

② Skills — スラッシュコマンドをパッケージ化

Claude Code 2026版の推奨構成。プロジェクト特有のワークフローを再利用可能なスキルとして定義できます。

# .claude/skills/deploy-staging/skill.md
---
description: ステージング環境にデプロイ
---

以下の手順で staging 環境にデプロイしてください:
1. main ブランチから staging ブランチにマージ
2. テスト実行 (npm test)
3. Vercel にデプロイ (vercel deploy --target staging)
4. デプロイ URL を Slack #dev に通知

定義しておけば /deploy-staging の1コマンドで全工程が走ります。

③ Subagents — 複雑タスクの分担

Subagentは、特定用途に特化した「部下」AI。メインの Claude が複雑な仕事を抱えこまず、専門エージェントに委譲できます。

3.8 実践 — はじめての HTML ページを作る

ステップ 1: プロジェクト準備

mkdir ~/projects/my-profile
cd ~/projects/my-profile
claude

ステップ 2: CLAUDE.md を作る

起動したら最初にルールを定義:

このフォルダに CLAUDE.md を作ってください。
内容:
- プロジェクト: 私の自己紹介ページ
- 配色: ネイビー #1e3a8a と ベージュ #fef3c7
- フォント: Noto Sans JP
- HTML5 + モダンCSS、JSフレームワークは使わない
- すべて日本語
- スマホ対応必須

ステップ 3: 初稿を作らせる

上記の規約に沿って、私（山田太郎）の
自己紹介ページを index.html + style.css で作ってください。

私について:
- Webデザイナー歴3年
- 趣味: カメラと山登り
- 得意: ロゴデザインとLP制作

構成:
1. ヒーロー: 名前とキャッチコピー
2. About: 経歴
3. 作品ギャラリー（プレースホルダーでOK）
4. 趣味紹介
5. お問い合わせフォーム

作り終えたら open で開いてください。

ステップ 4: 対話で磨く

ブラウザで見て、気になる箇所を具体的に伝えます:

ステップ 5: Git に保存する

このプロジェクトを git で管理したい。
初期化して、.gitignore を作って、
最初のコミットをしてください。

コミットメッセージは
「自己紹介ページ v1」で。

🎓 モジュール2 修了チェック

• Claude Code を自分の PC にインストール・起動できた
• 日本語で指示して応答を受け取れた
• 許可プロンプトの仕組みを理解した
• スラッシュコマンド（/clear など）を使えた
• モデル（Haiku/Sonnet/Opus）を切り替えられる
• CLAUDE.md を作ってプロジェクト規約を定義した
• 自己紹介HTMLページを完成させた

🔧 エラー対処辞書

① インストール・起動系

② 認証・API系

③ ファイル操作・権限系

④ 出力品質・挙動系

❓ よくあるQ&A