Claude CodeをVS Codeで使うには？連結方法や使い方・拡張機能の特徴も解説

Claude Codeはターミナルだけでなく、エディタ上でも動かせます。VS Codeと組み合わせれば、コード編集・ファイル管理・Git操作まで一括して任せられる開発環境が手に入ります。

ただ、連携方法が2種類あり、それぞれ手順が異なるため、どちらを選べばいいか迷うケースも多くあります。

そこでこの記事では、実際の使用例も交えながら、Claude CodeをVS Codeで使う方法を解説します。セットアップ手順も掲載しているので、ぜひ参考にしてください。

Claude Codeの特徴をより詳しく知りたい人は、次の記事を参考にしてください。

Claude CodeはVS Codeで利用できる

Claude Codeは、VS Code上で利用できます。

連携方法は2種類あり、「拡張機能を使う方法」と「ターミナルから使う方法」があります。どちらもVS Codeのエディタ環境を維持したまま、Claude Codeの機能を呼び出せます。

VS Codeと組み合わせることで、コード生成・編集・ファイル管理を一つのエディタ上で完結できる点が大きな特徴です。Claude Code単体で使うよりも、開発作業の効率が上がります。

Claude CodeをVS Codeで使う2つの方法

ここからはVS CodeでClaude Codeを使う方法を、次の2つに分けて解説します。

ターミナルから使う方法

VS Codeには統合ターミナルが内蔵されており、そこからClaude Code CLIを起動できます。

コマンドラインでの操作に慣れている人は、エディタを切り替えずにターミナルとコードを並べながら作業できるため、作業効率が上がります。

ターミナルから使う場合の大まかな流れは次の通りです。

• Claude Code CLIをNode.jsでインストールする
• VS CodeのターミナルでClaude Codeを起動する
• ターミナル上で指示を入力してコードを生成・編集する

CLIベースのため、テキスト入力で操作します。GUIに比べると視覚的なわかりやすさは劣りますが、細かい操作をキーボードだけで完結させられます。

VS Codeの拡張機能で使う

VS Codeのマーケットプレイスには、Claude Codeを呼び出せる拡張機能が提供されています。

拡張機能を使うと、コマンドを覚えなくてもパネル上からClaude Codeに指示を送れます。GUIで操作できるため、CLIに慣れていない初心者でも使いやすい方法といえます。

インストール後はサイドバーやコマンドパレットから起動して、開いているファイルをそのまま参照させながら作業を進められます。

VS CodeでClaude Codeを使う3つのメリット

VS CodeでClaude Codeを使うことで得られる主なメリットは3つです。ここからは下記のメリット別に、具体的な内容を解説します。

エディタ上でコード編集が直接反映される

Claude CodeがVS Code上で動作するため、生成されたコードがそのままエディタに反映されます。

ブラウザ版のClaude.aiでコードを生成した場合、出力されたコードをコピーしてエディタに貼り付ける手間が発生します。VS Codeと連携すれば、貼り付け作業が不要になり、差分表示で変更内容をその場で確認できます。

たとえば、既存の関数をリファクタリングする際も、変更前後の差分をエディタ上で確認してから適用できるため、意図しない変更を防ぎやすくなります。

プロジェクト全体を把握した提案が得られる

Claude Codeは、プロジェクトのフォルダ構造やファイルの内容を読み込んだうえで提案を生成します。

1ファイルだけを渡して指示を出す場合と違い、複数ファイルにまたがる依存関係やコーディング規約を考慮した提案を受け取れます。大規模なコードベースでも、ファイル間の整合性を保ちながら修正を進められます。

たとえば、APIのエンドポイントを新規追加する場合、既存のルーティングファイルや型定義ファイルを参照した一貫性のあるコードを生成してくれます。

Git操作やファイル管理を自動化できる

Claude Codeは、コード生成だけでなくGitのコミットやブランチ操作、ファイルの作成・移動・削除も実行できます。

「この変更をコミットして」と指示するだけで、コミットメッセージの生成からgit commitの実行まで自動で行います。ファイル操作とバージョン管理をAIに任せることで、本来の実装に集中できる環境が作れます。

開発中にリファクタリングでファイルを分割する場合なども、移動と参照先の修正をまとめて指示できます。

VS CodeでClaude Codeを使う3つのデメリット

メリットがある一方、注意すべきデメリットもあります。事前に把握しておくことで、導入後の想定外のトラブルを減らせます。ここからはデメリットを、3つにまとめて解説します。

API料金が従量課金で発生する

Claude Codeを利用するには、AnthropicのAPIキーが必要です。APIの利用料金は従量課金制で、入出力トークン数に応じて費用が発生します。

Claude 3.5 Sonnetの場合、入力100万トークンあたり3ドル、出力100万トークンあたり15ドルの料金が設定されています（2025年7月時点）。

長い会話や大きなファイルを繰り返し読み込ませると、想定以上の費用が発生することがあります。使い始める前に予算の上限を設定しておくことをおすすめします。

Claude CodeでのAPI利用について詳しく知りたい人は、次の記事を参考にしてください。

大規模プロジェクトではレスポンスが遅くなる

プロジェクトのファイル数が多い場合、Claude Codeがコンテキストを収集する処理に時間がかかります。

数百ファイルを超えるような大規模プロジェクトでは、1回の指示に対するレスポンスが数十秒かかるケースもあります。モデルが処理できるコンテキスト長には上限があるため、すべてのファイルを読み込ませることはできません。

対策としては、CLAUDE.mdや.claudeignoreファイルを使って、読み込ませるファイルの範囲を絞ることが有効です。

意図しないファイル変更があることも

Claude Codeはファイルの読み書きや削除を自動で実行できるため、指示の内容によっては関係のないファイルまで変更されるリスクがあります。

たとえば「テストコードを追加して」と指示した際に、既存のファイルが書き換えられることも起こり得ます。作業前にGitでコミットしておくか、チェックポイント機能を活用してすぐに巻き戻せる状態を作っておくことが重要です。

Claude CodeはVS Codeで使うべき？

VS Codeユーザーには、Claude Codeとの連携をおすすめします。

コードの差分確認や承認がエディタ上で完結し、ブラウザ版と比べて作業の往復が減ります。とくに複数ファイルを扱う開発や、Git操作を頻繁に行うプロジェクトほど恩恵が大きくなります。

一方、API料金が継続的に発生する点は見逃せないデメリットです。小規模な作業のみに使う場合や、コストを抑えたい場合は、ブラウザ版のClaude.aiと使い分けることも選択肢の一つです。

目安として、月に数時間以上コーディングに費やすエンジニアであれば、作業効率の向上がコストを上回る場面が多くなります。

初心者からClaude Codeを使い始める方法をより詳しく知りたい人は、次の記事を参考にしてください。

VS Codeの拡張機能でClaude Codeを使う手順

ここからはVS Codeの拡張機能を使う手順を、次の2ステップで解説します。

1.拡張機能をインストールする

VS Codeの拡張機能マーケットプレイスから、「Claude Code」を検索してインストールします。

具体的な手順は次の通りです。

• VS Codeを起動する
• 左サイドバーの拡張機能アイコン（四角が4つのアイコン）をクリックする
• 検索バーに「Claude Code」と入力する
• Anthropic公式の拡張機能を選択してインストールボタンをクリックする
• インストール完了後、VS Codeを再起動する

インストールが完了すると、左サイドバーにClaude Codeのアイコンが表示されます。

2.自身のアカウントと連携する

拡張機能をインストールしたら、AnthropicのAPIキーを設定してアカウントと連携します。

具体的な手順は次の通りです。

• Anthropic ConsoleにアクセスしてAPIキーを発行する
• VS Codeのコマンドパレットを開く（Ctrl+Shift+P / Cmd+Shift+P）
• 「Claude Code: Set API Key」を選択する
• 発行したAPIキーを入力して確定する

APIキーの入力後、VS CodeのClaude Codeパネルからすぐに利用を開始できます。課金が始まるタイミングはAPIキーを使って実際にリクエストを送った時点からです。

ターミナル連携でClaude Codeを使う手順

ここからはターミナルを使ってVS CodeでClaude Codeを動かす手順を、次の3ステップで解説します。

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

Claude Code CLIのインストールには、Node.js（バージョン18以上）が必要です。

インストールが完了したら、次のコマンドを実行してください。

npm install -g @anthropic-ai/claude-code

インストール後、下記コマンドでバージョンを確認できます。

claude --version

バージョン番号が表示されれば、インストール成功です。

2.VS Code統合ターミナルで起動する

CLIのインストール後、VS Codeの統合ターミナルからClaude Codeを起動します。

起動手順は次の通りです。

• VS Codeでプロジェクトフォルダを開く
• 統合ターミナルを開く（Ctrl+@ / Ctrl+Shift+@）
• 「claude」コマンドを入力して起動する
• 初回起動時はAnthropicアカウントへの認証を求められるため、ブラウザで認証する

認証が完了すると、ターミナル上でClaude Codeへの指示入力が可能になります。プロジェクトルートで起動することで、フォルダ構造全体を認識させた状態で作業できます。

Windowsで導入する際の注意点

Claude Code CLIはLinux・macOSを主な対応環境としており、Windows環境では追加の設定が必要です。

WindowsでClaude Codeを使う場合は、次のいずれかの方法を取ります。

WSL2を使う場合は、次の手順が必要です。

• WSL2とUbuntuをインストールする
• Ubuntu上でNode.jsをインストールする
• Ubuntu環境内でClaude Code CLIをインストールする
• VS CodeにRemote – WSL拡張機能を導入してWSL環境に接続する

PowerShellやCommand Promptから直接動かすことは現時点（2025年7月）では推奨されていません。

VS CodeにおけるClaude Codeの使い方

ここからはVS CodeにおけるClaude Codeの主な使い方を5つにまとめて解説します。

特定ファイル・フォルダを読み込ませる方法

Claude Codeに特定のファイルやフォルダを読み込ませるには、@記号を使ってファイルパスを指定します。

ターミナルで次のように入力します。

@src/components/Button.tsx このコンポーネントにhoverスタイルを追加して

フォルダを丸ごと読み込ませる場合は次のように指定します。

@src/api/ このフォルダ内のエラーハンドリングを統一して

@指定を使うことで、Claude Codeが参照するファイルを絞り込め、余計なトークン消費を抑えられます。関係のないファイルを読み込ませないことで、レスポンス速度の改善にもつながります。

提案コードの差分を確認・承認する方法

Claude Codeがコードを変更する際、VS Code上では変更前後の差分がハイライト表示されます。

差分確認の流れは次の通りです。

• Claude Codeが変更案を生成する
• エディタ上に差分（追加は緑・削除は赤でハイライト）が表示される
• 変更内容を確認して「承認」または「拒否」を選択する

変更を承認する前に内容を確認できるため、誤ったコードがそのまま保存されるリスクを減らせます。部分的に承認する場合は、行単位で選択して適用することも可能です。

スラッシュコマンドの活用法

Claude Codeでは、/から始まるスラッシュコマンドを使って特定の操作をすばやく実行できます。

よく使うコマンドをまとめると次の通りです。

/clearを定期的に実行することで、不要なコンテキストを削除してAPI料金の節約につながります。長い作業セッションでは積極的に使うことをおすすめします。

Claude Codeのコマンドについて詳しく知りたい人は、次の記事を参考にしてください。

チェックポイント機能で変更を巻き戻す

Claude Codeには、作業の特定時点を保存して後から元に戻せるチェックポイント機能が搭載されています。

チェックポイントの使い方は次の通りです。

• 重要な変更を加える前に/checkpointを実行してスナップショットを作成する
• 作業を進める
• 問題が発生した場合は/restoreで保存した時点に戻す

Gitのコミットと組み合わせることで、細かい粒度でのバージョン管理が可能になります。大きなリファクタリングに着手する前には、必ずチェックポイントを作成しておくことをおすすめします。

CLAUDE.mdで指示を効率化する方法

CLAUDE.mdは、プロジェクトのルートに置く設定ファイルです。毎回指示しなくても、開発上のルールや注意事項をClaude Codeに常時読み込ませられます。

CLAUDE.mdに記載できる内容の例は次の通りです。

# プロジェクト概要
このプロジェクトはNext.js 14 + TypeScriptで構築されたECサイトです。

# 使用技術
- フロントエンド: Next.js 14, TailwindCSS
- バックエンド: Node.js, Prisma, PostgreSQL

# コーディング規約
- コンポーネントはすべて関数コンポーネントで書くこと
- 型定義はinterfaceではなくtypeを使うこと
- コメントは日本語で記載すること

# 禁止事項
- anyの使用は禁止
- console.logは本番コードに残さないこと

CLAUDE.mdを整備するほど、毎回同じ指示を入力する手間が省け、プロジェクト固有のルールを守ったコード生成が実現できます。チームで使う場合はGitで共有することで、全員が同じ設定で利用できます。

まとめ

Claude CodeはVS Codeの統合ターミナルまたは拡張機能を通じて利用できます。連携することで得られる主なメリットは次の3点です。

API料金の従量課金や、大規模プロジェクトでのレスポンス遅延には注意が必要です。CLAUDE.mdや/clearコマンドを活用することで、コスト管理と作業効率を両立できます。

VS Codeを日常的に使っているエンジニアには、拡張機能からの連携が最もスムーズな導入方法です。まずはAPIキーを設定して、小さな作業から試してみてください。