Powered by Anthropic

Claude Code

完全ガイド

ターミナル上でAIアシスタントと対話し、
コーディングの体験を根本から変える次世代ツール

初心者向けインストールから応用まで全19スライド Claude Code 完全解説

Contents

このスライドで学べること

01Claude Code とは何か

02なぜ Claude Code なのか

03インストール準備（前提条件）

04インストール手順（ステップ別）

05初回起動 & API キー設定

06できること① コード生成

07できること② バグ修正・デバッグ

08できること③ ファイル & Git 操作

09できること④ その他の機能

10スラッシュコマンド一覧

11CLAUDE.md の活用

12MCP サーバー連携

13Hooks & 拡張思考モード

14キーボードショートカット

15モデルと料金

16Tips & ベストプラクティス

17まとめ & 次のステップ

01

Claude Code とは？

Anthropic が開発したAIパワードCLIツール。
ターミナルを開いて claude と打つだけで、
AIアシスタントが開発作業を丸ごとサポートする。

VSCodeやブラウザを開かずにターミナルから直接AIと対話

プロジェクト内のファイルを自分で読んでコンテキストを理解する

コードを書くだけでなく実際にコマンドを実行して結果を確認

Git操作・テスト実行・ファイル作成まですべて対応

IDEプラグイン不要・どんな環境でも動く

POINT

「コードを書いてくれるAI」ではなく、
開発作業全体を担うAIペアプログラマー。

claude — terminal

❯ claude

Claude Code v1.9.3 — Anthropic

✓ API key found

─────────────────────────────────

You: ログイン機能をReactで実装して

Claude: src/components/Login.tsx を確認中...

既存コードに合わせて実装します。

✓ src/components/Login.tsx を更新

✓ src/hooks/useAuth.ts を作成

✓ src/api/auth.ts を作成

02

なぜ Claude Code なのか

従来のAIツールと何が違うのか

🧠

プロジェクト全体を把握

ファイルを自分で読んでコンテキストを理解。「このプロジェクト全体を見て修正して」という指示が通る。コピペ不要。

⚡

実際に動作を確認しながら進める

コマンドを実行してエラーを確認し、自分で修正する。「動かしてみたら動かなかった」を自律的に解決。

💬

自然言語でコーディング

「FastAPIでユーザー認証APIを作って」「このバグを直して」— 日本語でOK。コードの書き方を覚えなくても指示できる。

🔗

あらゆる作業をワンストップで

コード生成・修正・テスト・Gitコミット・PR作成・ドキュメント生成まで。ツールを切り替える手間がない。

従来のAIチャットとの違い

ChatGPTやClaud.aiはコードを「提案」するだけ。Claude Codeは実際にファイルを編集し、コマンドを実行し、結果を確認して自己修正まで行う。

03

インストール準備

まずこれを確認しよう

必要なもの

1

Node.js 18 以上

JavaScriptランタイム。Claude Codeの実行環境。
nodejs.org から無料でダウンロード

2

npm（Node.jsに同梱）

パッケージ管理ツール。Node.jsをインストールすれば自動で入る。

3

Anthropic APIキー

有料アカウントが必要。console.anthropic.com で取得。初回は$5のクレジットあり。

opt

Git（任意・推奨）

コミット・PR作成などGit連携機能を使う場合に必要。

APIキーの取得方法

手順

1. console.anthropic.com にアクセス

2. アカウント作成（無料）

3. Settings → API Keys

4. 「Create Key」をクリック

5. 生成された sk-ant-... をコピー

※ キーは一度しか表示されない

※ 安全な場所に保管すること

TIP

Billing でクレジットカードを登録しておくとAPIが使えるようになる。月額の上限設定も忘れずに。

04

インストール手順

コマンド3つで完了する

Terminal

# ステップ1: Node.jsバージョン確認

❯ node --version

v20.11.0 ← 18以上ならOK

# ステップ2: Claude Codeをインストール

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

added 132 packages in 8s

✓ installed successfully

# ステップ3: インストール確認

❯ claude --version

@anthropic-ai/claude-code v1.9.3

# ステップ4: ヘルプ確認

❯ claude --help

Usage: claude [options] [prompt]

Start Claude Code interactive session

インストール時の注意点

-g フラグはグローバルインストール。どこからでも claude コマンドが使えるようになる

Windowsの場合はPowerShellまたはWindows Terminalを使用

権限エラーが出た場合は sudo npm install -g を試す（Mac/Linux）

npmの代わりに pnpm や yarn も使える

Windows ユーザーへ

WSL2（Windows Subsystem for Linux）環境での使用を推奨。より安定して動作する。

アップデート方法

npm update -g @anthropic-ai/claude-code
で最新版に更新できる。定期的に確認しよう。

05

初回起動 & API キー設定

初回起動の流れ

# Mac / Linux: APIキー設定

❯ export ANTHROPIC_API_KEY="sk-ant-..."

# Windows (PowerShell)

❯ $env:ANTHROPIC_API_KEY = "sk-ant-..."

# プロジェクトフォルダへ移動して起動

❯ cd my-project

❯ claude

Claude Code v1.9.3

✓ API key validated

✓ Project: my-project

How can I help you today?

❯ ▌

APIキーを永続化する方法

# ~/.zshrc または ~/.bashrc に追記

echo 'export ANTHROPIC_API_KEY="sk-ant-..."' >> ~/.zshrc

source ~/.zshrc

その他の設定方法

.env ファイルにキーを記述（プロジェクト単位）

claude configure コマンドで対話的に設定

~/.claude/.env にグローバル設定

セキュリティ注意

APIキーはGitにコミットしないこと。
.gitignore に .env を追加しておこう。

06

できること① コード生成

自然言語でコードを書いてもらう

フロントエンド

「Reactでユーザー一覧ページを

SWRでデータ取得して作って」

コンポーネント・カスタムフック・型定義を自動生成

ローディング・エラー状態も実装

バックエンド

「FastAPIでCRUD APIを

PostgreSQL付きで実装して」

ルーター・モデル・スキーマを一括生成

DB接続・マイグレーションも含む

スクリプト

「このJSONをExcelに出力する

Pythonスクリプト書いて」

openpyxlで書式付きExcel生成

エラーハンドリング込み

対応言語・フレームワーク

PythonTypeScriptGo RustReactNext.js VueFastAPIDjango SwiftKotlin+ 多数

07

できること② バグ修正・デバッグ

使い方はシンプル

1

エラーをそのまま貼り付ける

整形・翻訳不要。コピペだけでOK

2

Claudeが関連ファイルを自動で読む

エラーのある行だけでなくプロジェクト全体を把握

3

原因を特定して修正

複数ファイルにわたる修正も一括で行う

4

テストを実行して確認

修正後にコマンドを実行して動作を自己確認

こんな指示も通る

「パフォーマンスが遅い原因を調べて」
「セキュリティ的に問題ないか診断して」
「このコードを TypeScript に移行して」

デバッグ例

You: このエラーが出て困ってる:

TypeError: Cannot read properties

of undefined (reading 'map')

at UserList.tsx:23:18

Claude: UserList.tsx を確認しています...

23行目: users.map(u => ...)

users が undefined の可能性があります。

useUsers フックも確認中...

→ APIレスポンス前に render されています。

Claude: 修正内容:

users?.map(u => ...)

+ ローディング状態の追加

✓ UserList.tsx を更新しました

08

できること③ ファイル & Git 操作

ファイル操作

ファイルの作成・編集・削除・移動

プロジェクトのフォルダ構造を把握して最適な場所に配置

複数ファイルにわたる一括変更（リファクタリング等）

設定ファイル（tsconfig・eslint等）の自動生成・更新

「srcフォルダ配下の全.tsxを

.tsx → .jsx に変換して」

→ 34ファイルを一括変換

Git 操作

コミットメッセージを変更内容から自動生成

ブランチ作成・切り替え・マージ

GitHub CLIと連携してPR作成まで自動化

コンフリクト解消の支援

git log / blame / diff の解析・説明

「変更内容を見てコミットして」

→ git add -p で差分確認

→ feat: ユーザー認証APIを追加

09

できること④ その他の機能

📖

コード説明・解読

「このコードを初心者向けに説明して」「このアルゴリズムの計算量は？」複雑なコードを日本語でわかりやすく解説。

🧪

テスト自動生成

「この関数のユニットテストをJestで書いて」。カバレッジ100%を目指した網羅的なテストケースを生成。

♻️

リファクタリング

「このコードを関数に分割して」「DRYに書き直して」「TypeScript化して」コードの品質向上をサポート。

📄

ドキュメント生成

README.md・API仕様書・コメントの自動追加。コードを読んでドキュメントを自動生成する。

🔒

セキュリティ診断

「このコードの脆弱性を指摘して」SQLインジェクション・XSS・認証漏れなどを検出してアドバイス。

🌐

Web検索との連携

MCP設定でWebブラウジングも可能に。最新ドキュメントを参照しながらコーディング支援を行う。

10

スラッシュコマンド一覧

/ を入力するとコマンドが補完される

/helpヘルプとコマンド一覧を表示 /clear会話履歴をリセット（新しいコンテキストで開始） /diff現在の変更差分を表示 /undo最後の変更を取り消し /review現在のブランチ差分をコードレビュー /initCLAUDE.md を自動生成（プロジェクト設定） /config設定の確認・変更

/costこのセッションのAPIコストを表示 /doctor設定の診断チェック（トラブル時に使う） /think拡張思考モード（深い分析・複雑な問題向け） /compact会話履歴を要約して圧縮（コンテキスト節約） /model使用するAIモデルを切り替え /mcpMCP サーバーの管理・一覧表示 /permissionsツール権限の確認・変更

実行権限について

Claude Code がコマンドやファイル変更を実行する前に、ユーザーに確認を求める。--dangerously-skip-permissions で全自動化も可能（注意して使う）。

11

CLAUDE.md の活用

プロジェクトのルールをAIに覚えさせる設定ファイル

CLAUDE.md とは？

プロジェクトのルートに置くマークダウンファイル

Claude が起動時に自動で読み込むプロジェクト設定

チーム全員でGitに共有してコンテキストを統一

/init コマンドで自動生成できる

書くこと: 技術スタック・コーディング規約

書くこと: よく使うコマンド・注意事項

書くこと: アーキテクチャの説明

書くこと: やってはいけないこと

効果

毎回「このプロジェクトはPythonを使っています」と説明せずに済む。チームで一貫したAI支援が受けられる。

# プロジェクト: EC サイト API

## 技術スタック

- Python 3.12 + FastAPI

- PostgreSQL 16 + SQLAlchemy 2.0

- テスト: pytest + httpx

- Linting: ruff, mypy

## コーディング規約

- コメントは日本語で書く

- 型アノテーションを必須とする

- 関数にはdocstringを必ず付ける

## よく使うコマンド

uvicorn app.main:app --reload

pytest tests/ -v

## 注意事項

- .env ファイルはGitにコミットしない

- 本番DBには直接接続しない

12

MCP サーバー連携

Model Context Protocol — 外部サービスとClaudeを繋ぐ拡張機能

🐙

GitHub

リポジトリ操作・PR作成・Issue管理

📧

Gmail

メール送受信・検索・下書き作成

📅

Google Calendar

予定の確認・作成・更新

📁

Google Drive

ファイルの読み書き・検索

🌐

Playwright

ブラウザ操作・スクレイピング・E2Eテスト

🗄️

Database

PostgreSQL・MySQL・SQLiteへの直接クエリ

🔍

Web Search

リアルタイム情報取得・最新ドキュメント参照

⚙️

カスタム

自分でMCPサーバーを作って好きなAPIを繋げる

MCPサーバーの追加

❯ claude mcp add github

✓ GitHub MCP server added

❯ claude mcp list

github — GitHub integration

playwright — Browser automation

活用例

「GitHubのIssue #123を読んで実装して」
「このバグ修正のPRを作って説明文も書いて」
「Google Calendarの今日の予定を教えて」

13

Hooks & 拡張思考モード

Hooks — 自動化の仕組み

Claude がツールを実行する前後に、シェルコマンドを自動実行する機能。settings.json で設定。

ファイル保存時に自動でコードフォーマット（prettier / ruff）

コミット前に自動でテスト実行

変更完了時にSlack通知を送る

Lint エラーを自動修正してから次に進む

// settings.json

"hooks": {

"PostToolUse": [{

"matcher": "Write",

"hooks": [{

"type": "command",

"command": "npm run lint:fix"

}]

}

拡張思考モード（Extended Thinking）

/think コマンドでClaudeが時間をかけて深く考えてから回答する。

複雑なアーキテクチャ設計の検討

バグの根本原因分析

セキュリティ監査・脆弱性分析

トレードオフを考慮した技術選定

使い方

You: /think このAPIの設計を見直して

Claude: ⟳ 深く考えています...

現在の設計の問題点を分析中

代替アーキテクチャを検討中

→ 詳細な設計提案と理由を提示

14

キーボードショートカット

覚えておくと作業効率が大幅アップ

基本操作

Ctrl + C現在の処理を中断

Ctrl + L画面をクリア

Ctrl + Z操作を取り消し

入力操作

↑ / ↓入力履歴を移動

Shift + Enter改行（複数行入力）

Tabコマンド補完

スラッシュ起動

/コマンドメニュー

Esc入力をキャンセル

Enter送信・実行

権限プロンプトでのキー操作

Claudeがファイル編集やコマンド実行を行う前に確認が表示される。
y 許可 n 拒否 a 今後同じ操作を常に許可 ? 詳細を表示

15

モデルと料金

用途に合わせてモデルを選ぼう

Claude Opus 4.8

最高性能モデル

得意なこと複雑な設計・深い分析

速度やや遅め

コスト高め

推奨用途難解なバグ・設計相談

Claude Sonnet 4.6

バランス型（デフォルト推奨）

得意なことほぼすべての開発タスク

速度速い

コスト中程度

推奨用途日常的なコーディング全般

デフォルト

Claude Haiku 4.5

高速・軽量モデル

得意なことシンプルな変換・生成

速度最速

コスト安価

推奨用途繰り返し作業・小タスク

モデル変更方法

/model claude-opus-4-8
または /model でメニューから選択

料金の確認

/cost コマンドで現在のセッションのAPIコストを確認できる。
console.anthropic.com のUsageで月額を管理しよう。

16

Tips & ベストプラクティス

使いこなすための8つのコツ

01 具体的な指示を出す

「ページ作って」より「useSWRでデータ取得するReactコンポーネントを作って、ローディング・エラー状態も実装して」のほうが的確な結果が得られる。

02 CLAUDE.md を最初に作る

/init で自動生成。毎回「このプロジェクトは〜」と説明せずに済む。チームで共有すれば全員のAI支援が統一される。

03 エラーはそのまま貼る

整形・翻訳は不要。スタックトレースをそのままコピペするだけ。Claudeが関連ファイルを自分で探して原因を特定する。

04 /clear で新鮮なコンテキストから

会話が長くなるとコンテキストが汚れて精度が下がる。話題が変わったら /clear でリセットしよう。

05 大きなタスクは分割して依頼する

「ECサイトを全部作って」より「まずDB設計を、次に認証API、次に商品一覧API」と段階的に依頼するほうが品質が高い。

06 /think で複雑な問題を解かせる

アーキテクチャ設計・パフォーマンス問題・セキュリティ設計など、難しい問題には /think で深く考えさせる。

07 Git をこまめにコミット

AIが変更したコードは予期しない結果になることも。コミットを細かく積んでおくと /undo や git reset で安全に戻れる。

08 --dangerously-skip-permissions は慎重に

全操作を無確認で自動実行するモード。デモや実験には便利だが、本番コードや重要なファイルがある環境では使わないこと。

まとめ

今日から始めよう

1

APIキーを取得

console.anthropic.com でアカウント作成してAPIキーを発行する

2

インストール

npm install -g @anthropic-ai/claude-code
1コマンドで完了

3

プロジェクトで試す

作業中のフォルダで claude を実行して話しかけてみる

このスライドで学んだこと

Claude Code = AIペアプログラマー

自然言語でコードを生成・修正・デバッグ

CLAUDE.md でプロジェクトを覚えさせる

MCP で外部サービスと連携

Git操作・テスト実行も自律的に

Hooks で自動化を設定

/think で深い思考を引き出す

公式ドキュメント: docs.anthropic.com