まずは自社の現状を棚卸しし、最も効果が見込める領域から第一歩を踏み出してみてください。
まずは自社の現状を棚卸しし、最も効果が見込める領域から第一歩を踏み出してみてください。
ブログ目次
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の最適な使い分けまでを実践的に解説します。
対象読者: VS CodeやJetBrains IDEを使って開発しているエンジニアで、Claude Codeとの連携を最適化したい方
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 Marketplaceからインストールできます。
インストール後、サイドバーにClaude Codeのアイコンが表示されます。クリックするとClaude Codeのセッションがサイドパネル内で開始されます。
VS Code拡張では、以下の操作がサイドパネル内で完結します。
VS Code拡張の最大の利点は、エディタで開いているファイルや選択範囲をClaude Codeのコンテキストとして渡せることです。
たとえば、特定の関数を選択した状態で「この関数のテストを書いてください」と指示すると、選択範囲がClaude Codeに送信され、その関数に対するテストが生成されます。ターミナルのClaude 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(IntelliJ IDEA、WebStorm、PyCharm、GoLand等)でもClaude Code拡張が利用可能です。
JetBrains版の拡張は、IDEのターミナルタブにClaude Codeのセッションを統合します。通常のターミナルタブと並べて使えるため、ビルドやテストの実行と、AIとの対話を同じウィンドウ内で切り替えられます。
JetBrains IDEは強力なコードインスペクション機能を備えています。Claude Codeと組み合わせることで、以下のようなワークフローが実現します。
JetBrainsのリファクタリング機能(リネーム、メソッド抽出等)はIDE側で実行し、新機能の実装やテスト生成はClaude Code側で実行するという使い分けが効率的です。
Claude Codeのセッション中にCtrl+Gを押すと、デフォルトのエディタが起動し、現在の会話やファイルコンテキストをエディタ上で確認・編集できます。
この機能は、長いプロンプトを入力したい場合や、Claude Codeの出力をエディタで加工したい場合に便利です。経営データの可視化やコンテンツマーケティングを含め、Claude Codeの業務活用に関心のある方はぜひ参考にしてください。
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のバリデーション・自動補完が使える |
Before: VS Codeでコンポーネントを実装し、別のターミナルウィンドウでClaude Codeにテスト生成を依頼していました。ウィンドウの切り替えが頻繁に発生し、コンテキストの共有も手動でファイルパスを指定する必要がありました。
After: VS Code拡張でClaude Codeをサイドパネルに統合します。コンポーネントを実装しながら、選択範囲を右クリックして「Claude Codeに送信」を選ぶだけでテスト生成を依頼できます。変更のdiffもVS Code内で確認でき、ウィンドウを切り替える必要がなくなりました。
開発効率が向上するだけでなく、エディタのコンテキスト(開いているファイル、カーソル位置、選択範囲)がClaude Codeに共有されるため、指示の精度も上がります。
Before: IntelliJ IDEAでJava/Kotlinのコードを書きながら、別ターミナルでClaude Codeを使っていました。JetBrainsの型推論やインスペクション結果をClaude Codeに伝えるには、エラーメッセージを手動でコピペする必要がありました。
After: JetBrains拡張でターミナルタブにClaude Codeを統合します。インスペクションで検出された問題をそのままClaude Codeに伝え、修正案を生成させます。JetBrainsのリファクタリング機能と、Claude Codeのコード生成を適材適所で使い分けることで、コード品質と開発速度を両立できます。
Before: Terraform、Docker、Kubernetes等のインフラコードを扱う際、複数のターミナルタブでClaude Code、terraform plan、kubectl等を切り替えていました。
After: IDEのターミナルペインを分割し、一つのペインでClaude Code、もう一つでインフラコマンドを実行します。Claude Codeに「terraform planの出力を分析して、意図しない変更がないか確認してください」と指示し、隣のペインでplanの出力を確認する、という並行作業が可能です。
| 作業内容 | IDE側の役割 | Claude Code側の役割 |
|---|---|---|
| 新機能実装 | コード理解・ナビゲーション | コード生成・テスト作成 |
| バグ修正 | デバッグ・原因特定 | 修正案の生成・影響範囲の分析 |
| コードレビュー | diff表示・インスペクション | セキュリティレビュー・改善提案 |
| ドキュメント作成 | Markdownプレビュー | ドキュメント文面の生成 |
Claude Codeの/diffコマンドで変更概要を把握し、詳細な差分はIDEのdiffビューアで確認するという組み合わせが効果的です。
CLAUDE.mdにプロジェクトの開発ルール(コードスタイル、命名規則、使用ライブラリ等)を記載しておくと、Claude CodeとIDEの両方がそのルールに従って動作します。ESLint/Prettier等のlinter設定とCLAUDE.mdの記述を一致させておくことが重要です。詳しくは「Claude Codeの.claude/ディレクトリ」で解説しています。
Claude Codeのカスタムスラッシュコマンド(/project:接頭辞)を定義しておくと、よく使う操作をコマンド一つで呼び出せます。IDEのキーボードショートカットと組み合わせれば、IDE側の操作とClaude Code側の操作をシームレスに切り替えられます。詳しくは「Claude Codeカスタムコマンド」で解説しています。
まずは自社の現状を棚卸しし、最も効果が見込める領域から第一歩を踏み出してみてください。
属人化を防ぎ、チーム全体で再現可能な仕組みとして標準化することが成功の鍵です。
自社の業務フローや要件に応じて、段階的にカスタマイズしていくことをおすすめします。
用途によって使い分けるのが最適です。VS Code拡張はエディタコンテキスト(開いているファイル、選択範囲)を自動共有できるため、コード編集作業中に便利です。一方、ターミナルでの直接実行は、Git操作やCI/CD連携、複数プロジェクトの横断作業に向いています。日常的な開発作業ではVS Code拡張を使い、自動化やバッチ処理ではターミナルを使う、という併用が効率的です。
はい。CursorはVS Codeベースのエディタであるため、VS Code向けのClaude Code拡張がそのまま動作します。CursorにはCursor独自のAI機能(Cursor Tab、Cursor Chat等)が組み込まれていますが、Claude Code拡張と併用することも可能です。ただし、AI補完や提案が二重に表示される場合があるため、必要に応じてCursor側のAI機能をオフにするか、使い分けルールを決めておくとよいでしょう。
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の導入)」などのご相談を受け付けております。 サービスのプランについてのご相談/お見積もり依頼や、ノウハウのお問い合わせについては、無料のお問い合わせページより、お気軽にご連絡くださいませ。
株式会社StartLink 代表取締役。累計150社以上のHubSpotプロジェクト支援実績を持ち、Claude CodeやHubSpotを軸にしたAI活用支援・経営基盤AXのコンサルティング事業を展開。
HubSpotのトップパートナー企業や大手人材グループにて、エンタープライズCRM戦略策定・AI戦略ディレクションを経験した後、StartLinkを創業。現在はCRM×AIエージェントによる経営管理支援を専門とする。