AIコーディングツール

VS CodeでClaude Codeを使う:セットアップ・ショートカット・活用術(2026)

2026年8月20日2分で読めます

VS Code内でClaude Codeを動かしたいですか?公式のAnthropic拡張機能をMarketplaceからインストールし(「Claude Code」で検索、publisherはAnthropic)、有料のClaudeプランでサインインしたら、Sparkアイコン✱からパネルを開くだけ。所要時間は約2分です。最新のVS Codeビルドと、Pro・Max・Team・Enterpriseのいずれかのプランが必要です(APIキー不要、無料枠なし)。すぐに使いたい機能は3つ:差分レビュー(変更を1つずつ承認)、プランモード、そしてファイルやターミナル出力をコンテキストに取り込む@メンションです。

公式ドキュメントcode.claude.com/docs/en/vs-codeと照合して再確認済み(2026/08/10アクセス)。

念のための確認:「claude code vs code」とは何を指す?

もし「claude code vs code」と検索して、何か別ツールとの直接対決を期待していたのなら、このページは目的違いです。ここでの「vs code」= Visual Studio Codeなので、本当のテーマはVS Codeに統合したClaude Codeの使い方であって、対決ではありません。(本当に比較を探しているなら、まずはClaude Codeとは何かから基本を押さえましょう。)

もう一つよくある混同:この記事が扱うのは公式の「Claude Code」拡張機能(publisher anthropic.claude-code、Sparkアイコン✱、差分/プラン/チェックポイント付き)であって、多くのガイドが紹介している旧来の「Claude AI」チャットサイドバー拡張機能ではありません。両者はまったく別の製品です。公式拡張機能はワークスペース全体を理解し、複数ファイルを一度に編集して、レビュー用の差分を返します。一方、旧来のチャット拡張機能は、コードの横に置かれた質問応答ボックスにすぎません。ガイドがSparkアイコン、差分レビュー、プランモードに一切触れていないなら、ほぼ確実に別の製品の話をしています。

まず必要なもの(要件)

インストール前に、時間を無駄にしないよう3つを確認しましょう:

  • 最新のVS Codeビルド - 公式ドキュメントではバージョン>= 1.94.0が挙げられています。Help -> Aboutで確認し、古すぎる場合は先に更新してください。
  • 有料のClaudeプラン:Pro、Max、Team、Enterpriseのいずれか(またはClaude Console経由のアクセス)。これは必須条件です。
  • APIキー不要、無料枠なし。この拡張機能は、他の一部ツールのように貼り付けたキーではなく、Claudeアカウントでサインインします。まだプランを持っていない場合は使えません。これは、自分のAPIキーを差し込める一部のサードパーティ製AI拡張機能との明確な違いです。

制約について正直に言うと、有料プランが前提なので、無料で使いたい人向けの選択肢ではありません。その代わり、APIの利用枠を管理したり、トークン料金に驚いたりすることはなく、使用量はサブスクリプションの範囲に収まります。プラン選びに迷ったら、使う頻度で決めましょう:お試しや学習にはProで十分ですし、一日中このツールを使うならMaxが価格に見合います。

Claude Codeが何なのか、どこまでできるのかまだ分からない?Claude Codeの入門を読んでから、ここに戻って拡張機能をインストールしましょう。

VS Code用Claude Code拡張機能のインストール方法(手順)

全体で約2分。手順は4つです:

  1. 拡張機能タブを開くCtrl+Shift+X(Windows/Linux)またはCmd+Shift+X(macOS)。検索ボックスに「Claude Code」と入力し、publisher Anthropicの拡張機能を選び(他の「Claude AI」拡張機能と混同しないように)、Installをクリックします。
  2. Claude Codeパネルを開くSparkアイコン✱をクリックします。アイコンはエディタツールバー(ファイルを開いているとき右上)、左側のアクティビティバー、または下部のステータスバーに表示されます。ヒント:アイコンをはっきり表示させるには、少なくとも1つのファイルを開いておく必要があります。
  3. サインイン:Sign inをクリックすると、VS Codeがブラウザを開いてClaudeアカウントで認証します。VS Codeに戻れば、パネルの準備は完了です。
  4. テスト用のプロンプトを送る:「このファイルが何をするか説明して」のような簡単なもので、すべて動くか確認しましょう。Claudeが答え、開いているファイルを認識していれば、インストールは成功です。

最初から身につけたい習慣が1つ:インストール後は、単体のファイルではなく実際のプロジェクトフォルダを開き、Claudeがワークスペース全体のコンテキストを見られるようにしましょう。WindowsでWSLを使っている場合は、いつも通りVS CodeのWSLモードでプロジェクトを開いてからパネルを呼び出します。拡張機能はその環境でも問題なく動作します。

この拡張機能は素のVS Codeに限りません。Cursor、Kiro、Open VSXベースのビルドにも、同じ手順でインストールできます。ターミナルでclaudeコマンドも使いたい場合は、Claude Code CLIの完全インストールガイドを参照してください(拡張機能とCLIは互いを補完します。詳しくは後述)。

VS Code内のインターフェースと主要機能

ターミナルでコマンドを打つのに比べ、拡張機能ははるかに視覚的なインターフェースを提供します。使う価値のある機能はこちら:

  • サイドバイサイドの差分レビュー:Claudeがファイルを編集するたびに、変更が緑と赤ではっきり分かるサイドバイサイドの差分として表示されます。1つずつレビューし、個別に承認または却下でき、承認前に差分内で直接編集することも可能です。チャットからコードをコピペして手作業でマージするのとは雲泥の差で、何が変わろうとしているかを常に正確に把握でき、行単位でブロックできます。これがVS Codeで作業する最大の理由です。
  • プランモード:プランモードでは、Claudeが計画をMarkdownで開くので、コードに手をつける前に読んでインラインでコメントできます。大きなタスクにぴったりで、方向性を確認し、計画の数か所を微調整してから実行させられます。AIがいきなり十数個のファイルに突っ込むのを眺めることはもうありません。計画のワークフローをさらに深く知るには、初心者のための最初の10ステップをご覧ください。
  • プロンプトにコンテキストを追加する@メンション:@file#5-10(5〜10行目だけ)、@folder/(フォルダ全体)、@terminal:name(ターミナル出力を取り込む)、@browser(Chromeを操作)。コピペの代わりに、Claudeが見るべきものを直接指し示せます。たとえばデバッグ時に@file#40-72を使えば、1000行のファイルを読ませる代わりに、壊れている関数だけにClaudeを集中させられます。より正確で、トークンも節約できます。
  • チェックポイント/巻き戻し:Claudeが誤った方向に進んだら、ファイルの変更を以前の状態に戻せます。git stashや一手ずつのCtrl+Zに全面的に頼らずに済むセーフティネットです。
  • セッション履歴+複数タブ:複数のセッションを並行して実行し、過去の会話を見返せます。片方のタブでリファクタリング中、もう片方で手早くAPIの質問、といった具合に、複数のスレッドを同時進行するときに便利です。
  • 権限モード:プロンプトボックスから、Manual(各操作を手動で承認)、Plan(計画のみ)、または自動編集を選べます。慣れないリポジトリでは慎重にしておき、信頼できるようになったら緩めましょう。設定のinitialPermissionModeで、あらかじめ既定値を指定できます。

VS CodeでのClaude Codeキーボードショートカット

ほとんどのガイドが省いている完全なショートカット表(公式ドキュメントより)はこちら:

操作macOSWindows / Linux
エディタとClaudeの間でフォーカスを切り替え(Focus Input)Cmd+EscCtrl+Esc
Claudeを新しいタブで開くCmd+Shift+EscCtrl+Shift+Esc
選択した行で@メンションを挿入Option+KAlt+K
Focusビューを切り替えCtrl+Option+FCtrl+Alt+F
最後に閉じたセッションを再度開くCmd+Shift+TCtrl+Shift+T
プロンプトボックスで改行Shift+EnterShift+Enter

どれか忘れた?コマンドパレット(Ctrl/Cmd+Shift+P)を開いて「Claude Code」と入力すれば、すべてのコマンドを確認できます。すべてを印刷できるまとめは、Claude Codeチートシートをご覧ください。

VS CodeでClaude Codeを最大限に活用するコツ

インストールは誰でもできますが、スムーズに使いこなすにはちょっとしたコツが要ります。私が毎日使っているものを紹介します:

  • パネルをセカンダリサイドバーに移動:Claudeがエディタを覆うのではなく、コードの隣に並ぶようにします。Sparkアイコンを右端にドラッグするだけ。差分とコードを一度に見られて、ぐっと楽になります。
  • 「プロジェクトの記憶」としてCLAUDE.mdを書く:これが品質を最も大きく引き上げます。規約、技術スタック、テストコマンドをこのファイルに書いておけば、Claudeが推測しなくて済みます。しっかりしたCLAUDE.mdの書き方をご覧ください。
  • エラーをコピペする代わりに@terminalを使う:失敗したコマンドを統合ターミナルで実行し、@terminalで出力全体をプロンプトに落とし込みます。手でコピペするより速く、コンテキストも豊富です。
  • useTerminalを切り替える:CLIらしい感覚が好みなら設定でオンに、純粋なGUIが良ければオフにします。
  • autosaverespectGitIgnoreを検討:差分をきれいに保ち、Claudeが不要なファイルや機密ファイルをうっかり読まないようにします。
  • コストを把握する:/usageで消費量を確認し、チャットがいっぱいになったら/compactでコンテキストを圧縮します。Claudeの集中を保ち、トークンを節約できます。
  • ステータスラインを整える:カスタマイズして、現在のモデルとコストをひと目で確認できるようにします。ステータスラインのカスタマイズガイドをご覧ください。

身につける価値のある習慣が1つ:大きなタスクを任せる前に、30秒かけてゴールと制約をプロンプトに書き出し(またはCLAUDE.mdに残し)、編集させる前にプランモードをオンにして方向性を確認しましょう。ひと手間かかりますが、Claudeが的を外す頻度が大きく減り、巻き戻しの手間が省けます。大きなリポジトリでは、プロジェクト全体を丸ごと渡すのではなく、作業中のモジュールに@folder/を組み合わせましょう。Claudeが集中を保ち、出力がすっきりし、トークンも少なく済みます。

拡張機能とCLI - どちらを使うべき?

よくある質問:拡張機能を入れたら、CLIはまだ必要?手早く比較します:

基準拡張機能(VS Code内)CLI(ターミナルのclaude
インターフェースビジュアルGUI:差分、プラン、チェックポイント純粋なコマンドライン
コマンドセットパネルには十分最も充実:!でbashを実行、タブ補完、すべてのコマンド
claudeをPATHに追加いいえ(拡張機能はパネル用に独自のCLIを同梱)単体インストールが必要

重要な注意:拡張機能はclaudeコマンドをPATHに追加しません。そのため統合ターミナルでclaudeと打つには、単体のCLIを別途インストールする必要があります。実践的なアドバイス:両方使いましょう - 差分やプランのレビューにはGUI、手早い操作にはCLI。両者は同じ履歴を共有するので、claude --resumeでセッションを再開できます。CLIの完全なインストール手順は、Claude Codeの完全インストールガイドにあります。

よくある問題と解決方法

よくあるいくつかの問題と、手早い解決策:

  • macOS TahoeでCmd+Escが効かない:このショートカットはGame Overlayに奪われがちです。System Settings -> Keyboard -> Keyboard Shortcuts -> Game Controllersを開いて、それを使っている項目のチェックを外すか、VS CodeのキーボードショートカットでClaude Code: Focus inputを別の組み合わせに割り当て直しましょう。
  • Sparkアイコン✱が出ない:順番に確認しましょう - ファイルを少なくとも1つ開いていますか?VS Codeは>= 1.94.0ですか?Reload Window(コマンドパレット)を試し、競合する他のAI拡張機能を一時的に無効化し、プロジェクトフォルダのworkspace trustを有効にします。
  • 「Please run /login」:Reload Windowを試すか、VS Codeを閉じて、ターミナルからcode .でプロジェクトを開き直し、正しいサインイン済みセッションを拾わせます。
  • Claudeが応答しない:ネットワークを確認し、新しいセッションを開くか、CLIを試して、問題が拡張機能側かアカウント側かを切り分けます。チャットがかなり長くなっている場合は、/compactでコンテキストを圧縮してから再試行しましょう。
  • 差分が表示されない、または誤った場所に適用される:ファイルが保存されていて、別の拡張機能(保存時に動くフォーマッタなど)に上書きされていないか確認しましょう。autosaveを制御して使い、大きな差分をレビューする間はformat-on-saveを一時的に無効にします。

このリストにない問題に遭遇?よくあるClaude Codeのエラーと解決方法のまとめをご覧ください。

既製のskillとsubagentでレベルアップ

拡張機能は、Claude Codeにskill、subagent、ワークフローのセットが最初から用意されていると、ゼロから作るよりもずっと強力になります。素早く進めたいなら、選択肢の1つがClaude Code向けのAgentKitキットです。開発やマーケティング作業のためのskillとagentをまとめたパッケージで、AgentKitを試して(リンク経由で20%オフ)、自分のワークフローに合うか確かめられます。必須ではありません:素の拡張機能だけでも十分ですし、キットはあくまで速く進めるための任意の手段です。

よくある質問(FAQ)

VS CodeのClaude Codeは無料ですか?

いいえ。拡張機能のインストールは無料ですが、使うには有料のClaudeプラン(Pro、Max、Team、Enterprise)またはClaude Console経由のアクセスが必要です。無料枠はなく、APIキーでは使えません。

Proプランは必要ですか?

少なくとも1つの有料プランが必要で、個人向けに使える最下位のプランがProです。Maxはヘビーな用途に向き、TeamとEnterpriseはグループ向けです。

「Claude AI」拡張機能やCline、Continueとはどう違いますか?

「Claude Code」拡張機能はAnthropic公式のビルド(publisher anthropic.claude-code)で、Claudeアカウントに紐づいた差分レビュー、プランモード、チェックポイント、@メンションを備えています。旧来の「Claude AI」チャットやCline、Continueといった拡張機能は、動作も使い心地も異なる別の製品です。

Cursorで使えますか?

はい。Claude Code拡張機能は、VS Codeと同じ手順で、Cursor、Kiro、Open VSXベースのエディタにインストールできます。

CLIは別途インストールする必要がありますか?

必ずしも必要ありません。拡張機能はパネル用のCLIをすでに同梱しています。統合ターミナルでclaudeコマンドを打ちたい場合だけ、単体のCLIが必要です。拡張機能はclaudeをPATHに追加しないためです。

Windows/WSLで動きますか?

はい。拡張機能はWindows、macOS、Linuxで動作します。WSLの場合は、いつも通りVS CodeのWSLモードでプロジェクトを開いてから、Claude Codeパネルを使います。

まとめと次のステップ

これが、VS Codeの中でそのまま動くClaude Codeです:公式拡張機能をインストールし、有料プランでサインインしたら、差分/プラン/チェックポイント、@メンション、そしてショートカットを活用して、より速くコーディングしましょう。次のステップ:始めたばかりなら初心者のための最初の10ステップを、コマンドラインも使いたいならClaude Code CLIの完全インストールガイドをご覧ください。それでは、よいコーディングを。

J

Jasmine

著者 · Jasmine Daily

Jasmine Dailyを綴る書き手。思ったこと、経験したこと、日々の瞬間を書き留めています。正直に、急がず、完璧でなくても。

Jasmine Daily

まだ読みものが待っています。

この記事が心に響いたなら、ジャーナルのほかのページものぞいてみてください。

次に読む

関連する投稿