Claude Code × VS Code / JetBrains連携|IDEとターミナルの最適な使い分け

  • 2026年3月17日
  • 最終更新: 2026年5月5日
claude-code-ide-integration
この記事の結論

まずは自社の現状を棚卸しし、最も効果が見込める領域から第一歩を踏み出してみてください。

ブログ目次

記事の内容を、そのまま実務に落とし込みたい方向け

HubSpot導入、AI活用、CRM整備、業務効率化までをまとめて支援しています。記事で気になったテーマを、そのまま相談ベースで整理できます。


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

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

本記事では、VS Code拡張機能のインストールと基本的な使い方、JetBrains IDEとの連携設定、Ctrl+Gによるエディタ起動の活用シーン、そしてCLIとIDEをどう使い分けるかの判断基準を実務観点で解説します。


この記事でわかること

Claude CodeはターミナルCLIとして強力ですが、IDEと組み合わせることで開発体験がさらに向上します。この記事では、VS Code・JetBrainsとの連携設定から、CLIとIDEの最適な使い分けまでを実践的に解説します。

  • Claude Code公式VS Code拡張機能のインストールと基本的な使い方 — VSCode拡張機能は、VSCodeMarketplaceからインストールできます。
  • JetBrains IDE(IntelliJ IDEA、WebStorm、PyCharm等)との連携方法 — JetBrains版の拡張は、IDEのターミナルタブにClaudeCodeのセッションを統合します。
  • Ctrl+Gによるエディタ起動の仕組みと活用シーン — この機能は、長いプロンプトを入力したい場合や、ClaudeCodeの出力をエディタで加工したい場合に便利です。
  • IDEのターミナルペインでClaude Codeを使う際の設定ポイント — ClaudeCodeはもともとターミナルで動作するCLIツールです。
  • CLIとIDEの最適な使い分け判断基準

対象読者: VS CodeやJetBrains IDEを使って開発しているエンジニアで、Claude Codeとの連携を最適化したい方


Claude CodeのIDE連携とは

Claude Codeはもともとターミナルで動作するCLIツールです。しかし、実際の開発作業ではコードの全体像を把握したり、型定義にジャンプしたり、デバッガを使ったりする場面があります。そうした場面ではIDEが欠かせません。

Claude CodeのIDE連携は、「AIによるコード生成・編集はCLIで行い、コードの理解・ナビゲーション・デバッグはIDEで行う」という役割分担を自然に実現するための仕組みです。

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

連携方式の全体像

連携方式 対応IDE 特徴
公式VS Code拡張 VS Code / Cursor Claude Codeをサイドパネルに統合。エディタコンテキストを直接共有
JetBrains拡張 IntelliJ IDEA, WebStorm, PyCharm等 ターミナルタブ統合。プロジェクトコンテキストの共有
ターミナル統合 任意のIDE IDEの統合ターミナルでClaude Codeを直接実行
Ctrl+Gエディタ起動 任意のエディタ Claude CodeからIDEのファイルを直接開く

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

インストール

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

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

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

基本操作

VS Code拡張では、以下の操作がサイドパネル内で完結します。

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

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

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

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

VS Code固有の設定

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

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

JetBrains IDEとの連携

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との対話を同じウィンドウ内で切り替えられます。

JetBrainsならではの活用法

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

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

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


Ctrl+Gによるエディタ起動

仕組み

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

この機能は、長いプロンプトを入力したい場合や、Claude Codeの出力をエディタで加工したい場合に便利です。経営データの可視化コンテンツマーケティングを含め、Claude Codeの業務活用に関心のある方はぜひ参考にしてください。

EDITOR環境変数の設定

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

# VS Codeを指定

**export EDITOR="code --wait"**
export EDITOR="code --wait"

# Vimを指定
export EDITOR="vim"

# Neovimを指定
export EDITOR="nvim"

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

--waitフラグが重要です。これを付けないと、エディタが起動した瞬間にClaude Codeが処理を続行してしまいます。--waitを付けることで、エディタでの編集が完了するまでClaude Codeが待機します。

活用シーン

シーン 操作 効果
長いプロンプト入力 Ctrl+Gでエディタを開き、複数行のプロンプトを記述 コピペやシンタックスハイライト付きで快適に入力
出力の加工 Claude Codeの出力をエディタにコピーして加工 IDEの検索・置換機能を活用
設定ファイル編集 CLAUDE.mdやsettings.jsonをエディタで開く IDEのバリデーション・自動補完が使える

実務での活用パターン

パターン1: フロントエンド開発(VS Code × Claude Code)

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

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

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

パターン2: バックエンド開発(JetBrains × Claude Code)

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

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

パターン3: インフラ・DevOps(ターミナル統合 × Claude Code)

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

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


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

CLIが向いている作業

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

IDEが向いている作業

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

併用が効果的な作業

作業内容 IDE側の役割 Claude Code側の役割
新機能実装 コード理解・ナビゲーション コード生成・テスト作成
バグ修正 デバッグ・原因特定 修正案の生成・影響範囲の分析
コードレビュー diff表示・インスペクション セキュリティレビュー・改善提案
ドキュメント作成 Markdownプレビュー ドキュメント文面の生成

関連コマンドとの組み合わせ

/diff × IDE: 変更の視覚的確認

Claude Codeの/diffコマンドで変更概要を把握し、詳細な差分はIDEのdiffビューアで確認するという組み合わせが効果的です。

CLAUDE.md × IDE設定: プロジェクト標準の統一

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

カスタムコマンド × IDEショートカット

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


あわせて読みたい


まとめ

まずは自社の現状を棚卸しし、最も効果が見込める領域から第一歩を踏み出してみてください。

属人化を防ぎ、チーム全体で再現可能な仕組みとして標準化することが成功の鍵です。

自社の業務フローや要件に応じて、段階的にカスタマイズしていくことをおすすめします。

  • Claude CodeとIDEを連携させることで、CLIの柔軟性とIDEの視覚的理解を両立できます
  • VS Code拡張ではサイドパネル統合とエディタコンテキスト共有、JetBrains拡張ではターミナルタブ統合とインスペクション連携、Ctrl+Gではエディタへの即座切り替えが可能です
  • 「コード生成・編集はClaude Codeで、理解・ナビゲーション・デバッグはIDEで」という役割分担を意識すると、開発フロー全体の生産性が向上します

よくある質問(FAQ)

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

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

Q2. 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機能をオフにするか、使い分けルールを決めておくとよいでしょう。

Q3. リモート開発環境(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に追加しておくのが便利です。


株式会社StartLinkは、事業推進に関わる「販売促進」「DXによる業務効率化(ERP/CRM/SFA/MAの導入)」などのご相談を受け付けております。 サービスのプランについてのご相談/お見積もり依頼や、ノウハウのお問い合わせについては、無料のお問い合わせページより、お気軽にご連絡くださいませ。

関連キーワード:

サービス資料を無料DL

著者情報

7-1

今枝 拓海 / Takumi Imaeda

株式会社StartLink 代表取締役。累計150社以上のHubSpotプロジェクト支援実績を持ち、Claude CodeやHubSpotを軸にしたAI活用支援・経営基盤AXのコンサルティング事業を展開。
HubSpotのトップパートナー企業や大手人材グループにて、エンタープライズCRM戦略策定・AI戦略ディレクションを経験した後、StartLinkを創業。現在はCRM×AIエージェントによる経営管理支援を専門とする。