Claude Code: VS Code と JetBrains 統合
最終更新:2026-08-31
Claude Code は本質的に CLI ツールですが、VS Code や JetBrains のターミナルで実行でき、拡張機能によりより良い統合が提供されます。
💡 ヒント: Claude Code は IDE プラグインではなくターミナルで実行されますが、IDE 拡張機能により素早いアクセス、サイドバーパネル、より良いインタラクションが提供されます。
📋 前提条件: 第4章 - 初回使用
1. 学ぶ内容
- VS Code での Claude Code 拡張機能のインストール
- JetBrains IDE での Claude Code の使用
- IDE 統合モードと CLI モードの比較
- ターミナル設定の最適化
- マルチ IDE ワークフロー
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 が最も柔軟です。
📖 まとめ
- VS Code と JetBrains どちらにも Claude Code 拡張機能/プラグインがあります
- 拡張機能はより良い UI 体験を提供しますが、コア機能は CLI と同等
- 純粋 CLI はサーバーや CI/CD シナリオに適しています
- コード選択による直接 Q&A は IDE 統合の最大の利点
- ターミナル設定の最適化により日常の体験が向上
📝 練習問題
- 基本 (⭐): VS Code または JetBrains IDE に Claude Code 拡張機能をインストールし、正常に起動することを確認してください。
- 応用 (⭐⭐): 純粋 CLI と IDE 拡張機能の両方で同じタスクを完了し、体験の違いを比較してください。
- 高度 (⭐⭐⭐): VS Code Remote SSH + Claude Code を設定し、リモートサーバーで AI 支援プログラミングを行ってください。