Claude Code を VS Code で使う｜拡張機能のインストール・設定・差分表示の使い方【2026年版】

結論：本体はCLI、VS Codeで「一体的に」使える

まず押さえるべきは、Claude Code は CLI(コマンドラインツール)が本体で、VS Code 版は別アプリではない、という点です。VS Code では拡張機能 + 統合ターミナルを通じて、その CLI をエディタ内で一体的に使えます。

VS Code 連携の利点はUXにあります：

• Claude の変更が**エディタ内の差分(diff)**で見える(受け入れ前に確認)
• 開いているファイル・選択範囲が文脈として渡る(対象を絞れる)
• ターミナルとエディタを行き来せず作業が完結

この記事では導入・設定・使い方を、業務で安全に使う観点まで含めて解説します。

導入手順

1. Claude Code 本体

npm install -g @anthropic-ai/claude-code   # Node.js 18+

認証は Claude Pro/Max のサブスクリプション、または Anthropic API キーで行います。

2. VS Code 拡張機能

VS Code の拡張機能タブで「Claude Code」を検索してインストールします。あるいは、VS Code の統合ターミナルで claude を起動すると VS Code を自動検出して連携します。どちらでも同じ Claude Code が動きます。

3. プロジェクトを開いて起動

対象リポジトリを VS Code で開き、拡張機能のパネルか統合ターミナルで起動。初回は CLAUDE.md を作るか聞かれるので、プロジェクトの慣習を覚えさせるため Yes が無難です(Claude Code 入門参照)。

使い方のコツ

ファイル・選択範囲を文脈に渡す

• @ファイル名 でファイルを参照
• エディタで範囲選択した状態で依頼すると、その箇所が文脈として渡る

「選択した関数のエラーハンドリングを追加して」のように、選択 + 短い指示で対象を絞ると、余計な箇所を触られにくくなります。

差分を確認してから受け入れる

Claude の変更はエディタ内の差分表示で確認できます。いきなり全部適用せず、中身を見てから受け入れる/却下するのを習慣にします。VS Code 連携は差分が見やすいぶん、レビュー運用と相性が良いです。

CLI 単体との違い

機能差ではなく体験差です。コードの確認・修正が多いなら VS Code 連携が快適です。

業務コードで安全に使う

1. 許可コマンド・読込範囲を絞る(不要なツール/ファイルを渡さない)
2. 書き込みタスクは git checkout -b で作業ブランチを切ってから
3. 変更は差分でレビューしてから受け入れる
4. 秘密情報を含むファイルを文脈に入れない

詳しい統制は Claude Code セキュリティガイド を参照してください。

まとめ

• Claude Code は CLI が本体。VS Code 版は拡張機能 + 統合ターミナルの一体運用
• 導入: CLI 本体 + 拡張機能(または統合ターミナルで claude 起動)
• @ でファイル参照、選択範囲で対象を絞る、差分を見てから受け入れる
• CLI 単体との差は機能でなく体験(エディタ内 diff/文脈の渡し方)
• 業務では許可範囲を絞り、ブランチを切り、差分レビュー

手を動かして定着させる：エディタ統合は実プロジェクトで使うと一気に手に馴染みます。当サイトの「バイブコーディング実践編」では Claude Code を業務コードに使う際の許可設定・レビュー文化を提出物付き演習で扱います。4週間限定で無料公開中。

関連ガイド：

• Claude Code 入門 — CLI の環境構築と基本
• Claude Code vs Cursor 比較 — エディタ選択の判断軸
• Claude Code と Cursor の併用・使い分け — 両方使うワークフロー
• Claude Code よくあるエラーと対処 — 導入時のつまずき解消