Claude Code 完全チュートリアル

# npm でインストール（推奨）
npm install -g @anthropic-ai/claude-code

# 中国のユーザーは淘宝ミラーで高速化
npm install -g @anthropic-ai/claude-code --registry=https://registry.npmmirror.com

# ~/.bashrc または ~/.zshrc に追記
export ANTHROPIC_BASE_URL=https://api.qcode.cc/api
export ANTHROPIC_AUTH_TOKEN=cr_あなたのAPIキー

source ~/.bashrc  # または source ~/.zshrc

# バージョン確認
claude --version
# バージョン番号が表示されます（実際の値は環境により異なります。https://github.com/anthropics/claude-code/releases を参照）

# 動作テスト
claude -p "こんにちは、自己紹介をしてください"

# Bash
claude completion bash >> ~/.bashrc

# Zsh
claude completion zsh >> ~/.zshrc

# Fish
claude completion fish > ~/.config/fish/completions/claude.fish

cd ~/my-project
claude

╭─────────────────────────────────────────╮
│ claude                                   │
│                                          │
│ プロジェクト: my-project                  │
│ モデル: claude-sonnet-5                  │
│ コンテキスト: 12,345 / 1,000,000 tokens  │
╰─────────────────────────────────────────╯

> _

> このプロジェクトのアーキテクチャを分析して、主要モジュールとその関係を教えて

Claude が実行しようとしています：
  ツール: Bash
  コマンド: npm test

  [y] 許可  [n] 拒否  [a] このセッションでは常に許可

# プランモードに入る
> /plan

# プロンプトで促してもよい
> まず要件を分析して実施方針を立ててください。いきなりコードは変えないで

> /plan
> このプロジェクトに JWT を使ったユーザー認証機能を追加したい

Claude: 現在のプロジェクト構造を分析して方針を立てます...

📋 実施方針：
1. src/middleware/auth.ts を作成 — JWT 検証ミドルウェア
2. src/services/auth-service.ts を作成 — 認証のビジネスロジック
3. src/routes/index.ts を変更 — ログイン／登録ルートを追加
4. src/models/user.ts を作成 — ユーザーデータモデル
5. 依存関係を追加：jsonwebtoken, bcrypt
6. テストファイルを作成

この方針でよろしいですか？調整は必要ですか？

> この並行処理のバグを 2 日追っています。src/worker.ts の競合状態を分析してください

[Claude が内部で数千トークンの推論を行い、実行経路・ロック機構・タイミングの問題を分析する]

Claude: 原因が分かりました。worker.ts の 127 行目で...

> この PR をレビューして、あわせてセキュリティ上の脆弱性も確認して

Claude: 2 つのサブエージェントを並列で起動します：

  - サブエージェント 1：コード品質のレビュー
  - サブエージェント 2：脆弱性スキャン

# 現在のコンテキスト使用量を見る
/cost

# コンテキストを圧縮する（重要な情報を残して空きを作る）
/compact

# まったく新しいセッションを始める
/clear

# Claude がプロジェクトを分析して自動生成
/init

# MyApp

## 技術スタック

- React 19 + TypeScript 5.x + Vite
- スタイル：Tailwind CSS v4
- 状態管理：Zustand
- テスト：Vitest + Testing Library

## よく使うコマンド

- 開発：`pnpm dev`
- テスト：`pnpm test`
- ビルド：`pnpm build`
- Lint：`pnpm lint`

## コーディング規約

- コンポーネントは関数コンポーネントで書き、Props は interface で定義する
- any 型は禁止
- CSS は Tailwind の utility class のみ
- コミット形式：feat: / fix: / docs:

## ディレクトリ構成

- src/components/ — 再利用可能なコンポーネント
- src/pages/ — ページコンポーネント
- src/hooks/ — カスタムフック
- src/lib/ — ユーティリティ関数
- src/api/ — API リクエストのラッパー

## 注意事項

- Node.js 22+、パッケージマネージャーは pnpm
- API リクエストはすべて src/api/client.ts を通す

# 対話モード内で切り替える
/model opus    # Opus に切り替え
/model sonnet  # Sonnet に切り替え
/model haiku   # Haiku に切り替え

# 起動時に指定する
claude --model claude-opus-5

1 日のモデル使い分け：
├── Sonnet 5（70%）— 日常開発、バグ修正、テスト作成
├── Opus 5 （15%）— アーキテクチャ判断、難しい問題
└── Haiku 4.5（15%）— 整形、簡単な質問、一括処理

# まず Opus で方針を立てる
/model opus
> このモジュールのアーキテクチャを分析して、リファクタリング方針を立てて

# 方針が固まったら Sonnet に切り替えて実行
/model sonnet
> 方針の第 1 ステップを実行して

{
  "hooks": {
    "PostToolUse": [
      {
        "matcher": "Write|Edit",
        "hooks": [
          {
            "type": "command",
            "command": "npx prettier --write $FILEPATH"
          }
        ]
      }
    ]
  }
}

{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": { "GITHUB_TOKEN": "ghp_xxx" }
    }
  }
}

# 利用可能な skill を見る
/skills

# 特定の skill を使う
> /commit    # commit skill でコミットを生成
> /review    # review skill でコードをレビュー

claude --bare -p "すべての TODO コメントを列挙して" --output-format json

cd ~/unfamiliar-project
claude

> このプロジェクトを分析してください：
> 1. どんな技術スタックを使っているか
> 2. 中心となるモジュールとその責務
> 3. データの流れ
> 4. 簡単なアーキテクチャ図（ASCII）

> /plan
> API にレート制限を追加したい。要件は：
> - ユーザーごとに 1 分あたり最大 60 リクエスト
> - カウントは Redis に保存
> - 超過時は 429 と Retry-After ヘッダーを返す

Claude:
📋 実施方針：
1. 依存関係のインストール：ioredis
2. src/middleware/rate-limiter.ts を作成
3. src/config/rate-limit.ts を作成（設定値）
4. src/app.ts を変更（ミドルウェアを登録）
5. tests/rate-limiter.test.ts を作成
6. docker-compose.yml を更新（Redis サービスを追加）

確認いただければ着手します。

> 方針で問題ありません。実行してください

/model opus
> ユーザーから「同時注文のときに在庫がまれにマイナスになる」と報告がありました。
> src/services/order-service.ts と src/services/inventory-service.ts を分析して、
> 並行処理のバグを見つけて修正してください。

[Opus が Extended Thinking を使い、実行経路・ロック機構・トランザクション分離レベルを分析する]

Claude: 原因が分かりました。inventory-service.ts の 45 行目で、在庫チェックと減算が同一トランザクションに入っておらず、
TOCTOU の競合状態があります。修正方針は SELECT FOR UPDATE を使うことです...

> プロジェクト内のすべての class コンポーネントを関数コンポーネント + Hooks にリファクタリングしたい。
> src/components/ 配下の .tsx ファイルを 1 つずつ処理してください。

Claude は次のように動きます：
1. すべての class コンポーネントを走査
2. 1 つずつ関数コンポーネントに変換
3. lifecycle メソッドを useEffect に置き換え
4. this.state を useState に置き換え
5. テストを実行して壊れていないことを確認

> src/services/user-service.ts の単体テストを一式書いてください：
> - すべての公開メソッドを網羅
> - 正常系と異常系の両方
> - 外部依存（データベース、キャッシュ）はモック
> - カバレッジ目標 90%+

# GitHub Actions で使う
claude -p "この PR のコード変更をレビューし、セキュリティと性能を重点的に見て" \
  --output-format json \
  --max-turns 3 \
  --allowedTools Read,Glob,Grep

# 1. Claude Code で方針を立てる
claude
> /plan
> ユーザー権限システムの実施方針を設計して

# 2. Codex が方針どおりに実行する
codex "PLAN.md の方針に従って、ステップ 1-3 を実装して"

# 方法 1：sudo を使う
sudo npm install -g @anthropic-ai/claude-code

# 方法 2：nvm で Node.js を管理する（推奨）
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.0/install.sh | bash
nvm install 22
npm install -g @anthropic-ai/claude-code

# 設定が正しいか確認
echo $ANTHROPIC_BASE_URL    # https://api.qcode.cc/api のはず
echo $ANTHROPIC_AUTH_TOKEN  # cr_ で始まるはず

# 疎通テスト
curl -s -o /dev/null -w '%{http_code}\n' \
  -H "Authorization: Bearer $ANTHROPIC_AUTH_TOKEN" https://api.qcode.cc/api/v1/models
# → 200 + JSON のモデル一覧＝アドレス・鍵・ネットワークいずれも正常