Claude Code: VS Code と JetBrains 統合

最終更新:2026-08-31

Claude Code は本質的に CLI ツールですが、VS Code や JetBrains のターミナルで実行でき、拡張機能によりより良い統合が提供されます。

💡 ヒント: Claude Code は IDE プラグインではなくターミナルで実行されますが、IDE 拡張機能により素早いアクセス、サイドバーパネル、より良いインタラクションが提供されます。

📋 前提条件: 第4章 - 初回使用

1. 学ぶ内容


2. VS Code 統合

(1) 拡張機能のインストール

BASH
# 方法1:VS Code 拡張機能マーケットプレイスで検索
# "Claude Code" を検索 → インストール

# 方法2:コマンドラインでインストール
code --install-extension anthropic.claude-code

# 方法3:VS Code で Ctrl+Shift+X → Claude Code を検索 → インストール

(2) 拡張機能の設定

JSON
// settings.json
{
  "claude-code.apiKey": "sk-ant-api03-xxxxx",
  "claude-code.model": "claude-sonnet-4-20250514",
  "claude-code.autoApprove": "read-only",
  "claude-code.terminalProfile": "claude"
}

(3) 使用方法

方法 操作 ユースケース
サイドバーパネル Claude アイコンをクリック ビジュアルインタラクション
組み込みターミナル VS Code ターミナルで claude と入力 CLI と同等
キーボードショートカット Ctrl+Shift+C パネルを素早く開く
コンテキストメニュー コードを選択 → Ask Claude 的を絞った質問

▶ 例1:VS Code ワークフロー

TEXT 📖 参照専用
# Alice が VS Code で Claude Code を使用

1. プロジェクトを開く
2. Ctrl+` でターミナルを開く
3. claude と入力して起動

   または

1. サイドバーの Claude アイコンをクリック
2. パネルに指示を入力
3. ファイルの変更をクリックして diff を確認
4. ワンクリックで変更を Accept/Reject

3. JetBrains 統合

(1) プラグインのインストール

TEXT 📖 参照専用
# 対応 IDE:IntelliJ IDEA、WebStorm、PyCharm、GoLand 等

インストール手順:
1. File → Settings → Plugins
2. "Claude Code" を検索
3. Install をクリック
4. IDE を再起動

(2) JetBrains ターミナルでの使用

BASH
# JetBrains 内蔵ターミナルで Claude Code を直接実行可能
# 下部ツールバー → Terminal → claude と入力

# ターミナルの設定
# Settings → Tools → Terminal → Shell path
# ターミナルが claude コマンドを見つけられることを確認
which claude  # パスを確認

(3) JetBrains 固有の機能

機能 説明
コード選択 Q&A コードを選択 → 右クリック → Ask Claude
Intentions Alt+Enter → Claude 提案アクション
Diff プレビュー 内蔵 diff ビューアで変更をプレビュー
Run Configuration Claude Code 起動項目を設定

▶ 例2:JetBrains ワークフロー

TEXT 📖 参照専用
# Bob が IntelliJ IDEA で Claude Code を使用

1. Spring Boot プロジェクトを開く
2. 下部 Terminal パネル → claude
3. 入力: "Add paginated query endpoint to UserController"

Claude Code:
  → UserController.java を読み取り中
  → UserRepository.java を読み取り中
  → UserController.java を修正中(pageable エンドポイントを追加)
  → UserRepository.java を修正中(クエリメソッドを追加)
  → 実行中: mvn test
  ✅ すべてのテストが合格

4. IDE で diff を確認:
   変更されたファイルをダブルクリック → 内蔵 diff ビュー
   緑色は新しいコード、赤色は削除されたコードをハイライト

4. IDE 統合と純粋 CLI の比較

(1) 機能比較

次元 純粋 CLI VS Code 拡張機能 JetBrains プラグイン
インストール方法 npm グローバルインストール 拡張機能マーケットプレイス プラグインマーケットプレイス
インターフェース ターミナルテキスト サイドバーパネル ターミナル + Intentions
Diff 表示 git diff 内蔵 diff ビュー 内蔵 diff ビュー
ファイル操作 自動修正 ワンクリック確認 ワンクリック確認
コンテキスト認識 手動指定 コード選択 コード選択 + Intentions
リモート開発 SSH 直接 Remote SSH Remote SSH
設定管理 環境変数 settings.json IDE Settings

(2) 選択の推奨

シナリオ 推奨 理由
リモートサーバー 純粋 CLI GUI 不要、SSH で直接
日常開発 IDE 拡張機能 より良い統合体験
CI/CD 純粋 CLI 自動化スクリプト
マルチプロジェクト切り替え 純粋 CLI 柔軟なディレクトリ切り替え
チームコラボレーション IDE 拡張機能 学習コストが低い

5. ターミナル設定の最適化

▶ 例3:Claude Code ターミナル体験の最適化

BASH
# 1. シェルエイリアスの設定
echo 'alias cc="claude"' >> ~/.zshrc
echo 'alias ccr="claude --resume"' >> ~/.zshrc

# 2. ターミナルのカラー対応を設定
export TERM=xterm-256color

# 3. VS Code ターミナル設定 (settings.json)
{
  "terminal.integrated.shell.linux": "/bin/zsh",
  "terminal.integrated.env.linux": {
    "ANTHROPIC_API_KEY": "sk-ant-api03-xxxxx"
  }
}

# 4. JetBrains ターミナル設定
# Settings → Tools → Terminal → 環境変数を追加
# ANTHROPIC_API_KEY=sk-ant-api03-xxxxx

6. 総合例:マルチ IDE コラボレーション

TEXT 📖 参照専用
# Alice のチームがマルチ IDE コラボレーションを使用

チームメンバー A(VS Code + フロントエンドプロジェクト):
  → VS Code サイドバーから Claude Code を起動
  → Claude Code に React コンポーネントをリファクタリングさせる
  → 内蔵 diff で変更を確認

チームメンバー B(IntelliJ + バックエンドプロジェクト):
  → IDE ターミナルから Claude Code を起動
  → Claude Code に REST API を追加させる
  → Intentions で素早く操作

CI/CD パイプライン:
  → 純粋 CLI モード
  → claude --headless "Run code review"
  → 自動チェックと修正

❓ よくある質問

Q VS Code 拡張機能と CLI を同時に使えますか?
A はい、同じファイルを同時に操作しないことを推奨します。両者は同じ API Key とモデル設定を共有します。
Q プラグインはどの JetBrains IDE に対応していますか?
A すべての JetBrains IDE に対応しています:IntelliJ IDEA、WebStorm、PyCharm、GoLand、RubyMine、PhpStorm 等。
Q 拡張機能を使わずターミナルだけ使う場合、違いはありますか?
A コア機能は同じです。拡張機能はより良い UI 体験(diff ビュー、ワンクリック確認など)を提供するだけで、Claude Code の機能には影響しません。
Q リモート開発で使うには?
A VS Code Remote SSH でサーバーに接続後、リモートターミナルに Claude Code をインストールしてください。JetBrains も同様です。
Q 拡張機能は自動更新されますか?
A はい。VS Code と JetBrains どちらにも自動更新メカニズムがあります。CLI は手動で npm update -g が必要です。
Q どの IDE 統合が最も良いですか?
A VS Code 拡張機能の統合度が最も高い(サイドバーパネル、ショートカット、diff ビュー)。JetBrains が次点、純粋 CLI が最も柔軟です。

📖 まとめ


📝 練習問題

  1. 基本 (⭐): VS Code または JetBrains IDE に Claude Code 拡張機能をインストールし、正常に起動することを確認してください。
  2. 応用 (⭐⭐): 純粋 CLI と IDE 拡張機能の両方で同じタスクを完了し、体験の違いを比較してください。
  3. 高度 (⭐⭐⭐): VS Code Remote SSH + Claude Code を設定し、リモートサーバーで AI 支援プログラミングを行ってください。
Web-Tutorial.com

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。

100%