Claude CodeをVS Codeで使うと何が変わるのか
関連記事：Claude Codeとは？できること・料金・使い方と社内導入の判断軸
エディタ内でコードの参照から差分確認まで進められる
Claude Codeは、Anthropicが提供するAIコーディングエージェントです。AIコーディングエージェントとは、コードについて答えるだけでなく、許可された範囲でファイルを読み、編集案を作り、コマンドも実行する仕組みです。
VS Codeの公式拡張機能を使うと、この処理をエディタ内のパネルから操作できます。現在開いているファイルや選択したコードを文脈として渡し、提案された変更を左右の差分画面で確認できる点が、ターミナルだけで操作する場合との大きな違いです。
Claude Code全体の仕組み、料金、導入時の注意点との関係も整理しながら、本記事ではVS Code拡張機能の導入と操作に範囲を絞ります。
エンジニアのAI利用が広がる中で操作の往復を減らせる
GiftXの「ビジネス職生成AI活用実態調査2026」では、エンジニアのAI利用率は74.7%でした。コード生成だけでなく、技術調査、テストコード、バグ調査など複数の工程でAIが使われています。VS CodeにClaude Codeを組み込む意味は、こうした作業を別画面へ移らずに進めやすくすることにあります。
詳細な調査データは「ビジネス職生成AI活用実態調査（2026年版）」にてご覧ください。
Claude CodeのVS Code拡張とCLIの違い
VS Code拡張とCLI（Command Line Interface、文字のコマンドで操作する画面）は、別の製品ではありません。同じClaude Codeを、どの画面から操作するかが異なります。公式ドキュメントでは、VS Code拡張にCLIが含まれ、統合ターミナルから高度な機能へアクセスできると説明されています。
| 観点 | VS Code拡張 | CLI |
|---|---|---|
| 主な操作場所 | エディタ内のClaude Codeパネル | ターミナル |
| コードの指定 | 選択範囲や@メンション | ファイル名や指示文 |
| 変更確認 | 左右の差分画面で確認 | ターミナル上の表示やGit差分で確認 |
| 得意な作業 | コードを見ながら相談・修正 | スクリプト実行、リモート環境、自動処理 |
| 向いている人 | 画面で変更を確認したい人 | コマンド操作や自動化に慣れた人 |
VS Code拡張は、計画や変更案を視覚的に確認しながら進めたい場面に向きます。一方、CLIは--printを使った非対話処理やAgent SDKによる自動化など、ターミナル固有の使い方まで扱えます。どちらか一方へ統一する必要はなく、編集時は拡張、定型処理はCLIという併用ができます。
設定、プロジェクトのメモ、MCP（Model Context Protocol、外部ツールとの接続規格）の設定は、ローカルの利用画面をまたいで共有されます。拡張から始めても、後からCLIへ移るために設定を一から作り直す必要はありません。
迷う場合は、変更内容を目で追いたい作業をVS Code拡張へ、繰り返し実行する処理をCLIへ分けると判断しやすくなります。
Claude CodeをVS Codeへインストールする手順
導入前に必要なのは、VS Code 1.98.0以上とAnthropicアカウントです。公式拡張機能を入れるとCLIも同時に使えるため、CLIを先に別途インストールする必要はありません。
手順1｜VS Codeのバージョンを確認する
VS Codeのメニューからバージョン情報を開き、1.98.0以上であることを確認します。古い場合は先にVS Codeを更新してください。拡張機能を検索しても表示されない、インストールできないという問題を避けやすくなります。
手順2｜Anthropic公式のClaude Code拡張を入れる
拡張機能ビューを開くショートカットは、MacではCmd+Shift+X、WindowsとLinuxではCtrl+Shift+Xです。検索欄に「Claude Code」と入力し、発行元がAnthropicである公式拡張機能を選んでインストールします。
名称が似た非公式拡張もあるため、名前だけで判断しないことが大切です。Visual Studio Marketplaceの公式Claude Code拡張から開けば、取り違えを防げます。
手順3｜パネルを開いてサインインする
ファイルを開いた状態で、エディタ右上のスパークアイコンをクリックします。左のアクティビティバー、コマンドパレット、画面右下のステータスバーから開くこともできます。
初回はサインイン画面が表示されます。「Sign in」を選び、ブラウザで認証を完了してください。認証後にパネルへ戻れば準備は完了です。利用できる契約形態や上限は変わる可能性があるため、契約前にはClaude Codeの料金プランを整理した記事とAnthropicの公式画面で最新条件を確認してください。
VS CodeでのClaude Codeの基本的な使い方
導入後は、対象を伝える、依頼する、変更を確認するという3つの動作を覚えれば使い始められます。最初から大きな機能を作らせず、説明や小さな修正で一連の流れを確かめましょう。
開いているコードやファイルを指定する
Claude Codeは、エディタで選択しているコードを自動的に参照できます。MacではOption+K、WindowsとLinuxではAlt+Kを押すと、選択範囲を@file.ts#5-10のような参照としてプロンプトへ挿入できます。
プロンプト欄で@に続けてファイル名やフォルダ名を入力する方法もあります。例えば「@src/auth/の認証処理を説明して」のように指定すると、対象範囲が明確になります。大きなリポジトリでは、最初から全体を読ませるより、関係するフォルダから渡すほうが意図を合わせやすくなります。
目的・対象・制約を分けて依頼する
依頼文には、達成したいこと、触ってよい範囲、守る条件を含めます。例えば「@login.tsで空文字を許可する不具合を直してください。既存テストは変更せず、修正後にテストを実行してください」と書けば、作業範囲と完了条件が伝わります。
長い指示を一度に書く必要はありません。複数行で入力するときはShift+Enterを使います。提案を見てから「エラーメッセージは既存の表現に合わせて」と追加し、段階的に精度を上げる進め方もできます。
差分を確認してから変更を受け入れる
Claude Codeがファイルを変更しようとすると、元の内容と提案内容を並べた差分画面が開きます。内容を確認し、受け入れる、拒否する、別の修正を依頼するという判断ができます。
提案側を差分画面で直接編集してから受け入れることも可能です。その場合、Claude Codeには人が内容を変更したことが伝わるため、元の提案どおりに反映されたと誤認しません。適用後はテストや型チェックを実行し、見た目の差分だけでは分からない影響も確認してください。
AIエージェントを「どう作り、どう育てるか」を、GiftX記事制作エージェントの実物で解説。
Claude CodeをVS Codeで安全に使う作業フロー
安全に使うには、権限を弱めることだけでなく、作業の節目ごとに人が判断できる形を保つ必要があります。次の順で進めると、変更理由と影響範囲を追いやすくなります。
関連記事：Claude Code は安全に使える？セキュリティリスクと最初にすべき設定
1. まず説明だけを依頼する
初めて触るリポジトリでは、「変更せずに認証処理の流れを説明してください」と依頼します。現在の実装、関連ファイル、テストの場所を把握してから修正へ進めば、不要なファイル変更を減らせます。
2. Planモードで変更方針を確認する
Planモードでは、Claude Codeが実行前に計画を示します。VS Codeでは計画がMarkdown文書として開き、インラインコメントで修正点を伝えられます。影響範囲が広い変更や、レビュー担当者と方針を共有したい作業に向いています。
3. 通常モードで権限を個別確認する
通常モードでは、ファイル編集やコマンド実行などの操作前に確認が入ります。便利さを優先して最初から自動承認にせず、どの操作で許可が求められるかを把握してください。外部通信や依存関係の追加は、コマンドの意味を理解してから承認します。
4. 差分とテスト結果を別々に確認する
差分が意図どおりでも、ビルドやテストが通るとは限りません。変更範囲、削除された処理、追加された依存関係を確認したうえで、テスト、型チェック、ビルドを実行します。最後の採否を人が決める前提は、権限モードを変えても維持します。
Claude CodeをチームのVS Code環境で揃える方法
個人ごとに同じ説明を繰り返すより、リポジトリ側へルールを残すほうが再現性を高められます。Claude Codeでは、CLAUDE.mdにプロジェクト固有の規約やコマンドを記録できます。
例えば、使用するパッケージマネージャー、テストコマンド、変更してはいけないディレクトリ、命名規則を短く整理します。セッションを始めるたびに読み込まれるため、担当者が変わっても同じ前提から作業を始められます。
権限の共有設定は.claude/settings.json、個人だけの設定は.claude/settings.local.jsonに分けます。安全な読み取りコマンドなど、全員が同じ条件で許可してよいものだけを共有対象にします。個人の認証情報や端末固有のパスはリポジトリへ含めません。
チームでの設定設計は、Claude Codeのデータ学習をオプトアウトする設定も確認し、契約と情報管理の方針を揃えてください。
Claude CodeのVS Code活用イメージ
例えば、既存機能の不具合修正では、対象ファイルを選択して原因説明を求め、計画を確認し、修正案とテストを作らせる流れが考えられます。人は差分とテスト結果を確認し、意図と異なる部分だけを戻します。
この形は、コード生成を丸ごと任せる運用とは異なります。AIに調査、変更案、テスト実行を担当させ、人が方針と採否を持つ分担です。例えば、Claude CodeやCodexにコード生成、リファクタリング、テスト作成を任せ、人がレビューする運用が考えられます。
同種の運用では、最初から全工程を対象にせず、テスト作成や小規模な修正など、完了条件を確認しやすい作業から始めると流れを評価しやすくなります。ツールの操作を覚えることより、任せる範囲とレビュー条件を決めることが定着につながります。
例えば、最初の1週間はテスト作成だけを対象にし、修正漏れ、レビュー時間、再依頼の回数を記録します。その結果を見てから、バグ調査や小規模な機能修正へ広げると、作業ごとの向き不向きを判断できます。
開発以外も含めて最初に任せる業務を探す場合は、職種別AI活用事例集に選定例をまとめています。
Claude CodeがVS Codeで動かないときの確認順
問題が起きたときは、拡張機能、認証、環境変数、プロジェクトの順で切り分けます。複数の設定を一度に変えると原因が分からなくなるため、上から一つずつ確認してください。
拡張機能やアイコンが表示されない
VS Codeが1.98.0以上か、公式拡張が有効になっているかを確認します。インストール直後に表示されない場合はVS Codeを再起動するか、コマンドパレットから「Developer: Reload Window」を実行します。ファイルを開いていないとエディタ右上のスパークアイコンは表示されないため、アクティビティバーやステータスバーも確認してください。
サインイン画面へ戻ってしまう
パネルに「Not logged in」と表示された場合は、再度サインインを実行します。画面が更新されないときは、ウィンドウを再読み込みしてください。ブラウザで認証したアカウントと、使う予定の契約が一致しているかも確認します。
APIキーを設定したのに認識されない
シェルへANTHROPIC_API_KEYを設定していても、VS Codeが環境変数を引き継いでいない場合があります。ターミナルからcode .でVS Codeを起動するか、Claudeアカウントでサインインします。認証情報そのものをプロジェクトファイルへ貼り付けないでください。
原因が分からない
Claude Code内で/doctorを実行すると、インストール、設定、MCP、コンテキスト使用量などの状態を確認できます。Claude Code自体が起動しない場合は、ターミナルでclaude doctorを実行します。表示された項目を一つずつ直し、変更後に再読み込みします。
Claude CodeのVS Code導入チェックリスト
導入前後に確認する項目を一覧にします。チームで利用する場合は、個人の端末だけでなく、リポジトリへ共有する設定も確認してください。
- 動作環境：VS Code 1.98.0以上へ更新したか
- 拡張機能：発行元がAnthropicの公式拡張を選んだか
- 認証：利用するAnthropicアカウントでサインインしたか
- 対象範囲：最初に試す小さな修正や説明タスクを決めたか
- 権限：通常モードまたはPlanモードから始めるか
- レビュー：差分、テスト、型チェック、ビルドの確認担当を決めたか
- 共有設定：
CLAUDE.mdと.claude/settings.jsonの役割を分けたか - 機密情報：認証情報をプロンプトやリポジトリへ含めないルールがあるか
全項目を最初から完璧に整える必要はありません。まず一つのリポジトリと一つの作業に絞り、レビューで困った点をCLAUDE.mdや共有設定へ戻すと、運用を段階的に改善できます。
全国8,000人調査で、AIの活用方法によって生産性向上に約3.8倍の差が生まれることが判明。
Claude CodeをVS Codeへ導入するときに確認したい安全面
VS Code拡張はコードとターミナルへ近い位置で動くため、チャットサービスと同じ感覚で権限を広げないことが大切です。Claude Codeは操作前の権限確認を備えていますが、許可する内容を判断する責任は利用者に残ります。
とくに、パッケージの追加、外部サイトから取得したスクリプトの実行、機密情報を含むファイルの読み取りは、目的と影響を確認します。信頼できないリポジトリを開いた直後は、ファイル内の指示をそのまま実行せず、Planモードや読み取り中心の依頼から始めてください。
自動承認は、対象範囲とコマンドが予測できる作業で使います。通常の開発環境で一律に許可するのではなく、必要ならDev Containerなどで実行環境を分けます。共有設定では、拒否規則が許可規則より優先されるため、禁止対象を先に決める方法もあります。
AIエージェント導入で陥りがちな3つの落とし穴
Claude Codeの操作を覚えても、導入範囲を決めなければ活用は続きません。ツールの設定と業務への組み込みを分け、次の3つを避けます。
いきなり全てをやろうとする
開発工程を一度に置き換えると、どの変更が成果や不具合につながったのかを判断できません。まずテスト作成、コード説明、小さな修正など、完了条件が明確な一つの作業に絞ります。
壮大なAI戦略から考えて手が止まる
全社の方針や将来像を固めてから始めようとすると、実際のコードで検証する機会が遅れます。扱えるデータ、必要な権限、レビュー時間を一つのリポジトリで確認し、その結果を次の判断材料にします。
汎用チャットだけで業務フローの品質に届かせようとする
都度チャットへコードを貼るだけでは、リポジトリの規約、実行コマンド、レビュー基準を毎回伝える必要があります。CLAUDE.mdや共有設定、テストを組み合わせ、同じ条件で繰り返せる流れを作ります。
スモールスタートで1業務をAIエージェントに任せる
最初に任せる一つの作業を決め、依頼、権限確認、差分レビュー、テストまでを一周させます。うまくいかなかった点は指示や設定へ戻し、同じ作業で再度試します。
この流れを数回繰り返してから、隣接する作業へ範囲を広げてください。Claude Codeを入れること自体を目的にせず、レビュー可能な単位で運用を育てることが、AIエージェントを定着させる近道です。GiftX AIエージェント構築支援でも、1業務単位の設計から本番運用までを支援範囲としています。
Claude CodeとVS Codeに関するよくある質問
Claude CodeのVS Code拡張だけで使えますか？
はい。公式拡張にはCLIが含まれるため、拡張機能をインストールしてAnthropicアカウントでサインインすれば始められます。高度なターミナル操作が必要になったときは、VS Codeの統合ターミナルからCLIを併用できます。
VS Code拡張とCLIはどちらを選ぶべきですか？
変更を画面で確認しながら進めたい場合はVS Code拡張が向きます。スクリプト、自動処理、リモート環境が中心ならCLIが向きます。同じプロジェクトで併用できるため、作業ごとに選べます。
Claude Codeへ日本語で指示できますか？
日本語の文章で目的、対象、制約を伝えられます。複数行の指示はShift+Enterで改行します。回答言語が意図と異なる場合は、依頼文やCLAUDE.mdに使用言語を明記し、チームで同じ規則を共有してください。
変更を自動で適用されるのが不安です
通常モードまたはPlanモードから始めてください。差分画面で変更を確認し、拒否や修正依頼もできます。自動承認は、作業範囲と実行コマンドを予測できる環境に限って使います。
まとめ｜Claude CodeはVS Codeで小さな修正から始める
Claude Codeの公式VS Code拡張を使うと、コードの選択、依頼、差分レビューをエディタ内で進められます。必要な環境はVS Code 1.98.0以上とAnthropicアカウントで、公式拡張にはCLIも含まれます。
導入後は、対象ファイルを指定し、Planモードや通常モードで作業内容を確認し、差分とテスト結果を人が判断します。最初から広い権限や大きな作業を任せず、一つの修正やテスト作成から始めてください。
自社の開発業務へAIエージェントを組み込みたい方へ
本記事で紹介したAIエージェントの活用に向けて、自社の業務でも具体的に進めたい・相談したいとお考えの方は、ぜひGiftX AIエージェント構築支援までお問い合わせください。
GiftX AIエージェント構築支援では、貴社の業務に合わせて1業務単位のスモールスタートから本番運用まで、AIエージェント構築をワンストップで支援します。ユースケースの洗い出しから、PoC（Proof of Concept、効果検証のための試験導入）、本番運用、社内ナレッジ化まで伴走します。
AI活用にご関心のある方は、ぜひ一度ご相談ください。
▶ GiftX AIエージェント構築支援の詳細・お問い合わせはこちら
