Claude Codeとエディタの関係

Claude Codeはターミナルで動くCLIツールです。 特定のエディタに縛られない自由さが特徴ですが、エディタとの併用で効率が大幅に上がります。 この記事では、VS Codeを中心にエディタ連携のベストプラクティスを解説します。

Claude Codeの基本操作については基本コマンド一覧を参照してください。

VS Code + Claude Codeの基本セットアップ

ステップ1：VS Codeの統合ターミナルを開く

VS Codeで統合ターミナルを開く方法です。

ステップ2：Claude Codeを起動

統合ターミナルでClaude Codeを起動します。

claude

VS Codeのターミナルで起動すると、ワークスペースのルートディレクトリがそのまま作業ディレクトリになります。 cdで移動する必要がありません。

ステップ3：画面レイアウトの最適化

効率的な画面レイアウトを紹介します。

推奨レイアウト：

┌──────────────────────────────────────┐
│  VS Code エディタ（コード確認用）      │
│                                      │
│  ┌─────────────┐ ┌────────────────┐  │
│  │ ファイル     │ │ コードエリア    │  │
│  │ エクスプローラ│ │               │  │
│  │             │ │               │  │
│  └─────────────┘ └────────────────┘  │
│                                      │
│  ┌──────────────────────────────────┐│
│  │ ターミナル（Claude Code）         ││
│  │ > Claude Codeへの指示...          ││
│  └──────────────────────────────────┘│
└──────────────────────────────────────┘

ターミナルパネルの高さは、画面の30-40%がちょうど良いです。 Cmd+Shift+Pから「View: Toggle Panel Maximized」で最大化もできます。

実践ワークフロー

ワークフロー1：コード生成 → 確認 → 修正

最も基本的な併用パターンです。

手順：

1. ターミナルのClaude Codeに指示を出す
2. エディタ側でファイルの変更をリアルタイムに確認
3. 問題があればClaude Codeに修正を依頼

> 新しいAPIエンドポイント /api/users を作ってください。
  GETでユーザー一覧、POSTでユーザー作成です。

Claude Codeがファイルを作成すると、VS Codeが自動検知します。 エディタ側のタブに変更されたファイルが表示されます。

ワークフロー2：Git差分の確認

Claude Codeの変更内容をGitで確認するフローです。

手順：

1. Claude Codeにコード変更を依頼
2. VS CodeのSource Controlパネル（Cmd+Shift+G）を開く
3. 変更されたファイルの差分を確認
4. 問題があればClaude Codeに修正を依頼
5. 問題なければコミット

# Claude Codeに変更を依頼
> src/utils/api.tsのエラーハンドリングを改善してください

# VS Codeで差分を確認後、問題なければ
> 今の変更をコミットしてください。
  メッセージ: "fix: APIのエラーハンドリングを改善"

VS CodeのGit連携を活かすと、変更の確認が視覚的にできます。

ワークフロー3：複数ターミナルの活用

ターミナルを分割して効率的に作業する方法です。

ターミナル1: Claude Code（メイン作業）
ターミナル2: 開発サーバー（npm run dev）
ターミナル3: テスト実行（npm test -- --watch）

VS CodeではCmd+\でターミナルを分割できます。 Claude Codeで変更を行い、隣のターミナルで即座に結果を確認できます。

設定方法：

# ターミナル1でClaude Codeを起動
claude

# ターミナル2で開発サーバーを起動（別のターミナルタブ）
npm run dev

# ターミナル3でテストウォッチを起動（別のターミナルタブ）
npm test -- --watch

VS Codeの便利な設定

自動保存の有効化

Claude Codeがファイルを変更した後、VS Codeに即座に反映されるようにします。

settings.jsonに以下を追加します。

{
  "files.autoSave": "onFocusChange",
  "files.watcherExclude": {
    "**/node_modules/**": true,
    "**/.git/**": true
  }
}

ターミナルのフォント設定

Claude Codeの出力を見やすくするフォント設定です。

{
  "terminal.integrated.fontSize": 14,
  "terminal.integrated.fontFamily": "'JetBrains Mono', 'Fira Code', monospace",
  "terminal.integrated.lineHeight": 1.4
}

ターミナルのスクロールバック

長い出力を遡れるようにスクロールバッファを増やします。

{
  "terminal.integrated.scrollback": 10000
}

推奨VS Code拡張機能

Claude Codeとの併用で役立つ拡張機能です。

Cursor・WindSurfとの比較

AIコーディングツールの分類

現在のAIコーディングツールは大きく2タイプに分かれます。

Claude Code vs Cursor

Cursor:
├── エディタに統合されたAIアシスタント
├── インライン補完が高速
├── チャットでコード質問・生成
├── タブ補完による自動コード提案
└── 開いているファイルのコンテキストを利用

Claude Code:
├── ターミナルベースのCLIツール
├── プロジェクト全体を理解して作業
├── ファイルの作成・編集・削除を自律実行
├── シェルコマンドの実行も可能
└── 複数ファイルの大規模変更が得意

使い分けの指針：

Claude Code vs WindSurf

WindSurfはCursorと似た位置づけですが、独自の「Cascade」機能があります。

WindSurf:
├── Cursorに似たエディタ統合型
├── Cascade: 複数ステップの自動実行
├── コンテキスト認識が強力
└── UIベースの操作

Claude Code:
├── ターミナルベースの操作
├── CLAUDE.mdによるプロジェクト設定
├── より柔軟なコマンド実行
└── CI/CDパイプラインとの統合が容易

併用のすすめ

実は、これらのツールは排他的ではありません。 併用することで、それぞれの強みを活かせます。

おすすめの併用パターン：

日常のコーディング: Cursor（インライン補完）
   ↓
新機能の実装: Claude Code（複数ファイル生成）
   ↓
微調整・修正: Cursor（ピンポイント編集）
   ↓
テスト・デプロイ: Claude Code（コマンド実行）

各ツールの詳しい比較はClaude Code vs Cursor vs Copilot徹底比較も参照してください。

ターミナル選択のポイント

macOSの場合

Windowsの場合

Windows環境では、WSL2の利用を強く推奨します。 詳しくはインストールガイドのWindows編を参照してください。

効率的な作業のコツ

コツ1：エディタで確認、ターミナルで指示

役割を明確に分けましょう。

エディタの役割:
- コードの閲覧・確認
- Git差分の確認
- エラー箇所の特定
- 検索（Cmd+Shift+F）

Claude Codeの役割:
- コードの生成・修正
- ファイルの作成・削除
- テストの実行
- ビルドの確認

コツ2：ファイルパスを活用する

VS Codeのファイルパスをコピーして、Claude Codeに渡しましょう。

VS Codeでファイルを右クリック
→ 「相対パスのコピー」
→ Claude Codeに貼り付け

> src/components/Header.tsxのナビゲーションメニューに
  「ブログ」リンクを追加してください

正確なファイルパスを渡すと、Claude Codeが迷わず対象ファイルを特定できます。

コツ3：エラーのコピペ

VS Codeの「問題」パネル（Cmd+Shift+M）のエラーをコピーして、Claude Codeに渡しましょう。

> 以下のTypeScriptエラーを修正してください:

  src/hooks/useAuth.ts(23,5): error TS2322:
  Type 'string | undefined' is not assignable
  to type 'string'.

エラーメッセージにはファイル名と行番号が含まれています。 Claude Codeが正確に問題箇所を特定できます。

コツ4：ターミナルの使い分け

複数のターミナルタブを目的別に使い分けます。

# ターミナル名を設定できるエディタもある
Tab 1: "Claude"   → Claude Code本体
Tab 2: "Server"   → npm run dev
Tab 3: "Test"     → npm test --watch
Tab 4: "Git"      → git操作用

まとめ

Claude Codeとエディタ連携のポイントです。

• VS Codeの統合ターミナルでClaude Codeを起動するのが最も手軽
• エディタで確認、Claude Codeで実行の役割分担が効率的
• Git差分の視覚的確認でClaude Codeの変更内容を安全にレビューできる
• Cursor/WindSurfとは競合ではなく併用がおすすめ
• ターミナルの分割でサーバー・テスト・Claude Codeを同時に操作できる

次のステップとして、以下の記事もおすすめです。

• Claude Codeで最初のプロジェクトを作ろう - 実践で併用を体験する
• Claude Codeへの指示の出し方ガイド - 効率的な指示法を学ぶ
• Claude Codeとは？ - 基本を復習する