VSCodeとClaude Codeを並べて使う方法
SEOキーワード: Claude Code VSCode
カテゴリ: automation
スラッグ: claude-code-vscode
excerpt: VSCodeとClaude Codeを横に並べると作業が激変した。拡張機能なしでできる連携方法から公式拡張の使い方まで、実体験で解説します。
—
Claude Codeを使い始めてしばらく経つと、「もっと効率よく作業できないか」と感じる瞬間がやってくる。私もそうだった。ターミナルとテキストエディタを行ったり来たりしながら、「AIが何をしているのか、もう少しわかりやすく確認できたら」と思い続けていた。そんなときに試したのが、VSCode（Visual Studio Code）との組み合わせだ。結論から言うと、この2つを並べて使うようになってから、作業の「見通し」がぐっと良くなった。今回は実際にやってみてわかった連携方法を、拡張機能なしの方法と拡張機能ありの方法に分けて正直にまとめていく。
VSCodeとClaude Codeを組み合わせると何が変わるか
ひとことで言えば、「AIが何をしているか見ながら作業できる」状態になる。Claude Codeだけをターミナルで使っていると、AIが作業している間、ファイルがどう変わっているかリアルタイムではわからない。作業が終わってから「えっ、こんなに変わってた？」と気づくことが多かった。VSCodeを横に並べると、AIが編集した箇所が即座に反映されるため、「意図通りに動いているか」をその場で確認できる。
もう一つの変化は、作業が「怖くなくなった」ことだ。非エンジニアがClaude Codeを使うときの不安のひとつに、「取り返しのつかない変更をされるかも」というものがある。VSCodeで変更内容を目視しながら進められるようになると、その不安がかなり薄れた。
まず試してほしい：拡張機能なしの統合ターミナル連携
実は、VSCode拡張機能を入れなくてもClaude CodeとVSCodeの連携はできる。VSCodeには「統合ターミナル」という機能があり、エディタの下部でそのままコマンドを実行できるのだ。
設定方法はシンプルだ。
1. VSCodeでプロジェクトフォルダを開く（ファイル→フォルダを開く）
2. `Ctrl+\`（バッククォート）で統合ターミナルを開く
3. ターミナル内で `claude` と入力してClaude Codeを起動する
これだけで、左にファイルツリー・右上にエディタ・右下にClaude Codeという画面が完成する。AIが編集したファイルはエディタ側に自動で反映されるので、変更をリアルタイムで追える。私は最初の1週間はこの方法で使っていた。慣れるまでの入り口としては十分だと思う。
次のステップ：公式拡張機能を入れると何が変わるか
Claude CodeにはVSCode専用の公式拡張機能がある（Anthropic製・インストール数200万超）。この拡張機能を入れると、ターミナルを開かなくてもVSCodeのサイドバーからClaude Codeを操作できるようになる。
インストール方法はこうだ。
1. VSCodeを開く
2. `Cmd+Shift+X`（Mac）または `Ctrl+Shift+X`（Windows）で拡張機能パネルを開く
3. 「Claude Code」で検索し、Anthropic製のものをクリックしてインストール
4. VSCodeを再起動する
これだけでサイドバーにClaude Codeのチャットパネルが現れる。ターミナルを別途開かなくても、VSCode内でClaude Codeとのやり取りが完結する。
拡張機能を入れて気づいた3つの変化
① ファイルを@メンションで渡せる
チャットパネルで `@ファイル名` と入力すると、特定のファイルや行範囲を直接参照させられる。「このファイルの〇〇行目を直して」が自然に伝わるようになった。以前はファイルパスを手打ちで伝えていたのだが、それが不要になった。特に複数のファイルを参照させながら作業するときの手間が大きく減った。
② 変更のAccept/Rejectがその場でできる
AIが編集したコードが、差分として表示される。緑が追加、赤が削除、というgitでおなじみの表示形式だ。承認も却下もボタン1つで完了する。「やっぱりこの変更はいらない」というときに、ターミナルで作業を中断して元に戻す手間がなくなった。変更の粒度が細かく見えるので、「全部採用」ではなく「この部分だけ採用」という使い方もしやすい。
③ チェックポイントで「やり直し」ができる
拡張機能にはチェックポイント機能がある。AIが大きな変更を加える前の状態を自動で記録しておいてくれるため、「元に戻したい」という場面でも落ち着いて対処できる。正直、これが一番ありがたかった。「巻き戻せる」という安心感があると、大胆な指示を出しやすくなる。
まだわからない部分
並行して複数の会話を開く機能（マルチタブ）については、まだ使いこなせていない。複数の作業を同時に走らせるには相性が良さそうだが、どのタイミングで使うべきかが自分の中でまだ整理できていない。これは引き続き試しながら記事にしていく予定だ。
読者へのプロンプト
以下のプロンプトをClaude Codeに貼ると、今開いているプロジェクトの構成を把握させることができる。VSCodeで新しいプロジェクトを開いたときの最初の一手として使いやすい。
このフォルダのファイル構成を確認して、どんなプロジェクトか教えてください。
主要なファイルの役割と、作業を始めるにあたって把握しておくべき点を簡潔にまとめてください。
まとめ
- VSCodeの統合ターミナルでClaude Codeを起動するだけで、ファイル変更をリアルタイムで確認できる
- 公式のVSCode拡張機能（Anthropic製）を入れると、サイドバーのチャットパネルから操作できるようになる
- ファイルの@メンション・差分のAccept/Reject・チェックポイントという3つの機能が作業を変える
- まずは拡張機能なしの統合ターミナル連携から始めて、慣れてきたら拡張機能を追加するのがおすすめ
- 「AIの作業が見える」だけで、Claude Codeへの安心感がかなり変わる
「Claude Codeは使っているけど、作業しながら何が変わっているか追えていない」という感覚があるなら、VSCodeとの組み合わせをぜひ試してほしい。見える化されるだけで、作業の手応えがかなり変わるはずだ。