💻 Claude Code入門 📖 約15分で読めます

Claude CodeとVS Code・JetBrainsの連携活用法

ターミナルAIとIDEを組み合わせた最強の開発環境構築

クロガイド｜Claude＆Claude Codeを無料で学ぼう

AI基礎からプロンプト術、Claude Codeの使い方まで。知識レッスンとクイズ式トレーニングで、AIスキルを段階的にアップ。ユーザー登録不要、すべて無料で今すぐ始められます。

はじめに

Claude CodeはターミナルベースのAIアシスタントですが、VS CodeやJetBrains等のIDEと組み合わせることで、最高の開発体験を実現できます。IDEのコード補完・デバッグ・GUI操作と、Claude Codeの高度なAI支援を組み合わせた「最強の開発環境」の構築方法を解説します。

なぜIDEとClaude Codeを併用するのか
VS Codeとの連携
JetBrainsとの連携
スプリットスクリーンワークフロー
IDE AI拡張 vs Claude Code
補完的な使い方パターン
おすすめ拡張機能
ワークスペース設定のコツ
まとめ

なぜIDEとClaude Codeを併用するのか

IDEとClaude Codeはそれぞれ得意分野が異なります。両方を活用することで、お互いの弱点を補完できます。

機能	IDE	Claude Code
コード補完	リアルタイムで高速	対話的に大きな単位で生成
リファクタリング	変数名変更等のシンプルな操作	設計レベルの大規模リファクタリング
デバッグ	ブレークポイント、変数監視	ログ分析、原因推定
ファイル操作	GUIで直感的	一括操作、パターンベースの変更
Git操作	GUI（差分表示、コミット）	高度なGit操作、コミットメッセージ生成
コードレビュー	差分の閲覧	AIによるレビュー、改善提案
新規実装	手動でコーディング	要件から一括生成

IDEは「手を動かす作業」に、Claude Codeは「頭を使う作業」に強い。両方を使い分けることで、開発スピードと品質が飛躍的に向上します。

VS Codeとの連携

統合ターミナルでClaude Codeを起動

VS Codeの統合ターミナルでClaude Codeを直接実行できます。

セットアップ手順

VS Codeでプロジェクトフォルダを開く
Ctrl+`（バッククォート）で統合ターミナルを開く
ターミナルでclaudeと入力してClaude Codeを起動
エディタとターミナルを上下に並べて作業

推奨レイアウト

┌─────────────────────────────────────┐
│  VS Code エディタ                      │
│  ┌──────────────────┬──────────────┐ │
│  │                  │ ファイル       │ │
│  │   コードエディタ    │ エクスプローラー│ │
│  │                  │              │ │
│  │                  │              │ │
│  ├──────────────────┴──────────────┤ │
│  │                                  │ │
│  │   統合ターミナル（Claude Code）     │ │
│  │                                  │ │
│  └──────────────────────────────────┘ │
└─────────────────────────────────────┘

VS Codeのターミナル設定

// settings.json（VS Code）
{
  // ターミナルのフォントサイズ
  "terminal.integrated.fontSize": 14,

  // ターミナルの高さ（行数）
  "terminal.integrated.rows": 15,

  // デフォルトシェル（Git Bash推奨 on Windows）
  "terminal.integrated.defaultProfile.windows": "Git Bash",

  // ターミナルのスクロールバック行数
  "terminal.integrated.scrollback": 10000
}

複数ターミナルの活用

ターミナル分割のすすめ

ターミナル1：Claude Code（AI対話用）
ターミナル2：通常のシェル（git操作、ビルド、テスト実行用）
ターミナル3：開発サーバー（npm run dev、php -S等）

Ctrl+Shift+`で新しいターミナルを追加、ターミナルパネル上部のタブで切り替えられます。

JetBrainsとの連携

PhpStorm、WebStorm、IntelliJ IDEAなどのJetBrains IDEでも、統合ターミナルでClaude Codeを使えます。

セットアップ手順

JetBrains IDEでプロジェクトを開く
Alt+F12でターミナルウィンドウを開く
claudeと入力してClaude Codeを起動
ターミナルタブの「+」ボタンで追加のターミナルを開ける

JetBrainsでの推奨設定

// Settings → Tools → Terminal
Shell path: "C:\Program Files\Git\bin\bash.exe" (Windows)
// または /bin/bash (Mac/Linux)

// ターミナルのタブ名を変更して識別しやすくする
// ターミナルタブを右クリック → "Rename Session"

JetBrains固有の利点

強力なリファクタリング：IDE側で変数名変更やメソッド抽出を行い、構造変更はClaude Codeに任せる
データベースツール：JetBrainsのDB接続機能でスキーマを確認しながらClaude Codeで実装
バージョン管理：JetBrainsのGit UIで差分を確認し、Claude Codeでコミットメッセージを生成
コードインスペクション：IDE側の静的解析で問題を発見し、Claude Codeに修正させる

スプリットスクリーンワークフロー

IDE＋Claude Codeの具体的な作業フローを紹介します。

ワークフロー1: AIコーディング + リアルタイム確認

Claude Codeに実装を指示（ターミナル）
生成されたコードをIDEで確認（エディタが自動的に更新される）
IDEのシンタックスハイライトやエラー表示で問題を発見
問題があればClaude Codeに修正を依頼
最終確認後、IDEのGit機能でコミット（または「コミットして」と指示）

ワークフロー2: デバッグ支援

# 1. IDEでブレークポイントを設定してデバッグ実行
# 2. エラーやスタックトレースを確認
# 3. Claude Codeにエラー内容を伝えて原因を調査

> 以下のエラーが発生しています。原因と修正方法を教えてください。
> ファイル: src/controllers/OrderController.php:45
> エラー: Call to undefined method Order::getTotal()

# 4. Claude Codeが提案した修正をIDEで確認
# 5. IDEで修正を適用し、再度デバッグで確認

ワークフロー3: テスト駆動開発

# 1. Claude Codeでテストを生成
> UserServiceのcreateUser()メソッドのテストを書いて

# 2. IDEでテストを実行（緑/赤の結果を確認）
# 3. テストが失敗したらClaude Codeに実装を依頼
> テストが通るようにcreateUser()を実装してください

# 4. IDEでテスト再実行 → 全てグリーン
# 5. 「変更をコミットして」と指示

IDE AI拡張 vs Claude Code

VS CodeにはCopilot、JetBrainsにはAI Assistantなど、IDE内蔵のAI機能もあります。Claude Codeとの違いを理解して使い分けましょう。

機能	IDE AI拡張（Copilot等）	Claude Code
コード補完	リアルタイム、行単位で高速	対話的、ファイル単位で生成
コンテキスト理解	現在のファイル中心	プロジェクト全体を理解
ファイル操作	限定的	作成・編集・削除を自律的に実行
コマンド実行	不可	ビルド、テスト、Git等を実行
マルチファイル変更	苦手	得意（複数ファイルを一度に変更）
デバッグ支援	エラー説明程度	原因調査、修正提案、実装まで
学習コスト	低い（IDE内で完結）	中程度（ターミナル操作が必要）
料金	月額課金（Copilot等）	API従量課金

使い分けの指針

IDE AI拡張を使う場面：コードを1行ずつ書いているとき、関数名やAPIの補完、定型的なコードの記述
Claude Codeを使う場面：新機能の設計・実装、バグの調査・修正、リファクタリング、テスト生成、コードレビュー
両方の併用：Claude Codeで大まかな実装を生成 → IDE AI拡張で細部を調整

補完的な使い方パターン

パターン1: Claude Codeで骨格を作り、IDEで仕上げる

Claude Codeに全体設計と基本実装を任せる
IDEで生成されたコードを確認・微調整
IDEのリファクタリング機能で変数名やメソッド名を整理
IDEのフォーマッターでコードスタイルを統一

パターン2: IDEで発見した問題をClaude Codeで解決

IDEの静的解析やコードインスペクションで問題を発見
問題の内容をClaude Codeに伝える
Claude Codeが修正案を提示・実装
IDEで再度確認して問題が解消されたことを確認

パターン3: テスト結果の橋渡し

IDEのテストランナーでテストを実行
失敗したテストの情報をClaude Codeに共有
Claude Codeが修正を実装
IDEで再テスト → 確認

拡張機能	用途	Claude Codeとの相性
GitLens	Git履歴の可視化	Claude Codeのコミット内容を確認
Error Lens	エラーのインライン表示	問題を素早く発見してClaude Codeに伝える
Todo Tree	TODO/FIXMEの一覧表示	Claude Codeが残したTODOを管理
Auto Rename Tag	HTMLタグの自動リネーム	Claude Code生成のHTMLを微調整
PHP Intelephense	PHP言語サポート	Claude Codeが生成したPHPコードの検証

機能/プラグイン	用途	Claude Codeとの相性
Database Tools	DB操作・スキーマ確認	DBスキーマを確認しながらClaude Codeで実装
HTTP Client	API テスト	Claude Codeが作ったAPIの動作確認
Code With Me	ペアプログラミング	チームでClaude Code活用を共有

ワークスペース設定のコツ

効率的な環境構築チェックリスト

ターミナルの高さを確保：エディタとターミナルの比率を6:4〜5:5に設定
フォントサイズの統一：エディタとターミナルで読みやすいサイズに
キーボードショートカットの習熟：ターミナル切り替え（Ctrl+`）、新規ターミナル（Ctrl+Shift+`）
自動保存の有効化：Claude Codeの変更がIDEに即座に反映されるよう設定
ファイルウォッチャーの設定：外部変更の自動検出を有効にする
Git統合の活用：IDEのGit機能で変更差分を視覚的に確認

VS Codeの推奨設定

{
  // 自動保存（Claude Codeの変更をリアルタイムで反映）
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000,

  // 外部変更の自動検出
  "files.watcherExclude": {
    "**/node_modules/**": true,
    "**/vendor/**": true
  },

  // ターミナルの設定
  "terminal.integrated.fontSize": 14,
  "terminal.integrated.defaultProfile.windows": "Git Bash",

  // ミニマップをオフ（画面領域の確保）
  "editor.minimap.enabled": false,

  // ブレッドクラムの表示（ファイル位置の把握）
  "breadcrumbs.enabled": true
}