Claude Code for VS Codeとは？インストール方法と使い方を図解

Claude CodeのCLI版を使っていると、修正内容を確認するためにVS Codeでリソースデータを開く必要があります。ただ、この方法はターミナルとのウィンドウの切り替えが煩わしく感じます。この使いづらさを解消するAnthropicの公式拡張機能 Claude Code for VS Codeを紹介します。

この拡張機能は、CLIの便利さを残しながら、VS Code上でファイルを見て、AIに相談し、変更内容を差分で確認できます。

この記事でわかること：

• VS Code拡張機能でできることの概要
• インストールから認証までの手順
• ファイル指定や差分確認など基本的な使い方
• CLI版との違いと使い分けの考え方

この記事を読み終えたあとは、ウィンドウ切り替えの煩わしさが解消され、作業の流れが変わるでしょう。VS Code上でコードを見ながらAIに相談し、変更内容をその場で確認する作業スタイルを、すぐに試せる状態になります。

Claude CodeのVS Code拡張機能とは

Claude Code for VS Codeは、Claude CodeをVS Code上で操作できるようにするAnthropicの公式拡張機能です。CLI版を置き換えるものではなく、コードやファイルを開いた状態でAIに相談したり、変更内容をその場で確認したりと、IDE上での作業を補助する役割を持っています。

VSCodeの基本設定を終えた方にとって、次のステップとなる応用的な選択肢です。

Claude Code VS Code拡張機能でできること

Claude Code VS Code拡張機能を導入すると、CLI版の便利さを活かしながら、VS Code上での作業がよりスムーズになります。ここでは主な3つのメリットを紹介します。

CLIとVS Codeを行き来する手間を減らせる

拡張機能を使うことで、VS Codeのサイドバーから直接指示を出せます。CLI版では必要だった、コードの確認のためのウィンドウの切り替えがなくなります。MarkdownやコードをVS Codeで開きながらAIに相談したい場面で、特に効果を感じやすい機能です。

開いているファイルを見ながらClaude Codeに相談できる

VS Code拡張機能では、エディタで開いているファイルの内容をClaude Codeに直接共有できます。

CLI版で必要だったファイルパスの指定が不要になり、開いているファイルや選択範囲をそのまま指定して質問できます。

変更内容を差分で確認しやすい

VS Code拡張機能では、Claude Codeが提案した変更内容を差分（diff）表示で確認できます。

変更箇所がハイライトされるため、修正内容の確認がしやすくなります。修正内容が適正かの判断のしやすさは、AIツールを活用する上で今後も大切になります。

Claude Code VS Code拡張機能のインストール方法

Claude Code VS Code拡張機能のインストールは、VS Codeの拡張機能メニューから数ステップで完了します。ここではインストール前の準備から、認証までの流れを説明します。

事前に準備しておくこと

Claude Code VS Code拡張機能を使うには、以下の2つが必要です。

• VS Code（バージョン1.98.0以上）
• Anthropicアカウント（サブスクプランへの加入が必要です）

Claude Code CLI版の準備がまだの方：

VS Code拡張機能にはCLIが同梱されているため、拡張機能をインストールするだけでClaude Codeを使い始められます。拡張機能から始める方は、CLI版を別にインストールする必要はありません。

すでにCLI版を使っている方：

そのままVS Code拡張機能を追加するだけで問題ありません。

Claude Codeについて事前に知っておくことで、拡張機能の操作もスムーズに進められます。以下のページを参考にしてみてください。

関連記事：Claude Codeの始め方 >>

VS Codeに拡張機能をインストールする

VS Code拡張機能のインストールは、拡張機能メニューから行います。

1. VS Codeの拡張機能を開く

   VS Codeを開き、サイドバーの拡張機能アイコンをクリックします。

   （ショートカットでも開けます。Windows：Ctrl + Shift + X、Mac：Cmd + Shift + X）

   

2. Claude Codeを検索

   検索欄に「Claude Code」と入力します。

   

3. 公式の拡張機能を選択

   パブリッシャーが「Anthropic」の拡張機能を選び、「Install」をクリックします。

   

   次のモーダルが表示される場合、内容を確認し問題が無ければインストールをクリックします。

   

4. インストールの完了

   インストール後、サイドバーにSparkアイコン（✱）が表示されれば完了です。表示されない場合は、VS Codeを再起動するか、コマンドパレットから「Developer: Reload Window」を実行してください。

   

Claude Codeにログイン・認証する

拡張機能のインストール後、初回起動時にClaudeにログイン・認証を行います。

1. Claude Codeパネルを開く

   VSCodeのウィンドウ上部にある、Sparkアイコンをクリックします。

   

2. ログイン方法を選択

   Claudeへのログイン方法を選択します。（※本記事では「Claude.ai Subscription」を選択）

   

   次のダイアログが表示された場合、内容を確認し問題なければ「開く」を選択します。

   

3. 認証の手続きをする

   ブラウザが開くので、Anthropicアカウントで認証の手続きをします。

   

4. ログイン・認証の完了

   VSCodeのパネルにプロンプト入力欄が表示されれば認証完了です。

   

Claude Codeの拡張機能：パネルの画面構成

Claude Codeパネルを開くと、画面の上部に各種ツール、下部にプロンプト入力欄が表示されます。ここでは、各画面の構成を紹介します。

上部エリア：

• 「Claude Code」タブ（左上・Sparkアイコン付き）

  Claude Codeパネルのタブ。複数タブを開いた場合はここで切り替えます。

  

• 現在のセッション名（「Untitled」と表示されている部分）

  現在のセッション名です。AIが最初のメッセージをもとに自動命名します。

  

• 時計アイコン（右上）

  セッション履歴です。ここから過去の会話を検索・再開できます。

  

• ＋アイコン（右上）

  新しいセッションを開始します。クリックすると新しいタブが開きます。

  

下部エリア：

• 「Ask Claude to edit...」入力欄

  プロンプト入力フォームで、Claude Codeへの指示を入力します。

  

• 「Prefer the Terminal experience? Switch back in Settings.」

  CLI風のターミナルモードに切り替えたい場合に選択します。

  

• ＋ アイコン（入力欄左下）

  ファイルやフォルダの添付メニューを開きます。

  

• スラッシュアイコン（ / ）（入力欄左下）

  コマンドメニューを開きます。モデル切り替えや設定変更などに使用します。

  

• ファイル名の表示（ファイルアイコン付き）

  コンテキストとして共有されているファイルが表示されます。

  

• 「Ask before edits」（右下）

  権限モードの表示です。モード（Plan、Auto-acceptなど）に切り替え可能です。

  

VS Code上でClaude Codeを使う方法

Claude Code VS Code拡張機能をインストールしたら、実際にVS Code上で操作してみましょう。ここでは基本的な使い方と、安全に使うためのポイントを説明します。

Claude Codeパネルを開く

Claude Codeパネルを開くには、エディタ右上のSparkアイコン（✱）をクリックします。

そのほかにも、以下の方法で開けます。

• サイドバーのSparkアイコンをクリック
• コマンドパレット（Cmd+Shift+P / Ctrl+Shift+P）で「Claude Code」と入力
• ステータスバー右下の「✱ Claude Code」をクリック

パネルはドラッグで好きな位置に移動できるため、エディタの横に配置すればコードを見ながら作業できます。

ファイルやフォルダを指定して質問する

@ メンションを使うと、ファイルやフォルダの内容をClaude Codeに共有して質問できます。

プロンプト入力欄で@に続けてファイル名を入力するとファイル単位で、フォルダ名の末尾に/をつけるとフォルダ単位で共有できます。

# ファイル単位の指定
@auth.js この処理の流れを教えて

# フォルダ単位の指定
@src/components/ このフォルダの構成を説明して

エディタ上でコードを選択して Option + K（Mac）/ Alt + K（Windows/Linux）を押すと、選択範囲が @ メンションとして自動挿入されます。見ている箇所をそのまま質問に含められます。

ファイルを指定している例：

sample.mdファイルを指定して要望を入力している状態

Claude Codeの変更内容を差分で確認する

Claude Codeがデータ内容を変更すると、チャットパネル内に追加・変更された行が緑色のハイライトで表示されます。

ファイルの差分表示の例：

変更内容を指示します。

以下のように、チャットパネルに変更箇所が表示されます。

Claude Code VS Code拡張機能を安全に使うポイント

VS Code拡張機能を使う際は、提案内容を確認してから反映する習慣が大切です。

差分表示で変更内容を確認し、意図した修正かどうかを判断してからAcceptする流れを基本にしましょう。この確認の習慣は、AIツールを活用するうえで今後も役立ちます。

関連記事：Claude CodeでYesを押す前に確認したいこと >>

Claude Code VS Code拡張機能とCLI版の違い

VS Code拡張機能とCLI版は、それぞれ得意な作業場面が異なります。どちらかを選ぶのではなく、作業内容に合わせて使い分けるのがおすすめです。

VS Code拡張機能が向いている作業

VS Code拡張機能は、コードやファイルを見ながらAIに相談したい場面に向いています。

• エディタで開いているファイルの内容をそのまま共有して質問できる作業
• 変更内容を差分表示で確認しながら進めたい作業
• 複数ファイルを行き来しながらAIに相談したい作業

CLI版が向いている作業

CLI版は、コマンド操作やプロジェクト全体への指示に向いています。

• ファイル作成やディレクトリ操作をコマンドベースで進めたい作業
• VS Code拡張機能では使えないCLI専用コマンドを使いたい作業
• ターミナル上で作業を完結させたい場面

VS Code拡張機能とCLI版をどう使い分けるか

VS Code拡張機能とCLI版は同じ会話履歴を共有しているため、状況に応じて切り替えながら使えます。

たとえば、VS Code拡張機能でコードを見ながらAIに相談し、大きなファイル操作が必要になったらCLI版に切り替える使い方が可能です。VS Codeの統合ターミナルでclaudeと入力すればCLI版を起動できます。

まずはVS Code拡張機能から使い始めて、コマンドに慣れてきたらCLI版も取り入れてみるのがスムーズです。

関連記事：Claude Codeを使うための4つのLinuxコマンド >>

Claude Code VS Code拡張機能に関するよくある質問

Claude Code VS Code拡張機能に関するよくある質問を以下にまとめました。

Q. Claude Code VS Code拡張機能は無料で使えますか？

Claude Code VS Code拡張機能自体は無料でインストールできます。ただし、Claude Codeの利用にはAnthropicアカウントと対応するプランへの加入が必要です。料金の詳細はAnthropicの公式料金ページをご確認ください。

Claude Code VS Code拡張機能を使うと何ができますか？

Claude Code VS Code拡張機能で特に便利なのが、VS CodeのサイドバーからそのままClaude Codeに指示を出せることです。CLIとVS Codeを行き来する手間を減らし、コードを見ながらAIに相談しやすくなります。

Q. CLI版をインストールしていなくても使えますか？

使えます。VS Code拡張機能にCLIが同梱されているため、拡張機能をインストールするだけでClaude Codeを使い始められます。

Q. VS Code拡張機能とCLI版は同時に使えますか？

同時に使えます。会話履歴も共有されているため、拡張機能で始めた会話をCLI版で引き継ぐことも可能です。

Q. Claude Code VS Code拡張機能のパネルを日本語化にできますか？

パネルのUIを日本語化する設定は現在ありません。ただし、プロンプト入力欄に日本語で指示を入力すれば、回答も日本語で返ってくるため、操作自体は日本語で問題なく行えます。

まとめ

この記事では、Claude Code VS Code拡張機能のインストール方法から基本的な使い方、CLI版との使い分けまでを解説しました。

学んだ内容：

この記事の要点は以下の通りです。

• CLIの便利さを活かしたIDE連携の拡張機能
• 必要な準備はVS Code（1.98.0以上）とAnthropicアカウントの2つ
• CLI未インストールでも拡張機能から始められる構成
• @メンションによるファイル・フォルダの指定方法
• 差分表示で確認してからAcceptする安全な運用習慣
• 会話履歴の共有による拡張機能とCLI版の柔軟な使い分け

VS Code拡張機能を使うことで、ターミナルとエディタを行き来していた時間が減り、作業の効率が上がるでしょう。いつかやろうと思っていた作業に手を伸ばせる時間が作れるかもしれません。

関連記事

Claude Codeに関する記事の一覧です。インストール後の応用知識として活用ください。

• Claude Code入門｜初心者にも始められる安心ガイド >>
• Claude Codeを使うための4つのLinuxコマンド >>
• Claude Codeのインストール方法 >>
• CLAUDE.mdとSkillsの違いと使い分け >>
• Claude Codeの能力を引き出す｜コンテキストエンジニアリングとは >>
• Claude CodeでYesを押す前に確認したいこと >>

参考資料

以下のリンクは、この記事で解説した手順や概念に関連する参考資料です。より詳しく学びたい方は、ぜひご覧ください。

• Claude 公式
• Claude 公式 - VS CodeでClaude Codeを使用する
• Claude Code for VS Code