0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【2026年版】VSCodeでClaude Codeを使いこなす|導入からCLAUDE.md・Plan Mode・Subagentまで

0
Posted at

はじめに

生成AIを使ったコーディングというと、

  • コードを貼り付けて質問する
  • エラーを貼って原因を聞く
  • 関数を書いてもらう

といった使い方を思い浮かべる方も多いと思います。

しかし、Claude Codeは一般的なチャット型AIとは少し違います。

Claude Codeはプロジェクト内のファイルを自分で調査し、コードを書き換え、ターミナルコマンドを実行し、テスト結果を確認してさらに修正するところまで行える「AIコーディングエージェント」です。

さらに現在はAnthropic公式のVS Code拡張が提供されており、ターミナルだけでなく、

  • VS Code上でClaudeと会話する
  • 選択したコードについて質問する
  • ファイルを指定して修正を依頼する
  • 修正差分をVS Code上で確認する
  • 実装前にPlanをレビューする

といった使い方ができます。

この記事では、Claude Codeのインストール方法だけではなく、

VS CodeでClaude Codeをどう使えば、実際の開発で便利なのか

というところまで紹介します。


Claude Codeとは?

Claude CodeはAnthropicが提供するエージェント型の開発ツールです。

通常のAIチャットでは、

人間
↓
質問
↓
AIが回答
↓
人間がコードを修正

という形になりがちです。

Claude Codeでは、

人間
↓
「このバグを直して」
↓
Claudeがコードを調査
↓
関連ファイルを特定
↓
修正
↓
テスト実行
↓
エラー確認
↓
再修正

という一連の作業をClaude自身が進められます。

つまり、

「コードを書いてもらうAI」ではなく、「開発作業そのものを任せるAI」

に近い存在です。


1. VS CodeにClaude Codeをインストールする

現在はAnthropic公式のVS Code拡張が提供されています。

VS Codeで、

Ctrl + Shift + X

を押して拡張機能画面を開き、

Claude Code

と検索します。

発行元が

Anthropic

となっている公式拡張をインストールしてください。

拡張IDは、

anthropic.claude-code

です。

VS Codeは1.94以降が公式要件となっていますが、Claude Code自体も頻繁にアップデートされているため、基本的にはVS Codeも最新版を利用するのがおすすめです。

なお、VS Code拡張のチャット画面を利用するだけであれば、拡張機能側にClaude Code CLIが同梱されています。

一方、

claude

をVS Codeのターミナルから直接実行したい場合は、別途CLIをインストールします。


2. VS Code版Claude Codeの基本操作

インストールすると、VS CodeにClaude Codeのアイコンが追加されます。

Claude Codeを開いたら、基本的には普通のチャットと同じように指示できます。

例えば、

このプロジェクトの構成を調査してください。
使用している技術、主要なディレクトリ、アプリケーションの起点を説明してください。

と依頼できます。

Claude Codeは自分でプロジェクト内のファイルを探し、必要なファイルを読み込んで回答します。

そのため、毎回ソースコードをコピーして貼り付ける必要はありません。


3. 「@ファイル名」を使いこなす

VS Code版Claude Codeでかなり便利なのが、ファイル参照です。

例えば、

@src/auth/login.ts

このログイン処理で例外が発生する可能性がある箇所をレビューしてください。

のように書けます。

フォルダを指定することもできます。

@src/auth/

認証処理全体の流れを調査してください。

さらにVS Code上でコードを選択すると、その選択範囲をClaudeに渡すこともできます。

Windows/Linuxでは、

Alt + K

を利用すると、

@UserService.java#120-145

のように行番号付きで参照できます。

これはかなり便利です。

例えば、

この条件式が何を判定しているのか説明してください。

だけでも、現在選択しているコードを前提に回答させることができます。


4. いきなり修正させない。「調査 → 計画 → 実装」にする

Claude Codeを使ううえで、個人的に最も重要だと思うポイントです。

いきなり、

この機能を作って

と指示するよりも、

調査
↓
計画
↓
実装
↓
検証

に分けた方が安定します。

Anthropicの公式ベストプラクティスでも、

Explore → Plan → Implement

という進め方が推奨されています。


Plan Modeを使う

大きめの変更では、まずPlan Modeを使います。

例えば、

認証機能にパスワードリセット機能を追加したいです。

まず既存の認証処理を調査してください。
まだコードは修正しないでください。

その後、

・変更が必要なファイル
・DB変更
・API変更
・画面変更
・影響範囲
・必要なテスト

を整理して実装計画を作成してください。

と依頼します。

VS Code版ではPlanをMarkdownとして開き、内容を確認・編集してから実装に進むこともできます。

複数ファイルにまたがる修正では、いきなり実装させるよりかなり安全です。


5. 最強クラスに重要なのが「CLAUDE.md」

Claude Codeを使うなら、ぜひ知っておきたいのが

CLAUDE.md

です。

CLAUDE.mdには、

Claudeに毎回覚えておいてほしいプロジェクトルール

を書きます。

例えば、

# Project

React + TypeScriptのフロントエンドプロジェクトです。

# Coding Rules

- anyは禁止
- React Function Componentを使用する
- API通信はsrc/api配下に実装する
- MUIを使用する
- 新しいライブラリを勝手に追加しない

# Workflow

コード変更後は以下を実行する。

npm run lint
npm run typecheck
npm test

エラーが発生した場合は原因を調査して修正する。

# Git

- mainブランチへ直接commitしない
- Conventional Commitsを使用する

といった内容を書きます。

これをプロジェクトルートに置いておけば、Claude Codeが毎回読み込みます。


/initで作ってもらう

ゼロからCLAUDE.mdを書く必要はありません。

Claude Codeで、

/init

を実行すると、プロジェクトを解析してCLAUDE.mdの初期案を作成してくれます。

そこから、

このプロジェクトでは勝手に依存ライブラリを追加しない

など、人間しか知らないルールを追加していくのがおすすめです。


CLAUDE.mdに何でも書かない

CLAUDE.mdは長ければ長いほど良いわけではありません。

毎回必要なルールだけを書きます。

例えば、

書く

npm testを実行する
Java 17を使用する
ControllerからRepositoryを直接呼ばない
既存コードの命名規則を優先する

書かない

Reactとは何か
Spring Bootとは何か
プロジェクト内全ファイルの説明
長いAPI仕様書

Claude自身がコードを読めば分かることまで書く必要はありません。


6. 良いプロンプトは「作業内容」より「ゴール」を伝える

例えば、

ログイン処理を修正してください

だけだと、Claudeはかなり自由に判断します。

おすすめは、

ログイン後、セッション期限切れになると画面が真っ白になる不具合があります。

src/auth/周辺を調査してください。

まず不具合を再現するテストを作成し、
原因を特定したうえで修正してください。

既存仕様は変更しないでください。

最後に関連テストを実行し、
何が原因だったか説明してください。

のように、

  • 現象
  • 調査対象
  • 制約
  • 完了条件

まで渡すことです。

Claude Codeにおいて、

「どう直すか」を細かく命令する必要はありません。

代わりに、

「何を満たせば完成なのか」

を明確にすると精度が上がります。


7. Claudeに必ず「検証」させる

Claude Codeの強みは、コードを書くだけでなくコマンドも実行できることです。

そこで、

実装してください

ではなく、

実装後にテストを実行してください。

失敗した場合は原因を調査して修正し、
すべて成功するまで確認してください。

まで依頼します。

例えば、

npm test
npm run lint
npm run typecheck
npm run build

などです。

Claudeが、

実装しました。

と言ったことではなく、

テストが成功した
ビルドが成功した

という機械的に確認できる結果を完了条件にします。

これはClaude Codeを使ううえで非常に重要です。


8. 権限設定を理解する

Claude Codeは、

  • ファイル編集
  • Bashコマンド
  • Git操作
  • MCPツール

などを実行できます。

そのため、権限管理があります。

代表的なのは、

Manual
Auto
Plan
Edit automatically

などです。


普段はAutoまたはManualがおすすめ

作業内容を細かく確認したい場合はManual。

ある程度Claudeに任せたい場合はAutoが使いやすいと思います。

一方、

--dangerously-skip-permissions

のように権限確認を完全に無効化する方法もありますが、普段使いではおすすめしません。

Claude Codeは普通に、

rm
git reset
npm install

などを実行できるためです。

便利だからこそ、「何を実行できる状態なのか」は理解しておく必要があります。


9. 長く会話しすぎない

Claude Codeを使っていると、同じセッションで延々と修正を続けたくなります。

しかしClaude Codeでは、

コンテキスト管理がかなり重要です。

例えば、

バグAを修正
↓
CSS修正
↓
API追加
↓
DB調査
↓
別のバグ修正

を全部同じ会話で続けるのはおすすめしません。

話題が変わったら、

/clear

を使います。


/compact

長い作業を続けたい場合は、

/compact

も便利です。

例えば、

/compact API変更内容と変更済みファイルを重点的に残してください

のように指定できます。

Claudeにとってコンテキストは有限なリソースなので、

「必要な情報だけ残す」

という意識が重要です。


10. 間違えたら /rewind

Claude Codeでは変更前の状態に戻すCheckpoint機能があります。

例えばClaudeが大量にコードを変更して、

いや、その方向じゃない……

となった場合、

/rewind

を利用できます。

また、

Esc
Esc

でもRewindメニューを開けます。

会話だけ戻す、

Conversation

コードだけ戻す、

Code

両方戻す、

Conversation + Code

といった操作ができます。

ただしCheckpointはGitの完全な代替ではありません。

Claude Codeを使う場合でも、Gitは必ず併用した方が安全です。


11. Subagentを使う

大きなプロジェクトになると、Claude本体に全部調査させるとコンテキストをかなり消費します。

そこで便利なのがSubagentです。

例えば、

Subagentを使って、
このプロジェクトの認証処理を調査してください。

以下を整理してください。

・ログイン
・ログアウト
・セッション
・権限チェック
・トークン更新

と依頼できます。

Subagentは別のコンテキストで調査して、その結果だけをメインのClaudeへ返します。

そのため、

調査担当Claude
↓
結果だけ返す
↓
実装担当Claude

のような使い方ができます。


12. Skillsで「いつもの作業」を登録する

毎回同じプロンプトを書いているならSkills化できます。

例えば、

.claude/skills/code-review/SKILL.md

を作り、

---
name: code-review
description: コードレビューを実施する
---

以下の観点でレビューしてください。

1. バグ
2. セキュリティ
3. 可読性
4. パフォーマンス
5. 既存仕様への影響
6. テスト不足

重要度を

Critical
High
Medium
Low

で分類してください。

としておけば、

/code-review

のように再利用できます。

よく使う作業をSkill化していくと、Claude Codeがかなり自分専用の開発環境になっていきます。


13. Hooksで強制ルールを作る

CLAUDE.mdはあくまで「Claudeへの指示」です。

つまり、

必ずlintしてください

と書いても、絶対に実行される保証はありません。

そこで使えるのがHooksです。

例えば、

Claudeがファイルを変更
↓
自動でESLint実行

といった処理を設定できます。

ほかにも、

.envへの書き込みを禁止
ファイル変更後にformatter実行
作業終了前にテスト実行

などを自動化できます。

考え方としては、

CLAUDE.md
= Claudeに守ってほしいルール

Hooks
= システムとして強制するルール

と分けると分かりやすいです。


14. MCPを使うとさらに強力

Claude CodeはMCP(Model Context Protocol)にも対応しています。

MCPを使うことで、

Claude Code
 ├ GitHub
 ├ DB
 ├ Notion
 ├ Figma
 ├ Jira
 └ その他のサービス

のように外部システムへ接続できます。

例えばGitHubと連携すると、

Issue #123を確認してください。

原因を調査し、
修正を実装して、
テストを実行し、
PRを作成してください。

といったところまで自動化できます。

ただし、最初からMCPを大量に追加する必要はありません。

まずはClaude Code単体を使い、

CLAUDE.md
↓
Skills
↓
Subagent
↓
Hooks
↓
MCP

くらいの順番で拡張していくのがおすすめです。


15. 実務でおすすめのワークフロー

自分なら、ある程度大きな機能改修では次のように使います。

STEP 1:調査

この機能に関連するコードを調査してください。

まだ変更しないでください。

現在の処理フロー、
関連ファイル、
DB、
API、
影響範囲を整理してください。

↓

STEP 2:計画

調査結果をもとに実装計画を作成してください。

変更ファイルと変更内容、
考えられるリスク、
必要なテストを整理してください。

↓

STEP 3:実装

計画に従って実装してください。

既存仕様は可能な限り変更しないでください。

↓

STEP 4:検証

変更内容をレビューしてください。

その後、

・lint
・型チェック
・関連テスト
・build

を実行してください。

問題があれば原因を調査して修正してください。

↓

STEP 5:レビュー

今回の変更について、
別のSubagentを使用してコードレビューしてください。

特に、

・バグ
・セキュリティ
・既存機能への影響
・テスト不足

を確認してください。

↓

STEP 6:Git

変更内容を確認して、
適切なcommit messageを作成してください。

問題がなければcommitしてください。

この流れにすると、かなり安定します。


16. Claude Codeでやりがちな失敗

「全部いい感じにして」

Claudeの判断範囲が広すぎます。


いきなり巨大な機能を実装させる

先にPlanを作らせましょう。


テストをClaudeに任せない

コードだけ書かせるのではなく、

実装 → テスト → 修正

まで1セットにします。


同じセッションを永遠に使う

無関係な情報が増えるほどClaudeの精度が下がります。

タスクが変わったら、

/clear

します。


CLAUDE.mdを巨大化させる

何でもCLAUDE.mdに入れるのではなく、

毎回必要 → CLAUDE.md

必要な時だけ → Skill

絶対に強制 → Hook

調査を分離 → Subagent

外部サービス → MCP

と使い分けます。


17. 最初に覚えておきたいコマンド

個人的には、まずこれくらい覚えておけば十分だと思います。

コマンド 用途
/init CLAUDE.mdの初期生成
/clear コンテキストをリセット
/compact 会話を圧縮
/rewind 過去のCheckpointへ戻る
/permissions 権限設定
/model モデル変更
/mcp MCP確認
/hooks Hooks確認
/usage 利用状況確認
/context 現在のコンテキスト確認

すべて覚える必要はありません。

/

を入力すればコマンド一覧を表示できます。


まとめ

Claude Codeは、

「AIにコードを書いてもらうツール」

として使うだけでは少しもったいないです。

VS Codeと組み合わせて、

調査
↓
計画
↓
実装
↓
テスト
↓
レビュー
↓
Git

という開発フローそのものを任せることで、かなり便利になります。

特に重要なのは次のポイントです。

  1. VS Code公式拡張を使う
  2. @ファイル参照を活用する
  3. 大きな変更ではPlan Modeを使う
  4. CLAUDE.mdでプロジェクトルールを教える
  5. テスト・buildまでClaude自身に実行させる
  6. タスクが変わったら/clearする
  7. 調査量が多い場合はSubagentへ分離する
  8. 繰り返す作業はSkills化する
  9. 絶対に守らせたい処理はHooksにする
  10. 必要になったらMCPで外部サービスとつなぐ

最初は、

Claude Codeを開く
↓
コードを調査してもらう
↓
Planを作る
↓
実装
↓
テスト

くらいから始めれば十分です。

慣れてきたらCLAUDE.md、Skills、Subagent、Hooks、MCPを追加していくと、自分のプロジェクト専用のAI開発環境へと育てていけます。


参考資料

本記事は、2026年10月時点の以下の情報を参考にしています。

  • Anthropic公式:Claude Code in VS Code
  • Anthropic公式:Claude Code Best Practices
  • Anthropic公式:How Claude remembers your project
  • Anthropic公式:Common workflows
  • Anthropic公式:Settings
  • Anthropic公式:Permissions
  • Anthropic公式:Subagents
  • Anthropic公式:Hooks
  • Visual Studio Marketplace:Claude Code for VS Code

※Claude Codeはアップデートが非常に速いため、細かなUIやコマンドについては最新の公式ドキュメントも確認することをおすすめします。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?