生成AI研修
Part 4: AI × 開発 入門Claude Code

Chapter 23: Claude Code 基本操作

対話的開発、ファイル操作、CLAUDE.md

23.1 対話的な開発フロー

Claude Code の基本的な使い方は、ターミナルで Claude と会話しながら開発を進めるスタイルです。 単に「コードを書いて」と伝えるのではなく、タスクの背景・目的・制約を伝えることで、より適切な提案が得られます。

効果的な依頼の書き方

# 良い依頼の例
src/api/users.ts に新しいエンドポイントを追加したい。
- GET /api/users/:id でユーザーの詳細を返す
- 存在しない場合は 404 を返す
- 既存の UserRepository を使ってデータを取得する
- テストも追加してほしい

# 曖昧な依頼の例(改善前)
ユーザーのAPIを作って

具体的な仕様・使うべきクラス・期待する動作を伝えると、修正サイクルが減ります。

23.2 ファイルの読み取り・編集

Claude Code はプロジェクト内のファイルを自律的に読み取って文脈を理解し、複数ファイルにまたがる編集を行います。

読み取り

Claude Code はタスクに関連するファイルを自動的に特定して読み取ります。 明示的にファイルを指定することもできます。

# 特定のファイルを読んでもらう
src/models/User.ts を読んで、このクラスの責務を説明してください

# ディレクトリ全体を把握してもらう
src/api/ ディレクトリの構造と各ファイルの役割を説明してください

編集

Claude Code がファイルを編集する際は、変更内容を差分(diff)形式で提示してから実行します。

before:
  function greet(name) {
    console.log("Hello " + name);
  }

after:
  function greet(name: string): void {
    console.log(`Hello ${name}`);
  }

TODO: あとで実際のスクリーンショットに置き換え - Claude Code が diff を提示して確認を求めている画面

複数ファイルの同時編集

Claude Code は複数ファイルの変更を計画的に行います。

例: インターフェースを変更するタスクを依頼した場合

1. src/interfaces/User.ts のインターフェース定義を変更
2. src/models/User.ts の実装を更新
3. src/api/users.ts のエンドポイントを更新
4. tests/api/users.test.ts のテストを更新

→ 4つのファイルを順番に編集し、整合性を保つ

23.3 ターミナルコマンドの実行

Claude Code はシェルコマンドを実行してプロジェクトの状態を確認できます。 すべてのコマンド実行には確認ダイアログが表示されます(前章参照)。

よく実行するコマンドの例

# テストの実行
npm test
python -m pytest
go test ./...

# ビルド
npm run build
cargo build

# Git 操作
git status
git diff
git add -p
git commit -m "..."

# 依存関係のインストール
npm install
pip install -r requirements.txt

コマンド実行の流れ

エラーの自動修正

テストが失敗したり、コマンドがエラーを返した場合、Claude Code はエラーメッセージを解析して自動的に修正を試みます。

テストが失敗した場合の動作例:

1. npm test を実行
2. エラーログを解析
   → "TypeError: Cannot read property 'id' of undefined"
3. 該当箇所のコードを調査
4. null チェックが不足していることを特定
5. 修正案を提示して確認
6. 修正後に再度テスト実行

23.4 CLAUDE.md によるプロジェクト設定

CLAUDE.md は Claude Code にプロジェクト固有の情報を伝えるための設定ファイルです。 プロジェクトのルートディレクトリに置くと、Claude Code が起動時に自動的に読み込みます。

CLAUDE.md の役割

毎回「このプロジェクトは〜で、テストは〜コマンドで...」と説明する手間を省けます。 プロジェクトに関するルール・コマンド・注意事項を一元管理します。

CLAUDE.md の例

# プロジェクト概要

ECサイトのバックエンド API(Node.js + TypeScript)

## 技術スタック

- Node.js 20 + TypeScript 5
- Express 4
- PostgreSQL 15(ORM: Prisma)
- Jest(テスト)

## よく使うコマンド

\`\`\`bash
npm run dev      # 開発サーバー起動
npm test         # テスト実行
npm run lint     # ESLint チェック
npm run migrate  # DB マイグレーション
\`\`\`

## コーディング規約

- 関数には必ず JSDoc コメントを付ける
- any 型は使用禁止
- エラーハンドリングは Result 型パターンを使用

## 注意事項

- src/lib/legacy/ は触らない(移行中)
- 環境変数は .env.example を参照
- テストは必ず実行してからコミット

CLAUDE.md を作成する

Claude Code 自身に CLAUDE.md の作成を依頼できます。

このプロジェクトの CLAUDE.md を作成してください。
プロジェクトの構造を調査して、よく使うコマンドと技術スタックを記載してください。

TODO: あとで実際のスクリーンショットに置き換え - Claude Code が CLAUDE.md を生成している様子

23.5 コンテキストの管理

Claude Code はセッション内の会話履歴を「コンテキスト」として保持しています。 長時間の作業では、コンテキストがいっぱいになることがあります。

コンテキストとは

コンテキストを管理するコマンド

# 現在のコスト・コンテキスト使用量を確認
/cost

# 会話をリセット(コンテキストをクリア)
/clear

# 長い会話を要約してコンテキストを節約
/compact

コンテキストのベストプラクティス

  • 1 セッション 1 タスク: 大きなタスクが完了したら /clear でリセット
  • CLAUDE.md を活用: セッションごとに同じ説明をしなくて済む
  • こまめに要約: /compact で不要な詳細を圧縮
  • タスクを小さく分ける: 1 つの会話で多くのことをやりすぎない

23.6 Plan モードで計画を立てる

Plan モードは、実装を始める前に Claude Code が計画を立てるモードです。 複雑なタスクで「先に計画だけ確認したい」場面に有効です。

Plan モードの使い方

# Plan モードでタスクを依頼
# ターミナルで shift+tab を押すと Plan モードに切り替わる

またはプロンプトに明示的に含める方法もあります。

まず計画だけ立ててください(実装はまだしないで)。
ユーザー認証機能を追加したい。JWT を使い、ログイン・ログアウト・トークンリフレッシュの3つのエンドポイントが必要です。

Plan モードの出力例

計画:

1. 依存関係の追加
   - jsonwebtoken パッケージをインストール
   - 型定義 @types/jsonwebtoken も追加

2. JWT ユーティリティの作成
   - src/utils/jwt.ts
   - トークン生成・検証・デコード関数

3. 認証ミドルウェアの作成
   - src/middleware/auth.ts
   - Bearer トークンを検証して req.user にセット

4. エンドポイントの実装
   - POST /auth/login → ユーザー検証 + トークン発行
   - POST /auth/logout → トークン無効化
   - POST /auth/refresh → リフレッシュトークンで再発行

5. テストの作成
   - 各エンドポイントの正常系・異常系

この計画でよければ「実装してください」と伝えてください。

Plan モードを使うことで、大きな実装ミスを防ぎ、方向性を確認してから実装に進めます。

まとめ

  • 対話的開発: タスクの背景・制約を丁寧に伝えると精度が上がる
  • ファイル操作: 差分で確認してから編集。複数ファイルも横断して編集可能
  • コマンド実行: 確認付きで安全。エラーは自動的に調査・修正を試みる
  • CLAUDE.md: プロジェクト設定を書いておくと毎回の説明が不要になる
  • コンテキスト管理: /clear/compact で会話の重さをコントロール
  • Plan モード: 実装前に計画を確認することで大きなミスを防ぐ

On this page