Claude Code VSCodeはコマンド不要？公式拡張で修正と差分確認を始める

Claude Code VSCodeでは、コマンドを覚えなくても、VS Code上でファイルを修正し、差分（変更前後の内容の違い）を確認できます。

必要なVS Codeの版は、公式ドキュメントでは1.94以上、Marketplaceの説明では1.98以上と記載が分かれています。1.98以上に更新しておけば確実です。有料のClaudeプラン、またはClaude Consoleアカウントでサインインします。通常の利用ではAPIキーを用意する必要はありません（Visual Studio Marketplace）。

拡張機能ビュー（追加機能を検索・管理する画面）をmacOSではCmd+Shift+X、Windows/LinuxではCtrl+Shift+Xで開き、「Claude Code」を検索します。提供元がAnthropicの「Claude Code for VS Code」であることを確かめ、インストールしてください。初回起動時はブラウザでサインインします。

Claude Codeパネルと「Learn Claude Code」チェックリストが表示されれば、導入は成功です。見当たらない場合はVS Codeを再起動するか、コマンドパレット（機能名を入力して実行する画面）でDeveloper: Reload Windowを実行します。

「このファイルの役割と処理の流れを説明し、修正が必要な箇所を挙げてください。まだ変更はしないでください」

選択範囲はチャットに自動で渡されます。ファイルや行範囲は、@メンション（チャットで対象を指定する記法）でも指定できます。まずPlan（作業計画を確認するモード）で内容を読み、納得してからManual（変更を都度承認するモード）で修正を依頼してください。変更前後の差分を確認し、受け入れるか拒否するかを選べます。

ターミナル版も使いたい方は、Claude Codeの導入手順でCLIの準備方法を確認できます。

選ぶ基準は機能の多さではなく、作業中に何を確認しながら進めたいかです。AnthropicがVS Codeで推奨するのは、IDEに統合したグラフィカルな拡張機能です。ファイルの文脈や変更内容をエディタ上で追いたいなら拡張機能、コマンドを入力して作業を進めたいならCLIが合います。

この例では、社内申請画面の分かりにくい表示を調べ、修正計画の確認から変更の承認までをVS Code内で進めます。最後に、拡張機能とターミナル版の使い分けも確認します。

**手順1：Claude Code拡張機能を導入する**

VS Codeの拡張機能ビューで「Claude Code」を検索してインストールし、初回起動時にAnthropicアカウントでサインインします。インストール後は、Sparkアイコン、アクティビティバー、コマンドパレットのいずれかからClaude Codeパネルを開けます。

導入が反映されない場合は、コマンドパレットから次を実行します。

Developer: Reload Window

VS Codeの画面が読み込み直され、インストール済みの拡張機能が反映されます。

**手順2：修正箇所をClaudeに説明してもらう**

社内申請Webツールの作業フォルダーをVS Codeで開き、申請フォームや申請状況の表示に関係しそうなファイルを開きます。該当する行が分かる場合はその範囲を選択し、Claude Codeパネルの@メンションから選択範囲またはファイルを会話に渡します。

この社内申請画面では、申請状況の表示が分かりにくいと利用者から指摘されています。渡した範囲やファイルを読み、申請状況がどこで決まり、どこに表示されているかを、非エンジニアにも分かる言葉で説明してください。まだ変更はしないでください。

Claudeから、状態を決める処理と画面表示の関係が説明され、修正対象を絞り込めます。

**手順3：Planで変更前に作業計画を確認する**

Claude Codeのモードを「Plan」に切り替えます。Planは、すぐにファイルを書き換えず、先に作業内容を整理してもらうためのモードです。

申請状況の意味が利用者に伝わるように表示を修正したいです。現在の仕組みを大きく変えず、変更する箇所、変更内容、確認すべき影響を計画として示してください。

Claudeから変更候補と影響範囲が返るため、意図しない大規模な修正になっていないかを作業前に確認できます。

**手順4：Manualで差分を確認して修正する**

計画に問題がなければ、モードを「Manual」に切り替えます。Manualでは、Claudeが提案した変更を差分、つまり「変更前と変更後の比較」として確認してから、受け入れるか拒否できます。

先ほどの計画に沿って修正してください。申請状況の判定方法は変えず、利用者に見える説明だけを分かりやすくしてください。

Claudeが変更案を差分で表示します。内容を確認して受け入れるとファイルに反映され、拒否した変更は反映されません。「Auto」や「Edit automatically」は変更を自動的に進めたい場合の選択肢ですが、初回や業務上重要な修正ではManualで一件ずつ確認すると安全です。

**手順5：作業を再開し、必要ならターミナル版を使う**

修正後は、Session historyから今回の会話を探して開けます。過去のメッセージを保ったまま、「なぜこの修正をしたか」の確認や追加作業を続けられます。

VS Code拡張機能のチャットには必要なCLIが内蔵されていますが、VS Codeの統合ターミナルでClaude Codeを使う場合は、スタンドアロンCLIを別途インストールする必要があります。導入済みの場合は、統合ターミナルで次を実行します。

claude

ターミナル内でClaude Codeが起動します。ファイルや選択範囲を画面上で渡し、差分を見ながら承認したい作業は拡張機能、ターミナル操作を中心に進めたい作業はスタンドアロンCLI、という使い分けができます。

業務ツールの設定ファイルを調べようとしても、Sparkアイコン（Claude Codeを開く操作ボタン）が見えず、選択範囲も送れなければ手が止まります。自分のミスと決めつけず、症状ごとに原因を切り分ければ出口が見つかるはずです。

エディター右上のSparkアイコンは、ファイルを開いているときだけ表示されます。見えないときは対象ファイルを一つ開き、それでも表示されないならVS Codeを再起動するか、コマンドパレットでDeveloper: Reload Windowを実行してください。ファイルを開かずに始める場合は、左側のアクティビティバーにあるSparkアイコンからも会話を開けます（Anthropic 公式ドキュメント）。

差分（変更前後で生じた内容の違い）に100を超える変更があると、変更ごとの承認・拒否ボタンは表示されず、ファイル全体で確認することになります。細かな採否を一つずつ決めたい仕事には向かない条件です。ただ、依頼する範囲を小さく分ければ、確認する差分も絞れます。

送信後に応答しないなどのエラーでは、まずインターネット接続を確かめ、新しい会話で同じ依頼を試します。それでも動かず、CLIを導入済みなら統合ターミナルでclaudeを実行してください。画面では分からない詳細なエラー表示が、接続と動作のどちらで詰まったかを切り分ける手掛かりになります。

業務ツールの設定ファイルは、変更箇所が少なくても周辺設定との関係を読み違えることがあります。初回は修正を急がず、対象を絞って説明を受けてから、IDE内の差分で変更内容を確認してください。

• 説明を読む際は、修正候補が依頼した範囲に収まっているか、変更する値や記述の意味を自分で説明できるかを確かめます。設定名や用語が分からなければ、その語が何を制御するのか追加で質問してください。

• 内容を理解できた範囲だけ修正を依頼し、変更後はエディター内の差分を確認します。追加・削除された行に加え、指定していない周辺行まで変わっていないかも確認してください。

• 判断できない差分があれば、変更依頼を止めます。対象を一つの設定項目や短い行範囲へ絞り、「この行を変える理由」「変えない場合との違い」を説明するよう求め直してください。

- Visual Studio Marketplace「Claude Code for VS Code」 - Claude Code Docs「CLI reference」 - Claude Code Docs「Use Claude Code in VS Code」 - Claude Code Docs「Advanced setup」