Claude CodeをVS Codeで使う方法とは？拡張機能の導入手順から主要機能・CLIとの違いまで解説

Claude CodeはVS Code上でも利用できる

Claude Codeは、公式拡張機能を導入することでVS Code上のGUIから利用できます。VS Codeで使う方法は2つあり、1つはAnthropicが提供する公式拡張機能、もう1つはVS Codeの統合ターミナルでCLI版を起動する方法です。公式ドキュメントでは、エディタに統合されたグラフィカルな画面で操作できる拡張機能の利用が推奨されています。

拡張機能版では、チャット形式の専用パネルからAIに指示を出し、提案された変更をエディタ上で確認しながら開発を進められます。コマンドライン操作に慣れていないエンジニアでも、普段のVS Codeの操作感のままAIエージェントを扱える点が拡張機能版の利点です。

出典：Use Claude Code in VS Code | Claude Code Docs

なお、Claude Code自体の概要や料金プランについてはこちらの記事をご覧ください。

関連記事：Claude Codeとは？特徴・できること・料金プランまでわかりやすく解説

Claude Code拡張機能をVS Codeに導入する手順

Claude Code拡張機能の導入は、インストール・サインイン・起動の3ステップで完了します。順に手順を解説します。

• マーケットプレイスから拡張機能をインストールする
• Anthropicアカウントでサインインする
• Sparkアイコンからパネルを開いて指示を出す

マーケットプレイスから拡張機能をインストールする

Claude Code拡張機能は、VS Code内の拡張機能ビューからインストールします。アクティビティバーの拡張機能アイコンを開き、検索欄に「Claude Code」と入力して、Anthropicが公開している公式の拡張機能を選びましょう。

インストールの際は、発行元（Publisher）がAnthropicであることを必ず確認してください。似た名前の非公式な拡張機能も存在するため、発行元の確認は安全に使ううえでの基本です。

また、拡張機能にはCLI本体が同梱されているため、ターミナル版を別途インストールする必要はありません。VS Codeのなかだけで準備が完結します。

Anthropicアカウントでサインインする

インストール後に拡張機能を初めて開くと、Anthropicアカウントへのサインインが求められます。ClaudeのProプラン以上のサブスクリプション、またはAPIアカウントのいずれかで認証する流れです。

個人での検証ならサブスクリプション、システム連携や自動化が目的ならAPI課金と、用途に応じて認証方法を選ぶと迷いません。会社で契約しているTeamプランのアカウントがあれば、そのままサインインして利用できます。

なお、Amazon BedrockやGoogle Vertex AIといったクラウドサービス経由で利用する場合は、サインインの代わりに環境変数での設定が必要です。

Sparkアイコンからパネルを開いて指示を出す

セットアップが完了したら、エディタ上に表示されるSpark（スパーク）アイコンからClaude Codeのパネルを開きます。チャット欄に「この関数にテストを追加して」のように自然言語で入力するだけで、AIが作業を開始する仕組みです。

パネルはサイドバーへの固定やタブとしての表示にも対応しており、画面構成を好みに合わせられます。ファイルを開いていない状態ではアイコンが表示されない場合があるため、最初は対象プロジェクトの任意のファイルを開いてから操作するとスムーズです。

VS Code版Claude Codeの主要機能

VS Code版Claude Codeには、GUIならではの機能が複数備わっています。とくに開発効率に直結する3つの機能を紹介します。

• @メンションでファイルや選択範囲を正確に渡せる
• 差分表示で変更内容を確認してから反映できる
• プランの事前確認と複数会話の並行作業に対応する

@メンションでファイルや選択範囲を正確に渡せる

@メンションは、参照してほしいファイルや行範囲をAIへ正確に伝える機能です。チャット欄で「@」に続けてファイル名を入力すると候補が絞り込まれ、エディタ上でコードを選択した状態なら、行範囲を含めた参照を挿入できます。

「どのファイルのどの部分について話しているか」を曖昧さなく共有できるため、的外れな修正提案が減り、やり取りの往復回数を抑えられます。フォルダ単位の指定にも対応しており、規模の大きいプロジェクトでも必要な範囲だけをAIに渡せる設計です。

差分表示で変更内容を確認してから反映できる

差分表示は、AIが提案した変更を反映前に確認できる機能です。変更対象のファイルについて、既存の内容と新しい内容がVS Codeの画面に並べて表示され、内容を見たうえで承認するか、修正を指示するかを選べます。

普段のコードレビューと同じ感覚で変更点を追えるため、AIの作業をブラックボックスにせず、人の目によるチェックを開発の流れに自然に組み込める点が利点です。問題のある提案はその場で却下し、追加の指示を与えて作り直させることもできます。

プランの事前確認と複数会話の並行作業に対応する

VS Code版Claude Codeは、実装前のプラン（作業計画）の確認・編集と、複数会話の並行作業に対応しています。AIが提示した計画を人が手直ししてから実行へ進められるため、意図とずれた大規模な変更を未然に防げます。

また、会話はタブや別ウィンドウで複数同時に開けるので、機能追加の実装とバグの調査を別々の会話で並行して進めるといった、チーム開発に近い使い方が1人でも実現します。会話ごとに履歴と文脈は独立して保持されます。

出典：Use Claude Code in VS Code | Claude Code Docs

VS Code版とCLI版の違いと使い分け

VS Code版とCLI版の違いは、操作画面と得意な用途にあります。両者は同じClaude Codeを別の入り口から使うものであり、機能の本質は共通ですが、日々の使い勝手には差があります。

項目	VS Code版（拡張機能）	CLI版（ターミナル）
操作画面	チャットパネル中心のGUI	コマンドライン
変更の確認	エディタ上の差分表示	ターミナル上の差分表示
向いている用途	日常のコーディング・レビュー中心の開発	スクリプト連携・CI組み込み・自動化
向いている人	GUI操作に慣れたエンジニア	ターミナル中心で作業するエンジニア

エディタで手を動かしながら開発する場面ではVS Code版、処理の自動化やほかのツールとの連結ではCLI版と、併用する考え方も有効です。CLI版での実践的な進め方は、Claude Codeで実践するバイブコーディングとは？AIエージェントを活かす開発手法を解説で解説しています。

VS CodeでClaude Codeを使う際の注意点

VS Code版は手軽に使える反面、運用面で押さえておきたいポイントがあります。導入前に確認すべき3つの注意点を紹介します。

• 編集の自動承認は範囲を限定して使う
• MCPサーバーなど一部の設定はCLI側でおこなう
• 生成コードのレビュー工程を省略しない

編集の自動承認は範囲を限定して使う

編集の自動承認（オートアクセプト）は、便利さとリスクが表裏一体の機能です。AIの変更を確認なしで反映できるため作業は速くなりますが、重要な設定ファイルまで書き換えられる懸念が残ります。

公式ドキュメントでも、自動編集の権限を広げた場合、IDEの設定ファイル経由で想定外の動作につながる可能性が指摘されています。軽微な修正に限って自動承認を使い、影響の大きい変更は差分を確認してから反映する運用を基本にしましょう。

MCPサーバーなど一部の設定はCLI側でおこなう

MCPサーバーやサブエージェントといった一部の高度な設定は、拡張機能の画面からではなくCLI側でおこなう仕様です。VS Code版だけでは完結しない設定項目があることを、あらかじめ把握しておく必要があります。

とはいえ、設定自体はVS Codeの統合ターミナルから実行できるため、エディタを離れずに作業可能です。「日常操作は拡張機能、込み入った設定はターミナル」と役割を分けて考えると、両者を無理なく使いこなせます。

生成コードのレビュー工程を省略しない

GUIで手軽に使えるからこそ、生成コードのレビュー工程を省略しない姿勢が重要です。差分表示で目を通したつもりでも、仕様の解釈違いやセキュリティ上の問題は、画面上の見た目だけでは判別できません。

動作確認・テスト・静的解析を含めたチェックの流れをチームで決めておき、AIの出力を信頼しつつも検証する体制を保ちましょう。AI開発ツール利用時のリスク全般は、バイブコーディングのセキュリティリスクとは？事故事例と実践的な対策を解説もあわせてご覧ください。

Claude Codeを活用したシステム開発ならブライセンへ

VS CodeとClaude Codeの組み合わせは開発スピードを大きく引き上げますが、業務システムとして品質を担保するには、設計・レビューを含めた開発体制づくりが求められます。

ブライセンでは、AI駆動開発の知見と国内外のエンジニアリング体制を活かし、AIツール導入の支援から本番品質のシステム開発までを一貫してサポートしています。

まとめ

Claude Codeは、公式拡張機能を導入することでVS Code上のGUIから利用できます。インストール・サインイン・パネル起動の3ステップで始められ、@メンションによる正確なコンテキスト共有から、差分表示による変更確認、プランの事前チェック、複数会話の並行作業まで、エディタに統合された形でAIエージェントを扱えます。

CLI版と機能の本質は共通のため、日常の開発はVS Code版、自動化やCI連携はCLI版と、用途で使い分ける運用が現実的です。

一方で、自動承認の使い方やレビュー体制づくりといった注意点も忘れてはなりません。自社の開発スタイルに合わせて拡張機能を取り入れ、VS Codeを起点とした効率的なAI駆動開発をかなえましょう。