Claude Code VS Code連携｜IDEとターミナルの使い分け設計

Claude CodeのIDE連携は、ツールを増やす話ではなく開発の役割分担を決める話です。生成・編集はCLI、理解・ナビゲーション・デバッグはIDEという境界線を、チーム全員が同じ形で再現できるように設計します。

「Claude Codeは強力だけれど、型定義のジャンプやデバッガが必要な場面ではやはりIDEが欲しい」「IDEとターミナルの行き来が多く、コンテキストを切り替えるたびに集中力が削られる」「メンバーごとに使い方がバラバラで、レビューのときに何をAIに書かせたのか分からない」——VS CodeやJetBrainsを使っているエンジニアが、Claude Codeを本格導入する際にぶつかるよくある課題です。

Claude CodeのIDE連携とは、AIによるコード生成・編集はCLIで行い、コードの理解・ナビゲーション・デバッグはIDEで行うという役割分担を自然に実現するための仕組みです。公式VS Code拡張、JetBrains拡張、ターミナル統合、Ctrl+Gによるエディタ起動という4つの連携方式が提供されており、ツールを行き来する必要なくプロジェクトのコンテキストをIDEと共有できます。

出典: Anthropic公式ドキュメント: IDE integrations

本記事では、VS Code拡張機能のインストールと基本的な使い方、JetBrains IDEとの連携設定、Ctrl+Gによるエディタ起動の活用シーン、そしてCLIとIDEをどう使い分けるかの判断基準を実務観点で解説します。ターミナル側を複数エージェント前提のものに置き換える選択肢としては、cmuxの使い方で解説しています。

この記事でわかること

Claude CodeはターミナルCLIとして強力ですが、IDEと組み合わせることで開発体験がさらに向上します。ただし「なんとなく両方使う」状態のままだと、個人の慣れに依存した属人的な使い方になりがちです。この記事では設定手順に加えて、チームで共有できる判断基準まで踏み込みます。

• Claude Code公式VS Code拡張機能のインストールと基本的な使い方 — VS Code Marketplaceからインストールし、サイドパネル内でチャット・編集適用・差分確認までを完結させる流れを説明します。
• JetBrains IDE（IntelliJ IDEA、WebStorm、PyCharm等）との連携方法 — JetBrains版の拡張はIDEのターミナルタブにClaude Codeのセッションを統合するため、ビルドやテストと同じウィンドウで並行作業できます。
• Ctrl+Gによるエディタ起動の仕組みと活用シーン — 長いプロンプトを入力したい場合や、Claude Codeの出力をエディタで加工したい場合に効きます。EDITOR環境変数の設定が前提になります。
• CLIとIDEの最適な使い分け判断基準 — どちらが向くかを作業の性質で切り分け、併用が効果的なケースは役割を表で整理します。
• 使い分けをチームの仕組みに落とす方法 — CLAUDE.mdとカスタムコマンドを使い、個人の力量ではなくプロジェクトの設定として標準を引き継げる形にします。

VS CodeやJetBrains IDEを使って開発しているエンジニアで、Claude Codeとの連携を最適化したい方に向けて書いています。最後まで読むと、自分の環境に連携を設定するだけでなく、チーム全員が同じルールでCLIとIDEを行き来できる状態を設計できるようになります。

Claude CodeのIDE連携とは何か

Claude Codeはもともとターミナルで動作するCLIツールです。しかし実際の開発作業では、コードの全体像を把握したり、型定義にジャンプしたり、デバッガを使ったりする場面があります。そうした場面ではIDEが欠かせません。連携の目的は「IDEの中でAIを動かすこと」そのものではなく、AIと人間、CLIとIDEの担当範囲を明確にすることにあります。

4つの連携方式と選び方

提供されている連携方式は4つです。どれか1つを選ぶというより、環境に合わせて組み合わせるのが実務的です。

選び方の基準はシンプルで、普段の編集操作がエディタ中心ならVS Code拡張、ビルド・テスト・デバッグの比重が高くIDE機能を多用するならJetBrains拡張、環境を極力変えたくないなら統合ターミナルから始める、という順で考えていただくといいかなと思います。

「AIに任せること」と「人が判断すること」の線引き

連携設定の前に決めておきたいのが、AIと人の役割分担です。ここが曖昧なまま拡張機能だけ入れると、提案をそのまま適用してしまい、レビューで何が起きたか追えなくなります。

私たちがAIツールを運用するときに一貫して置いている前提は、AIは超一流の専門家ではなくアシスタントとして扱う、というものです。叩き台をAIに作らせ、最終判断は人が持つ。この原則をIDE連携にも持ち込むと、後述のautoApplyEditsをfalseにする設定の意味が腑に落ちるはずです。

現状の「手作業での行き来」を棚卸しする

——IDEでエラーメッセージをコピーし、ターミナルに貼り付け、返ってきたコードをまたIDEに戻す。この往復は、スプレッドシートで顧客情報をコピー＆ペーストして管理している状態とよく似ています。情報が分散し、手作業が増え、担当者ごとにやり方が違ってしまう構造は同じです。

まずは1日のうちどの作業でウィンドウを行き来しているかを書き出してみてください。ファイルパスの手入力、エラーログのコピペ、差分確認のためのタブ切り替え。この3つが多いなら、連携設定の効果が出やすい状態です。逆に、ほぼCLIだけで完結している方は、無理にGUI連携を入れる必要はありません。

VS Code拡張機能の設定と使い方

VS Code拡張は、Claude Codeをサイドパネルに統合し、エディタで開いているファイルや選択範囲をそのままコンテキストとして渡せる連携方式です。日常の編集作業の比重が高い方にとっては、最初に試す価値がある入口になります。

インストールと基本操作

VS Code拡張機能は、VS Code Marketplaceからインストールできます。

1. VS Codeを開く
2. 拡張機能パネル（Ctrl+Shift+X）を開く
3. 「Claude Code」で検索
4. Anthropic公式の拡張機能をインストール

インストール後、サイドバーにClaude Codeのアイコンが表示されます。クリックするとサイドパネル内でセッションが開始され、以下の操作が完結します。

• チャット: 通常のClaude Codeセッションと同じ対話
• ファイル編集: Claudeが提案した変更をワンクリックで適用
• 差分表示: 変更前後のdiffをVS Codeのdiffビューアで表示
• コンテキスト共有: 開いているファイル、選択範囲をClaude Codeに自動共有

このうち実務で効いてくるのが差分表示です。ターミナルのテキスト差分では見落としがちな変更も、VS Codeのdiffビューアなら構文ハイライト付きで確認できます。適用前に差分を確認してから反映する、という運用をチームのルールにしておくと安心です。

エディタコンテキストの活用

VS Code拡張の最大の利点は、エディタで開いているファイルや選択範囲をClaude Codeのコンテキストとして渡せることです。

例えば、特定の関数を選択した状態で「この関数のテストを書いてください」と指示すると、選択範囲がClaude Codeに送信され、その関数に対するテストが生成されます。ターミナルのClaude Codeではファイルパスを手動で指定する必要がありましたが、VS Code拡張ではエディタ上の操作だけで完結します。指示の精度が上がるのは、プロンプトが上手くなったからではなく、渡している情報が正確になったからです。

settings.jsonでの設定と推奨値

settings.jsonで以下の設定が可能です。

{
  "claudeCode.terminalProfile": "default",
  "claudeCode.autoApplyEdits": false,
  "claudeCode.diffView": "side-by-side"
}

• autoApplyEdits: Claudeが提案した編集を自動適用するかどうか。安全のためfalseを推奨します
• diffView: 差分表示の形式。side-by-side（横並び）とinline（インライン）を選択できます

autoApplyEditsをfalseにしておくのは、先ほどの役割分担の延長です。自動適用は確かに速いのですが、適用された内容を誰も見ていない状態が生まれると、レビューコストが後から跳ね返ってきます。まずはfalseで運用し、影響範囲の小さい領域から段階的に緩めるかどうかを検討する形が現実的かなと思います。

ただし、拡張機能が向かないケース

正直に書くと、VS Code拡張が常に最適とは限りません。複数リポジトリを横断して一括変更をかける作業や、CI/CDに組み込む自動処理では、サイドパネルよりもCLIの方が扱いやすい場面があります。また、サイドパネルを常時開くとエディタの作業領域が狭くなるため、画面が小さい環境では統合ターミナルの分割の方が快適なこともあります。拡張機能を入れたうえで、作業に応じてCLIに戻れる状態を残しておくのが安全です。

JetBrains IDEとの連携設計

JetBrains系IDEでは、ターミナルタブへの統合という形でClaude Codeを組み込みます。VS Code拡張がエディタ中心なのに対し、JetBrains連携はIDEの解析機能とAI生成を噛み合わせる使い方に向いています。

JetBrains拡張のインストール

JetBrains系IDE（IntelliJ IDEA、WebStorm、PyCharm、GoLand等）でもClaude Code拡張が利用可能です。

1. JetBrains IDEを開く
2. Settings → Plugins → Marketplace を開く
3. 「Claude Code」で検索
4. インストールして再起動

ターミナルタブ統合の意味

JetBrains版の拡張は、IDEのターミナルタブにClaude Codeのセッションを統合します。通常のターミナルタブと並べて使えるため、ビルドやテストの実行と、AIとの対話を同じウィンドウ内で切り替えられます。

ここで重要なのは、ターミナルタブに統合されているということは、CLIとしての振る舞いがそのまま使えるという点です。スラッシュコマンドも環境変数も、ターミナルで動かしていたときと同じ前提で扱えます。IDE専用の別物を覚え直す必要はありません。

インスペクション連携のワークフロー

JetBrains IDEは強力なコードインスペクション機能を備えています。Claude Codeと組み合わせることで、以下のようなワークフローが実現します。

1. JetBrainsのインスペクションでコード品質の問題を検出
2. 検出された問題をClaude Codeに伝えて修正案を生成
3. 修正をIDEのdiffビューでレビュー・適用

この流れのポイントは、問題の「検出」を機械的なルールに任せている点です。何を直すべきかの判断をAIの主観に委ねず、静的解析の結果という客観的なインプットから始めるため、修正の妥当性を後から検証しやすくなります。

リファクタリングはIDE、生成はClaude Code

JetBrainsのリファクタリング機能（リネーム、メソッド抽出等）はIDE側で実行し、新機能の実装やテスト生成はClaude Code側で実行するという使い分けが効率的です。

理由は単純で、リネームや抽出のような構造変更は、IDEの解析エンジンが参照関係を正確に追って一括更新してくれるからです。一方、ゼロから書き起こす処理やテストケースの洗い出しは、文脈を読んで案を出すAIの方が速いことが多くあります。どちらが優れているかではなく、得意な仕事を渡すという発想です。

Ctrl+Gによるエディタ起動を使いこなす

Ctrl+Gは、IDE拡張を入れていない環境でも使える、もっとも軽量な連携方式です。特別なプラグインを必要とせず、環境変数の設定だけで動くため、まず試すならここからでも構いません。

仕組みと使いどころ

Claude Codeのセッション中にCtrl+Gを押すと、デフォルトのエディタが起動し、現在の会話やファイルコンテキストをエディタ上で確認・編集できます。

この機能は、長いプロンプトを入力したい場合や、Claude Codeの出力をエディタで加工したい場合に便利です。ターミナルの1行入力で長文の仕様を書くのは辛いものですが、エディタに切り替えられればシンタックスハイライトも検索置換も使えます。

EDITOR環境変数の設定

Ctrl+Gで起動するエディタは、EDITOR環境変数で制御されます。

# VS Codeを指定
export EDITOR="code --wait"

# Vimを指定
export EDITOR="vim"

# Neovimを指定
export EDITOR="nvim"

# Cursorを指定
export EDITOR="cursor --wait"

--waitフラグが重要です。これを付けないと、エディタが起動した瞬間にClaude Codeが処理を続行してしまいます。--waitを付けることで、エディタでの編集が完了するまでClaude Codeが待機します。設定がうまく効かないときは、まずこのフラグの有無を確認してみてください。

上の画面は、本記事で紹介している/diffコマンドと、EDITOR環境変数を設定する4パターンのコマンドをターミナル上に並べたものです。

活用シーンの整理

3つ目の設定ファイル編集は地味ですが効果が大きい使い方です。CLAUDE.mdを育てていく運用では編集頻度が高くなるため、エディタの補完とバリデーションが効く状態にしておくと、記述ミスによる不具合を減らせます。

経営データの可視化やコンテンツマーケティングを含め、Claude Codeの業務活用に関心のある方はぜひ参考にしてください。

実務での活用パターン

ここからは、連携方式ごとに実際の開発シーンでどう変わるかを、Before/Afterの形で整理します。自社の開発スタイルに近いものから読んでいただければと思います。

フロントエンド開発（VS Code × Claude Code）

Before: VS Codeでコンポーネントを実装し、別のターミナルウィンドウでClaude Codeにテスト生成を依頼していました。ウィンドウの切り替えが頻繁に発生し、コンテキストの共有も手動でファイルパスを指定する必要がありました。

After: VS Code拡張でClaude Codeをサイドパネルに統合します。コンポーネントを実装しながら、選択範囲を右クリックして「Claude Codeに送信」を選ぶだけでテスト生成を依頼できます。変更のdiffもVS Code内で確認でき、ウィンドウを切り替える必要がなくなりました。

開発効率が向上するだけでなく、エディタのコンテキスト（開いているファイル、カーソル位置、選択範囲）がClaude Codeに共有されるため、指示の精度も上がります。

バックエンド開発（JetBrains × Claude Code）

Before: IntelliJ IDEAでJava/Kotlinのコードを書きながら、別ターミナルでClaude Codeを使っていました。JetBrainsの型推論やインスペクション結果をClaude Codeに伝えるには、エラーメッセージを手動でコピペする必要がありました。

After: JetBrains拡張でターミナルタブにClaude Codeを統合します。インスペクションで検出された問題をそのままClaude Codeに伝え、修正案を生成させます。JetBrainsのリファクタリング機能と、Claude Codeのコード生成を適材適所で使い分けることで、コード品質と開発速度を両立できます。

インフラ・DevOps（ターミナル統合 × Claude Code）

Before: Terraform、Docker、Kubernetes等のインフラコードを扱う際、複数のターミナルタブでClaude Code、terraform plan、kubectl等を切り替えていました。

After: IDEのターミナルペインを分割し、一つのペインでClaude Code、もう一つでインフラコマンドを実行します。Claude Codeに「terraform planの出力を分析して、意図しない変更がないか確認してください」と指示し、隣のペインでplanの出力を確認する、という並行作業が可能です。

ただしインフラ領域では、AIの提案をそのまま適用する運用は避けたほうが安全です。分析と説明はAIに任せ、適用の判断は人が持つ。影響範囲が本番環境に直結する領域ほど、この境界を厳しく引く必要があります。

IDEとCLIの使い分け判断基準

ここが本記事の核心です。連携を設定しても、どちらを使うかの基準がなければ結局は個人の好みで運用が分かれてしまいます。作業の性質で切り分けるのが、もっとも再現性の高い分け方だと考えています。

CLIが向いている作業

• 大規模なコードベースの横断的な変更（リファクタリング、命名規則の統一等）
• 複数ファイルにまたがる機能実装
• Git操作の自動化（コミット、PR作成、レビュー）
• CI/CDパイプラインへの組み込み
• バッチ処理やスクリプト実行

共通しているのは、範囲が広く、人が目視で追うより機械的に処理した方が早い作業である点です。画面に収まらない規模の変更は、GUIで見ようとするほど把握しづらくなります。

IDEが向いている作業

• コードの読解・ナビゲーション（定義ジャンプ、参照検索）
• デバッグ（ブレークポイント、変数ウォッチ）
• リファクタリング（リネーム、メソッド抽出、インターフェース抽出）
• GUI操作が必要な作業（データベースビューア、REST Clientなど）

こちらは逆に、人が理解し判断するための作業です。デバッグは仮説を立てて検証する行為なので、思考のテンポに合わせて止めたり進めたりできるIDEの方が適しています。

併用が効果的な作業

この表をそのまま採用する必要はありません。扱う言語、チームの規模、レビュー体制によって最適な線引きは変わりますので、企業様によって最適な形は異なります。自社の開発フローに当てはめて、どの列にどの作業を置くかをチームで一度議論していただくのが、この記事のいちばんの活用法かなと思います。

使い分けを「仕組み」に落とし込む

ここまでの判断基準は、個人の頭の中に置いておくだけでは時間とともに風化します。設定ファイルとコマンドに落とし込み、新しく入ったメンバーでも同じ使い方になる状態を作るところまでが設計です。

CLAUDE.mdでプロジェクト標準を統一する

CLAUDE.mdにプロジェクトの開発ルール（コードスタイル、命名規則、使用ライブラリ等）を記載しておくと、Claude CodeとIDEの両方がそのルールに従って動作します。ESLint/Prettier等のlinter設定とCLAUDE.mdの記述を一致させておくことが重要です。

ここに、先ほどの使い分け基準も書き込んでおくことをおすすめします。「リネームはIDEのリファクタリング機能で行う」「本番影響のある変更は自動適用しない」といったルールを文章として残しておけば、口頭で伝える必要がなくなります。詳しくは「Claude Codeの.claude/ディレクトリ」で解説しています。

カスタムコマンドとIDEショートカットを揃える

Claude Codeのカスタムスラッシュコマンド（/project:接頭辞）を定義しておくと、よく使う操作をコマンド一つで呼び出せます。IDEのキーボードショートカットと組み合わせれば、IDE側の操作とClaude Code側の操作をシームレスに切り替えられます。

個人がその都度プロンプトを書く運用は、書き手の力量に結果が左右されます。頻出の指示をカスタムコマンドとしてリポジトリに置いてしまえば、誰が実行しても同じ品質の出力が返ってくる状態に近づきます。人を教育して揃えるのではなく、仕組みで揃えるという発想です。詳しくは「Claude Codeカスタムコマンド」で解説しています。

/diffとIDEのdiffビューアを組み合わせる

Claude Codeの/diffコマンドで変更概要を把握し、詳細な差分はIDEのdiffビューアで確認するという組み合わせが効果的です。概要を速く見るのはCLI、1行ずつ精査するのはIDE、という役割分担がここでも成り立ちます。

レビュー前に/diffで全体像を確認する、という手順をチームの約束事にしておくと、意図しない広範囲の変更に気づきやすくなります。

段階的に広げる導入ステップ

いきなり全員に全方式を展開する必要はありません。私たちが社内でAIツールを広げるときも、まず一部のメンバーで試し、効果が確認できたものから順に標準へ組み込んでいます。

まずは第1段階の「1人・1IDE・1週間」から始めていただき、効果が見えたら次に進む形が無理のない進め方です。

よくある質問

VS Code拡張とターミナルでの直接実行、どちらを使うべきですか？

用途によって使い分けるのが最適です。VS Code拡張はエディタコンテキスト（開いているファイル、選択範囲）を自動共有できるため、コード編集作業中に便利です。一方、ターミナルでの直接実行は、Git操作やCI/CD連携、複数プロジェクトの横断作業に向いています。日常的な開発作業ではVS Code拡張を使い、自動化やバッチ処理ではターミナルを使う、という併用が効率的です。

Cursor（VS Code fork）でもClaude Code拡張は使えますか？

はい。CursorはVS Codeベースのエディタであるため、VS Code向けのClaude Code拡張がそのまま動作します。CursorにはCursor独自のAI機能（Cursor Tab、Cursor Chat等）が組み込まれていますが、Claude Code拡張と併用することも可能です。ただし、AI補完や提案が二重に表示される場合があるため、必要に応じてCursor側のAI機能をオフにするか、使い分けルールを決めておくとよいでしょう。

リモート開発環境（SSH接続、Dev Container等）でもIDE連携は使えますか？

VS CodeのRemote - SSH拡張やDev Containers拡張と組み合わせて使用できます。リモートマシンにClaude Codeをインストールし、VS Codeのリモートターミナルで実行する形になります。Claude Code拡張自体はローカルのVS Codeインスタンスで動作しますが、ターミナル経由でリモートのClaude Codeセッションと通信します。Docker Dev Containerの場合は、コンテナ内にClaude Codeをインストールする設定をdevcontainer.jsonに追加しておくのが便利です。

Ctrl+Gでエディタが起動しないのですが、どこを確認すればよいですか？

まずEDITOR環境変数が設定されているかを確認してください。設定されている場合は、--waitフラグの有無を確認します。code --waitやcursor --waitのように--waitを付けていないと、エディタが起動した瞬間にClaude Codeが処理を続行してしまい、編集が反映されないように見えることがあります。シェルの設定ファイルに書いた場合は、新しいターミナルセッションで反映されているかも併せて確認してください。

チームで使い分けルールを揃えるには何から始めればよいですか？

CLAUDE.mdに1つだけルールを書くところから始めるのが現実的です。例えば「Claudeが提案した編集は差分を確認してから適用する」という1行でも、レビュー時の前提が揃います。ルールを増やすのは、実際に運用して必要性を感じてからで十分です。最初から網羅的なガイドラインを作ろうとすると、誰も読まないドキュメントになりがちです。

まとめ

Claude CodeのIDE連携は、ツールを増やす話ではなく、開発作業の役割分担を決める話です。本記事の要点を整理します。

• Claude CodeとIDEを連携させることで、CLIの柔軟性とIDEの視覚的理解を両立できます
• VS Code拡張ではサイドパネル統合とエディタコンテキスト共有、JetBrains拡張ではターミナルタブ統合とインスペクション連携、Ctrl+Gではエディタへの即座切り替えが可能です
• 「コード生成・編集はClaude Codeで、理解・ナビゲーション・デバッグはIDEで」という役割分担を意識すると、開発フロー全体の生産性が向上します
• 判断基準は個人の頭の中ではなく、CLAUDE.mdとカスタムコマンドという仕組みに落とし込むことで、新しいメンバーでも同じ使い方を再現できます

最初の一歩としては、まずは普段いちばん長く開いているIDE1つだけに連携を設定し、autoApplyEditsをfalseにした状態で1週間使ってみてください。全方式を一度に導入する必要はありません。

具体的な次の行動は次の3ステップです。

1. 1日の作業のうち、IDEとターミナルを行き来している場面を3つ書き出す
2. 該当するIDEに拡張機能を入れ、EDITOR環境変数に--wait付きで設定する
3. 1週間使った結果を踏まえ、使い分けルールを1行だけCLAUDE.mdに追記する

Claude Codeの全コマンド一覧はClaude Codeチートシートをご覧ください。AI活用の全体像はAI活用完全ガイドで解説しています。

CRMを活用した業務効率化やAIとの連携に関するご相談は、CRM特化型コンサルティングのHubSpotゴールドパートナーのStartLinkまでお気軽にお問い合わせください。

あわせて読みたい

• Browser Use CLIの使い方｜AIエージェントがブラウザを自動操作するOSSツールの実践ガイド
• Claude Code × Chrome DevTools連携｜WebアプリのライブデバッグをAIで効率化する
• Claude Coworkで経理・バックオフィスを効率化する方法｜請求書・仕訳・レポート作成の自動化
• cmuxの使い方
• Claude Codeカスタムコマンド