VSCode版Claude Codeの使い方と設定手順

こんにちは。最近話題の自律型AIエージェントですが、VSCode上で直接動かせるようになったのをご存知ですか。以前のCLI版からGUIへと進化し、コードの自動生成からレビューまでがエディタ内で完結するようになり、私自身もとても気になっていました。プログラミングの現場でAIツールが当たり前になってきている中、このツールの登場は私たちの開発スタイルをさらに一段階引き上げてくれるような気がしています。

でも、いざ導入しようとすると、拡張機能のインストール方法や、これまでのCLIツールとの違い、CursorやClineといった他のコーディング特化型AIツールとどう使い分ければいいのか、迷ってしまうことも多いですよね。それに、APIやサブスクリプションの料金体系も少し複雑で、設定を間違えて高額な請求が来ないか心配になるかもしれません。新しいツールを導入する時は、便利さの裏にあるリスクやコストの面もしっかりと把握しておきたいところです。

この記事では、VSCode環境におけるClaude Codeの使い方について、初期設定から実践的なタスクの自動化まで、私が実際に調べて試してみた内容を分かりやすくまとめました。安全な権限モードの運用や、プロジェクトの指針となるCLAUDE.mdの効果的な設定方法なども紹介していきますので、ぜひ参考にしてみてくださいね。読めばきっと、ご自身の開発環境をより快適にするヒントが見つかるはずです。

VSCode版Claude Codeの使い方

拡張機能のインストール手順

まずはVSCode上に拡張機能をインストールして、実際にAIエージェントと対話できる状態を作っていきます。ただインストールボタンを押すだけではなく、いくつか事前に確認しておくべき重要なポイントがありますので、一つずつ丁寧に見ていきましょう。

システム要件と事前準備

Claude CodeをVSCode上でスムーズに動作させるためのシステム要件として、VSCodeのバージョンは最低でも1.98.0以上が必要になります。もし「長期間VSCodeのアップデートをしていないな」という方は、拡張機能が正常にインストールできなかったり、予期せぬエラーで動かなくなったりする可能性があるので、事前にヘルプメニュー等から最新版へのアップデートを済ませておいてくださいね。

また、もう一つ重要な前提条件があります。それは、バックグラウンドでのファイル操作やCLI機能の併用、あるいはMCP（Model Context Protocol）サーバーの実行を考慮して、パソコンにNode.jsのバージョン18以降がインストールされている必要があるという点です。Node.jsが古いバージョンのままだと、内部のサーバー処理がうまく立ち上がらずに機能が制限されてしまうことがあります。ターミナルを開いて node -v というコマンドを打ち込み、ご自身のバージョンが18以上であることをしっかりと確認しておきましょう。

安全なインストールの進め方

準備が整ったら、いよいよVSCodeに拡張機能を入れていきます。手順自体はとてもシンプルで、VSCode左側のメニューから拡張機能（Extensions）タブを開き（Mac環境ならCmd+Shift+X、Windows/Linux環境ならCtrl+Shift+Xのショートカットも便利ですね）、上部の検索ボックスに「Claude Code」と入力するだけです。

偽物の拡張機能に注意！
ここで一番気をつけていただきたいのが、検索結果に出てきたツールの「発行元（Publisher）」です。AI系の人気ツールが登場すると、必ずと言っていいほど名前やアイコンを似せた非公式のツールがマーケットプレイスに並びます。
中には悪意のあるコードが含まれているリスクもゼロではありません。セキュリティをしっかりと守るためにも、発行元が間違いなく公式の「Anthropic」になっていることを必ず確認してからインストールボタンを押すようにしてくださいね。

もし、GUIからのインストールよりもコマンドラインを好むエンジニアの方であれば、VSCodeのコマンドパレットから code --install-extension anthropic.claude-code を実行することで直接インストールすることも可能です。

インストール後の確認とトラブルシューティング

インストールが無事に終わると、VSCode画面の右上にClaudeのロゴマークである「Spark（スパーク）アイコン」が表示されるはずです。このアイコンをクリックすることでチャットパネルが開き、AIとの対話がスタートできます。

しかし、「インストールしたのに右上にアイコンが出ない！」と焦ってしまうケースがよくあります。実はこのアイコン、「フォルダを開いているだけでなく、何らかのファイルを開いてエディタに表示している状態」でないと出現しないという仕様になっています。ですので、まずは適当なテキストファイルでもソースコードでも良いので、ファイルを一つ開いてみてください。

ファイルを開いてもまだアイコンが出ない場合は、VSCodeの読み込みに少し時間がかかっているか、内部でキャッシュが残っている可能性があります。その時は、コマンドパレット（Cmd+Shift+P または Ctrl+Shift+P）を開いて、「Developer: Reload Window」と入力し実行してみてください。ウィンドウが再読み込みされると、ほとんどの場合でアイコンが無事に表示されるようになりますよ。これで最初のハードルはクリアですね。

アカウント認証とログイン

拡張機能のインストールが無事に終わって、いざSparkアイコンをクリックしてパネルを開くと、今度はAnthropicアカウントへのサインイン（認証）が求められます。初めて使う時はこの認証周りで少し戸惑うかもしれませんので、具体的にどのような手順を踏むのか、そして注意すべき落とし穴はどこにあるのかを詳しく解説していきますね。

シームレスなブラウザベース認証

以前のCLI版（ターミナルで使うバージョン）を利用したことがある方ならご存知かもしれませんが、昔はAnthropicのコンソール画面から長い「APIキー」を発行して、それをターミナルにコピー＆ペーストするという少し面倒な手順が必要でした。しかし今回のVSCode拡張機能版では、その煩雑な手順が廃止され、より直感的なブラウザベースの認証フローへと統合されています。

画面の指示に従って「Sign In」ボタンをクリックすると、自動的に普段お使いのウェブブラウザが立ち上がり、Anthropicのログインページが表示されます。そこでご自身のアカウント情報（Googleアカウント連携やメールアドレス等）を入力してログインを完了させると、VSCode側に認証情報がセキュアに渡され、すぐにClaude Codeが使える状態になります。とてもスムーズですよね。

認証には、Claudeの有料サブスクリプション（Pro、Max、Teamなど）のプランを利用するか、あるいは開発者向けのAPIアカウント（Anthropic Console）を利用することになります。もし企業で導入していて組織のSSO（シングルサインオン）を利用している場合は、指定されたプロファイルを用いてログインを完了させてください。

APIキー優先の仕様と二重課金のトラップ

ここで、すでにAPIを利用して何か別の開発をしたことがある方向けに、非常に重要な注意点があります。これが設定を間違えると高額な請求に繋がってしまう可能性のある「二重課金のトラップ」です。

実はVSCode版のClaude Codeは、パソコンの環境変数に「ANTHROPIC_API_KEY」が設定されている状態で起動すると、ブラウザで行ったサブスクリプションのログイン認証よりも、APIキーの情報を優先して読み込んでしまうという仕様になっています。

どういうことかと言うと、「月額20ドルのProプランを契約してログインしたから、どれだけ使っても定額だ！」と思ってガンガンAIにコードを書かせていたのに、裏側では環境変数のAPIキーが使われていて、後日APIの従量課金として数万円の請求が来てしまった……という事態が起こり得るのです。

ログイン状態の確認方法
意図せずにAPI側で課金されてしまうのを防ぐために、利用開始時は必ずチャットパネルで /status というコマンドを入力して実行してみてください。
すると、現在どのアカウント（サブスクリプションなのか、APIキーなのか）でログインしているかが一覧で表示されます。もしサブスクを使いたいのにAPIキーが認識されていたら、ご自身のOSの環境変数設定を見直して、不要なAPIキーを削除してからVSCodeを再起動してくださいね。

また、VSCodeを開く際にターミナルから code . と打ち込んで起動する方も多いと思いますが、そのターミナルのセッションにAPIキーの環境変数が残っていると同様の現象が起きます。認証周りは最初の設定が肝心ですので、少し面倒でも「今どちらのアカウントで動いているか」をしっかり確認するクセをつけておくと、後々のトラブルを防げて安心かなと思います。

サブスクとAPIの料金体系

Claude Codeを利用する上で避けて通れないのが「お金」の話ですよね。実はClaude Codeは、ブラウザで使える無料版のClaudeアカウントでは継続して利用することができません。VSCode上で自律的にコードを読み書きさせるためには、Anthropicの有料プラン（定額のサブスクリプション）を契約するか、APIを利用した従量課金の仕組みを使う必要があります。それぞれのプランの特徴と、どちらを選ぶべきかの目安を詳しく見ていきましょう。

大きく分けると料金体系は2種類あります。毎月の支払いが決まっている「サブスクリプション」と、使った分だけ支払う「API従量課金」です。ご自身の開発スタイルや、どれくらいの頻度でツールを使うかによって最適な選択肢が変わってきます。

サブスクリプションプラン（定額制）の特徴

日常的にコードを書く方や、月末の請求額を気にしたくないという方には、毎月のコスト見通しが立てやすいサブスクリプションプランが圧倒的におすすめです。Claude.aiのウェブ版やモバイルアプリの利用枠とも共有されるので、一石二鳥ですね。

プラン名	月額料金	主な特徴とおすすめのユーザー層
Pro プラン	$20	週に数回の利用や、副業、個人開発の方に最適なエントリープランです。まずはここから始めるのが王道ですね。
Max プラン	$100 / $200	毎日フル稼働するプロ向け。Proプランの上限にすぐ達してしまう、大規模なコードを頻繁に扱う方に最適です。
Team プラン	$25 / 1人	5名以上のチーム向け。コードがAIの学習に使われない（オプトアウト）保証があり、企業のセキュリティ基準を満たします。

個人で始める場合は、まず月額20ドルのProプランから導入してみて、日々の開発でどれくらいAIを使うかを試してみるのが良いかなと思います。チャットパネルで /usage コマンドを実行すれば利用状況も確認できるので、もし「AIの返答待ち時間（レート制限）が多くて作業が進まない」と感じるようになったら、Maxプランへのアップグレードを検討するくらいで十分です。（出典：Anthropic公式ヘルプセンター『Claude Code pricing and usage』）

API従量課金とコスト最適化

もう一つの選択肢が、Anthropic ConsoleでAPIキーを発行して利用するAPI従量課金です。こちらは月額固定費がかからない代わりに、AIに読み込ませた文字数（入力トークン）と、AIが書き出した文字数（出力トークン）に対して厳密に課金されていきます。

APIを利用する最大のメリットは、「タスクの難易度に合わせてAIのモデルを柔軟に切り替えられる」点にあります。例えば、簡単なテストコードの作成やフォーマットの統一なら軽くて安価な「Claude Haiku」を使い、複雑なバグ調査やアーキテクチャの設計には高性能な「Claude Sonnet」や「Claude Opus」を使う、といった具合にコストをコントロールできます。

プロンプトキャッシュ技術で節約
API料金を語る上で欠かせないのが「プロンプトキャッシュ」という仕組みです。例えば巨大なプロジェクトのソースコードを何度もAIに読み込ませると莫大なコストがかかりますが、キャッシュ技術を使うことで、同じ情報を読み込む際のコストを通常の10分の1程度に抑えることができるんです。
VSCode拡張機能版ではこのキャッシュが自動的にうまく機能してくれることが多いですが、それでも大規模リポジトリを扱う際は利用量に注意が必要です。

毎日使うわけではなく週末だけガッツリ開発する方や、CI/CDなどの自動化パイプラインにClaude Codeを組み込んでテストを自動実行させたいようなケースでは、定額制よりもAPI従量課金の方がコストパフォーマンスが高くなることもあります。ご自身のお財布事情と開発ペースに合わせて、一番納得できるプランを選んでみてくださいね。

ショートカットと設定ファイル

VSCodeにClaude Codeを導入したら、そのまま使い始めることもできますが、日々の開発スピードを劇的に上げるためには「ショートカット」の習得と「設定ファイルの最適化」が欠かせません。マウス操作を減らしてキーボードから手を離さずにAIとやり取りできるようになると、まるでペアプログラミングをしているかのような心地よいリズムで開発が進むようになりますよ。

生産性を極める必須キーボードショートカット

AIコーディングエディタを使いこなす上で一番のストレスは、「コードを書いていたのに、マウスに持ち替えてチャットパネルをクリックし、またキーボードに戻る」という視線と手の移動です。これを解消するために、システムレベルで最適化されたショートカットをぜひ指に覚えさせてみてください。

操作内容	macOS	Windows / Linux	運用のポイント
フォーカス切替	Cmd + Esc	Ctrl + Esc	エディタとチャットパネルを行き来する最重要キー。思考を途切れさせません。
@メンション自動挿入	Option + K	Alt + K	コードを選択した状態で押すと、行番号付きでAIにパッと指示を渡せます。
新しい会話タブ	Cmd + Shift + Esc	Ctrl + Shift + Esc	バグ修正と新機能開発など、別々の作業を同時に進めたい時にパネルを分割します。
閉じたセッション復元	Cmd + Shift + T	Ctrl + Shift + T	間違えてチャットを消してしまった時、文脈ごと一瞬で復旧できる救済コマンドです。

特に「@メンション自動挿入（Option+K / Alt+K）」は絶対に覚えておきたいショートカットです。これまでは「〇〇というファイルの、〇行目から〇行目のコードがおかしいから直して」と文章で打ち込んでいましたが、このショートカットを使えば、マウスでサッとコードをなぞってキーを押すだけで、AIに「ここ！」と正確な場所（コンテキスト）を伝えることができます。これだけで1日に何十分もの時間を節約できるはずです。

settings.jsonによる挙動のカスタマイズ

ショートカットに慣れてきたら、次はVSCodeの設定ファイル（.vscode/settings.json またはユーザーのグローバル設定）をいじって、Claude Codeの振る舞いを自分好みにカスタマイズしてみましょう。

AIに自律的にコードを触らせる上で、いくつか設定しておくと便利な項目があります。

• "claudeCode.autosave": true
  AIがファイルを読み書きする前に、あなたが編集途中だった未保存の変更を自動的に保存（セーブ）してくれます。これを設定しておかないと、AIの変更とあなたの変更がぶつかって状態がおかしくなることがあるので、強く推奨します。
• "claudeCode.respectGitIgnore": true
  Gitで管理したくないファイル（ビルドで生成された巨大なフォルダや、パスワードなどの機密情報が含まれるファイルなど）が .gitignore に指定されている場合、AIの検索範囲からそれらを除外してくれます。無駄なトークン消費を抑え、セキュリティも向上します。
• "claudeCode.preferredLocation": "sidebar"
  チャットパネルの表示位置を変更できます。メインのエディタ領域を広く取りたい方は、サイドバーに配置しておくと画面がスッキリして作業しやすいかもしれませんね。

これらの設定をチーム開発の際にリポジトリにコミットしておけば、プロジェクトに参加したメンバー全員が同じ挙動でAIを利用できるようになります。「環境によってAIの動きが違う」というトラブルを未然に防げるので、チーム導入の第一歩としても非常に有効な手段ですね。

CLI版ツールとの違い

検索して情報を集めていると、「ターミナルで使うClaude Code」と「VSCodeの拡張機能で使うClaude Code」の情報が混ざって出てきて、混乱してしまうことはありませんか？実はこれらは全く別のツールというわけではなく、同じ強力なAIエンジンを裏側に持ちながら、操作画面（インターフェース）が異なる「兄弟」のような関係にあります。ここでは、それぞれの違いと賢い使い分け方について詳しく解説していきますね。

圧倒的な視覚的フィードバック：VSCode拡張機能版

今回私たちが導入した「VSCode拡張機能版（GUI版）」の最大のメリットは、何と言っても「コードの変更点が視覚的に分かりやすい」という点に尽きます。

ターミナルベースのCLI版では、AIがコードを修正した際、「〇〇のファイルを更新しました」というテキストのログが流れるだけでした。実際にどこがどう書き換わったのかを確認するには、別途Gitのコマンドを叩くなどして差分を調べる必要があったのです。しかしVSCode版では、AIが変更を提案してきた瞬間に、エディタ上で元のコードが赤色（削除）、新しいコードが緑色（追加）でハイライトされるインラインDiff（差分）表示が機能します。

これにより、私たちはまるで職場の先輩や同僚が作ってくれたプルリクエスト（コードの変更依頼）を画面上でレビューしているような感覚で、「なるほど、ここをこう直したんだな。OK、承認（Accept）しよう」と直感的に判断できるようになりました。人間の認知負荷が劇的に下がるため、日常的なコーディングやバグ修正、機能追加といった作業においては、拡張機能版が圧倒的に使いやすいと断言できます。

裏方の高度な自動化を支える：CLI版

では、CLI版（ターミナル版）はもう不要になったのかというと、決してそんなことはありません。CLI版には、テキストベースだからこそできる強力な武器があります。

例えば、LinuxやMacのターミナルでよく使う「パイプ処理」です。システムで発生した大量のエラーログファイルの中身を cat error.log | claude のように直接AIに流し込んで解析させたり、CI/CD（継続的インテグレーション）の自動化パイプラインに組み込んで「GitHubにコードがプッシュされる前に自動でコードレビューを走らせる」といった、シェルスクリプトと連携した高度な自動化はCLI版の独壇場です。

両者の賢い使い分けの結論
日々のプログラミング作業、例えば「このコンポーネントのデザインを変えて」「ここに出ているエラーの原因を調べて修正して」といった対話的な開発は、画面が見やすいVSCode拡張機能版で行うのがベストです。
一方で、夜間にテストを自動実行させたい時や、複数のブランチを跨ぐような複雑なGit操作を自動化したい時、外部ツール（MCP）の高度なサーバー設定を行う時は、VSCode内の統合ターミナルからCLI版を呼び出して使う。このように文脈に応じて両者を使い分けるのが、現在の開発現場における最も合理的でスマートなスタイルなのかなと思います。

Claude Codeの使い方：VSCode実践

CLAUDE.mdの設定

VSCode上でClaude Codeを動かす準備が整ったら、真っ先に行いたいのがプロジェクトの「憲法」とも呼べるCLAUDE.mdの作成です。これを設定するかしないかで、AIの賢さや作業効率が劇的に変わってくると言っても過言ではありません。私自身、最初は面倒くさがって設定せずに使っていたのですが、毎回同じ指示を繰り返すハメになり、早々にこのファイルの重要性に気づかされました。

通常、ChatGPTなどのAIツールを使う際、「このプロジェクトはTypeScriptを使っています」「スタイリングにはTailwind CSSを使用してください」「変数名はキャメルケースで統一してね」といった前提条件を、チャットのたびに毎回入力するのは非常に骨が折れますよね。しかし、プロジェクトの一番上の階層（ルートディレクトリ）にCLAUDE.mdという名前のMarkdownファイルを一つ置いておくだけで、Claude Codeは毎回の会話のスタート時にこのファイルを自動的に読み込み、プロジェクトの「背景知識」としてしっかりと記憶してくれるようになるのです。

では、具体的にどのような内容を記述すれば良いのでしょうか。私のおすすめは、以下の4つの項目を中心にシンプルにまとめることです。

• 技術スタックとバージョン： 使用している言語、フレームワーク、主要なライブラリとそのバージョン（例：Next.js 14のApp Routerを使用、など）。
• コーディング規約： 命名規則（キャメルケースかスネークケースか）、関数の書き方（アロー関数を推奨するか）、ディレクトリ構造のルールなど。
• テストとビルドのコマンド： テストを実行するためのコマンド（npm run testなど）や、Linterの実行コマンド。AIが自律的にテストを回す際の指標になります。
• 絶対に変更してはいけない領域： 自動生成されるビルドフォルダや、手動で触るべきではない設定ファイルなど、「ここは絶対に触らないで」という禁止事項。

CLAUDE.mdの記述例（サンプル）
# プロジェクト概要
これはReactとTypeScriptを使用した社内管理用ダッシュボードのフロントエンドです。

# コーディング規約
– コンポーネントは関数コンポーネントで記述し、FC型は使用しないでください。
– スタイリングにはTailwind CSSを使用し、インラインスタイルは避けてください。
– 状態管理にはZustandを使用します。

# テスト
– テストフレームワークはVitestを使用しています。`npm run test`で実行可能です。

# 注意事項
– `dist/` ディレクトリと `node_modules/` は直接編集しないでください。

このようにプロジェクトの絶対的なルールを明文化しておくことで、AIの出力のブレがなくなり、チーム全体で一貫した品質のコードを生成できるようになります。

ただし、ここで一つ絶対にやってはいけないアンチパターン（失敗例）があります。それは、CLAUDE.mdの中に「〇〇のバグを直す」「明日はデータベースの設計をする」といった、一時的な作業タスクや複数ステップにわたる細かな手順書を長々と書き連ねてしまうことです。ファイルが肥大化しすぎると、AIは「どれが本当に重要な永続的ルールなのか」を判別できなくなり、肝心なルールをノイズと見なして無視する確率が高まってしまいます。このファイルはあくまで「憲法」としてスリムに保ち、具体的な作業手順をAIに覚えさせたい場合は、後述する少し高度な「Skills」という別機能に切り出して管理するのが、賢い運用のベストプラクティスですね。

安全な権限モードの運用

自律的に動いてファイルを直接編集できるエージェント型のAIツールにおいて、開発者が最も恐れるのは「AIが意図しないコードを勝手に書き換えて、プロジェクトを破壊してしまうこと」ではないでしょうか。便利な反面、裏側で何が行われているか分からないブラックボックス状態は、特に実務のプロジェクトにおいては致命的なリスクになり得ます。

VSCode拡張機能版のClaude Codeでは、こうしたセキュリティ上の懸念を払拭し、AIの行動を厳密にコントロールするために、4つの異なる「権限モード（Permission Mode）」が提供されています。これらはチャットパネル内の設定ボタンや、ショートカットキー（Shift+Tab）で状況に応じて動的に切り替えることができるので、ぜひそれぞれの特徴を理解して使いこなしていただきたいポイントです。

まず1つ目が「Normal（デフォルト）」モードです。このモードでは、Claude Codeがファイルを書き換えたり、ターミナルでコマンドを実行したりする前に、必ず「〇〇を実行してもよろしいですか？」とユーザーに確認（承認）を求めてきます。導入したばかりでAIの挙動を探りたい時や、プロジェクトの仕様をまだ完全に把握しきれていないレガシーなシステムを触る際には、この最も安全なモードにしておくのが基本ですね。

そして2つ目が、私がチーム開発において最も強く推奨している「Plan（計画）」モードです。VSCodeエディタならではの強力な機能で、AIがいきなりコードを直接編集するのではなく、事前に「これからどのファイルの、どの部分を、どのように変更するか」という実行計画を、きれいなMarkdown形式のドキュメントとして出力してくれます。例えば、複数ファイルにまたがる大規模なリファクタリングを依頼した際、人間がまずその全体像を俯瞰し、「方針は合っているか」「見落としている影響範囲はないか」を計画段階でレビューできるのです。修正してほしい点があればフィードバックを与え、完璧な計画に仕上がってから実際の実行（Act）に移すことができるため、AI任せによる想定外の事故を未然に防ぐ上で極めて有効です。

自動化の罠とBypassモードの危険性
3つ目の「Auto-accept」モードは、確認なしで即座に変更をファイルに反映するため、単純なテストコードの量産などには便利ですが、VSCodeの自動実行設定ファイルまで無断で書き換えられる懸念があります。
さらに4つ目の「Bypass」モードは、すべての権限チェックをスキップし、AIに完全な自律性を与える極端なモードです。これはDockerコンテナの中など、インターネットから隔離された安全なサンドボックス環境でのみ使用すべきであり、普段の開発環境でデフォルト設定にすることは重大なインシデントに直結するため絶対に避けてください。

企業やチームで導入する際は、メンバー全員の .vscode/settings.json に "claudeCode.initialPermissionMode": "plan" と設定し、新規の会話が常に安全なPlanモードからスタートするように強制（ガードレール）を設ける運用が主流になりつつあります。

また、ツールの裏側の仕組みとして、VSCode拡張機能が動いている間は、ローカルのMCPサーバーが「127.0.0.1」という外部ネットワークからは絶対にアクセスできない安全な場所で自動起動しています。毎回の通信にはランダムなトークンによる認証がかけられており、セキュリティ面での配慮もしっかりなされている印象です。（出典：独立行政法人情報処理推進機構（IPA）『中小企業の情報セキュリティ対策ガイドライン』におけるアクセス制御の考え方にも通じる、堅牢なローカル環境の構築と言えますね。）

インラインDiffでコード確認

これまでターミナルベースのAIツールを使ってきた開発者にとって、VSCode拡張機能版に乗り換える最大のモチベーションとなるのが、この「インラインDiff（差分表示）」機能の存在だと思います。私自身、この機能を初めて使った時、「ついにAIとのペアプログラミングが実用段階に来た」と感動したのを覚えています。

AIに「この関数のパフォーマンスを改善して」とか「このUIコンポーネントにダークモードの対応を追加して」と指示を出すと、AIはプロジェクト全体を読み込んで最適なコードを考えてくれます。ここまでは他のツールと同じですが、問題はその「結果の受け取り方」です。CLIツールの場合、ファイルがいつの間にか上書き更新されていて、後から git diff コマンドを叩いて「えっと、どこを変えたんだっけ？」と確認する手間が発生していました。これでは、AIが意図しない箇所を壊していないかチェックするのが非常に億劫になってしまいますよね。

しかしVSCode拡張機能版では、AIがコードの変更を提案してきた瞬間に、今開いているエディタの画面上に直接「差分」が視覚的に表示されます。具体的には、GitHubのプルリクエスト画面のように、既存の古いコードが赤色（削除予定）で、AIが新しく提案してきたコードが緑色（追加予定）でハイライトされ、それらが上下に並んで表示されるのです。

レビューの質が劇的に向上する理由
・認知負荷の低下： どのファイルの何行目がどう変わるのかが、直感的に一目で分かります。
・即座のフィードバック： 差分を見て「ここは仕様と違うな」と思えば、承認せずにチャットパネルで「ここは〇〇のロジックを優先して書き直して」とすぐに指示を出せます。
・安心感の獲得： ブラックボックス化しないため、セキュリティ上の脆弱性（例えば、SQLインジェクションの対策が抜けているなど）を人間の目で未然に防ぐことができます。

私たち開発者は、この赤と緑の色分けされたコードをじっくりとレビューし、問題がなければ「承認（Accept）」ボタンをクリックして初めてファイルが上書き保存される、というフローになります。もし提案全体のうち一部だけが気に入らない場合は、「拒否（Reject）」を選択して再度プロンプトで修正を促すことも可能です。

この一連のフローは、普段チーム開発で同僚の書いたコードをレビューする体験と全く同じです。「AIが勝手にコードを書く」という恐怖感が払拭され、「AIという優秀なアシスタントが書いたコードの草案を、シニアエンジニアである自分が最終確認して取り込む」という、非常に健全でコントロール可能な開発サイクルを構築できるのが、インラインDiff最大の魅力だと言えますね。

CursorやClineとの比較

「claude code 使い方 vscode」と検索してこの記事にたどり着いた方の多くは、きっと「色々なAIツールが出すぎていて、結局どれをどう使えばいいか分からない」という悩みを抱えているのではないでしょうか。2026年現在、AIコーディングツールの市場は非常に熱を帯びており、特に「Cursor」「Cline（旧Claude Dev）」「Windsurf」、そして本記事の主役である「Claude Code」が四天王として比較されることが増えています。

これらは一括りに「AIエディタツール」と呼ばれがちですが、根底にある設計思想や得意とする領域が全く異なります。プロジェクトの性質や、ご自身の好みに応じて最適なツールを使い分けることが、現代のエンジニアには求められているのかなと思います。

まず、現在最も多くのユーザーに普及しているのが「Cursor（カーソル）」です。VSCodeをまるごとフォーク（派生）して作られたこのエディタの最大の強みは、何と言っても圧倒的な体感速度と、コードを書いている最中の「次にどう書きたいか」を先回りして提案してくれるタブ補完（Cursor Tab）の優秀さです。ゼロから新しいUIをゴリゴリと組んでいくプロトタイピングのフェーズや、思考を途切れさせずに日々のコーディングを進めたい場合には、学習コストも低く最も直感的に使いやすいツールです。ただし、一度に読み込めるコンテキスト（文脈）の量が約12万トークンと他ツールに比べてやや小さめなため、プロジェクト全体のアーキテクチャを根底から書き換えるような巨大なタスクには少し限界を感じる場面もあります。

次に、オープンソースの自由度を極めたのが「Cline（クライン）」です。特定のベンダーに縛られることなく、OpenRouterなどのハブを経由して、Claudeはもちろん、OpenAIのGPT-4oやGoogleのGemini、さらにはOllamaを使ったローカル（自分のパソコン上）のLLMまで、20以上のAPIを自由に切り替えて接続できるのが最大の特徴です。「簡単な作業には安いモデルを使い、複雑なタスクには高性能なモデルを使う」といった細かなコストコントロールが可能な上、機密性の高いプロジェクトではローカルLLMを使ってコードを外部に一切送信しないという選択もできるため、セキュリティに厳しいエンタープライズ企業には有力な選択肢となります。

ツール名	最大の特徴と設計思想	どんなタスクに一番向いているか
Cursor	超高速なTab補完と直感的なUI操作	ゼロからのプロトタイピング、日常的なサクサクとした機能実装
Cline	OSSの自由度、APIの柔軟な切り替え	コストを厳密に管理したい個人開発、ローカルLLM必須の機密開発
Windsurf	独自エージェントによる超高速推論	既存規約に沿ったコンポーネントの大量生産、定型的なタスク
Claude Code	巨大コンテキストと自律的な業務自動化	複数ファイルに跨る大規模リファクタリング、根本原因のバグ調査

では、私たちが使っている「Claude Code」の強みはどこにあるのでしょうか。それは「単なるコーディングの支援」という枠を超えて、「開発業務そのものの自動化」に焦点を当てている点にあります。約20万トークンという巨大な記憶領域を活かし、コードベース全体を自律的に検索して仕様を把握してくれます。「このエラーが出ているんだけど、原因を特定して、関係するファイルを全部修正し、ついでにテストも書いて実行し、OKならGitHubにプルリクエストを出しておいて」というような、一気通貫した重厚なタスクを丸投げできる自律性の高さにおいて、他の追随を許さない圧倒的なパワーを持っています。

結論として、「どれか一つに絞る」必要はないと私は考えています。普段はエディタとしてCursorを使いながら軽快にコードを書き、依存関係が複雑に絡み合ったリファクタリングや、どうしても原因が分からないバグに遭遇した時は、VSCode（またはCursor内）でClaude Codeのパネルを立ち上げてじっくり調査を依頼する。そんな「適材適所の使い分け」が、これからの最も生産性の高いスタイルになっていくはずです。

MCP連携によるタスク自動化

さて、Claude Codeを使いこなす上で、中級者から上級者へステップアップするための最大の鍵となるのが、この「MCP（Model Context Protocol）」という機能です。少し難しそうな言葉が並んでいますが、概念はとてもシンプルで、一言で表すなら「AIに外部のツールを操作するための『手』と『目』を与える仕組み」です。

通常、AIコーディングツールは「エディタの中」に閉じています。ソースコードは読めますが、それ以外の情報は知る由もありません。しかし実際の開発業務では、「Slackで議論された仕様の変更履歴」「Notionにまとまっているデータベースの設計図」「Jiraに登録されたバグの報告チケット」「Figma上のデザインデータ」など、エディタの外にある情報を行き来しながらコードを書くことがほとんどですよね。これまでは、人間がブラウザを開いてこれらの情報をコピーし、AIのチャット欄にペーストして「この仕様に合わせて作って」とお願いしていました。

MCPを使うと、この壁をぶち破ることができます。Anthropicが提唱するオープンな標準規格であるMCPに対応したサーバー（連携プログラム）をPCに導入することで、Claude Codeが自律的に外部システムにアクセスできるようになるのです。

MCP連携で広がる夢のようなワークフロー
例えば、SlackのMCPを連携させた状態で、VSCodeのClaude Codeにこう指示を出します。
「Slackの #dev-frontend チャンネルで今日議論されていた『ログイン画面のデザイン変更』の要件を読んで、その通りにコードを書き直して。」
するとClaude Codeは、自らSlackのAPIを叩いて最新の会話履歴を読み込み、要件を理解した上でコードを修正し、さらに「修正が終わったので確認お願いします」とSlackに自動返信することまで可能になります。

設定自体はそこまで難しくありません。VSCode内に統合されているターミナルを開き、CLI経由で claude mcp add というコマンドを打ち込み、連携したいツールの情報を入力するだけで、Claude Codeに外部システムへのアクセス権を付与できます。

日常的なコードの編集作業はVSCodeのグラフィカルなパネル（拡張機能版）で行い、こうしたMCPサーバーの追加や込み入った環境設定はターミナル（CLI版）で行う、という役割分担が最も効率的です。Notionから仕様書を読み込ませたり、エラーが起きたら自動でJiraのチケットを起票させたりと、複数ツールをまたいだ「業務フロー全体の自動化」が実現できるのが、このMCP連携の醍醐味です。エコシステムも日々拡大しているので、ぜひご自身のよく使うツールがMCPに対応していないか、調べて組み込んでみてくださいね。

VSCodeのClaude Code使い方まとめ

今回は、「claude code 使い方 vscode」というテーマで、導入の第一歩から、安全な運用方法、他ツールとの比較、そしてMCPを利用した高度な自動化まで、網羅的に詳しく解説してきました。かなりの長文になってしまいましたが、最後までお付き合いいただき本当にありがとうございます。

振り返ってみると、少し前まではターミナルの黒い画面でコマンドを打ち込んで使っていたような強力な自律型AIが、私たちが普段使い慣れているVSCodeのGUI上で、インラインDiffという視覚的に分かりやすい形で対話しながら使えるようになったのは、ソフトウェア開発の歴史において非常に画期的な出来事だと思います。

最初は「AIが勝手にコードを書き換えるなんて怖い」「設定が複雑で面倒くさい」と感じるかもしれませんが、この記事で紹介したような以下のポイントをしっかりと押さえておけば大丈夫です。

• 環境構築： VSCodeとNode.jsのバージョンを要件に合わせ、公式拡張機能をインストールする。
• 料金と認証： サブスクとAPI従量課金の違いを理解し、不要なAPIキーの環境変数を削除して二重課金トラップを防ぐ。
• コンテキスト管理： プロジェクトのルートに CLAUDE.md を置き、絶対的なルールをAIに共有する。
• 安全な運用： 常に「Plan（計画）」モードを基本とし、インラインDiffで必ず自分の目でコードをレビューしてから承認（Accept）する。
• 自動化の拡張： 慣れてきたらMCPを使ってSlackやNotionなどの外部ツールと連携させ、エディタの外の世界まで業務を自動化させる。

AIはあくまで「アシスタント」であり、最終的な責任と意思決定を行うのは私たち開発者自身です。プロジェクトの仕様や技術選定、セキュリティへの配慮といった人間の強みと、圧倒的なスピードでコードを生成し調査を行うAIの強みを、VSCodeという最高の環境でうまく融合させることができれば、個人開発からチーム開発まで、驚くほどの生産性を叩き出せるようになるはずです。

まだ使ったことがないという方は、まずは月額20ドルのProプランから気軽に導入してみて、ご自身のプロジェクトのコードを読ませてみてください。「えっ、こんなところまで理解して修正してくれるの！？」という感動がきっと待っていると思います。この記事が、皆さんの快適でわくわくするようなAIコーディングライフの第一歩になれば、私としても最高に嬉しいです！