IDE Integration vs CLI
IDE 統合 (VS Code / JetBrains) と CLI の使い分け
約 12 分
·
クイズ 4 問
·
演習 2 問
重要キーワード (3 語)
Inline Diff
(インライン差分)
— IDE 上で Claude の編集案を行レベルで承認/却下する UI
Selection
(選択範囲)
— IDE で選んだコードを Claude にコンテキストとして渡す機能
Side Panel
(サイドパネル)
— VS Code / JetBrains で Claude Code をパネル表示するモード
CLI vs IDE — どっちを使う?
Claude Code は CLI / VS Code 拡張 / JetBrains プラグイン / デスクトップアプリ / Web 版 の複数形態で同じバックエンド (同じセッション・同じモデル) を共有します。 どれを使うかは作業スタイル次第で、混在も普通です。
比較表
| 観点 | CLI | VS Code / JetBrains 拡張 |
|---|---|---|
| 起動 | claude 一発 |
IDE 起動 → サイドパネル |
| 差分プレビュー | テキスト表示 | 行ごとに承認 (インライン diff) |
| 選択範囲指定 | @file.py:10-30 |
マウス選択 → 自動コンテキスト化 |
| 複数ファイル一覧 | @dir/ で開示 |
エクスプローラから複数選択可 |
| ターミナル統合 | ネイティブ | IDE 内ターミナル |
| 画像 (スクショ) | クリップボードから貼付 | ドラッグ&ドロップ |
| マルチプロジェクト | タブを使い分け | IDE のワークスペース機能 |
| キーバインド | シェルそのまま | IDE のショートカットを再利用 |
| 学習コスト | 低 (コマンド数語) | 中 (拡張の UI に慣れが要る) |
| 得意な作業 | 大規模リファクタ / Bash 駆使 / CI 連携 | 小さな編集ループ / レビュー / UI 微調整 |
VS Code 拡張のセットアップ
- 拡張機能タブ で「Claude Code」を検索 → インストール
- または CLI から:
code --install-extension anthropic.claude-code - コマンドパレット (
Ctrl+Shift+P) でClaude Code: Openを実行 - サイドパネルが開く → 既存 CLI セッションを引き継ぐ or 新規開始
VS Code 拡張の便利機能
- Inline Diff: Claude が編集を提案すると、ファイル上に差分が直接表示。✓ で個別に承認、× で却下
- Selection to Claude: コードを選択 → 右クリックメニュー or
Cmd+Escでその範囲だけを Claude に投げる - Status Line: 下部にトークン消費・モデル名・現在 mode が常時表示
- Diff Approval: 大規模編集を「ファイル単位」「ハンク単位」で個別承認できる
- Inline Quick Fix: エラー行で電球アイコン → 「Claude に修正させる」
よくある使い分け
| シーン | 推奨 |
|---|---|
| 「この関数だけリファクタ」 | VS Code 拡張 (関数を選択 → 依頼) |
| 「リポジトリ全体のテスト追加」 | CLI |
| 「PR レビュー」 | VS Code 拡張 (差分プレビューが視覚的) |
「CI で claude -p を回す」 |
CLI |
| 「ターミナル中心の作業」 | CLI |
| 「UI 開発で見た目を直す」 | VS Code 拡張 (スクショ貼付 + プレビュー) |
JetBrains プラグインのセットアップ
- Settings → Plugins → Marketplace で「Claude Code」検索
- インストール後 IDE 再起動
- 右サイドバーに Claude Code ツールウィンドウが追加
Toolsメニュー →Claude Code: Login
JetBrains 特有の便利
- Refactoring との連携: IntelliJ の「メソッド抽出」「リネーム」をプロンプトベースで実行
- Run Configuration: テスト失敗時に「Claude に修正依頼」アクション
- Database Tool 連携: SQL 結果のスクショを Claude に渡せる
CLI ↔ IDE のセッション共有
同じセッションを CLI と IDE で行き来できる:
# CLI で開始
$ claude
> ログイン機能を追加して... (作業中)
# 別端末 / VS Code を開く → 「セッションを引き継ぐ」を選ぶ
# → 同じ会話の続きが IDE で見られる
セッション ID は ~/.claude/projects/<repo-hash>/ 配下に保存。
実用パターン: 「IDE で書き始め、CLI で仕上げる」
[VS Code] 1. UI コンポーネントを選択 → Claude に「ここに loading 状態を追加」
→ Inline Diff で承認・微調整
[VS Code] 2. テストを選択 → 「同じパターンで edge case を 3 つ追加」
→ 個別承認
[CLI] 3. ターミナル切替: claude --continue
> 全テスト実行して、失敗があれば修正
[CLI] 4. > git add -A && コミットメッセージは前の作業に基づいて
[VS Code] 5. PR 画面で diff を最終確認 → push
どちらを使う? (おすすめ)
- 🆕 初心者: まず VS Code 拡張 から。視覚的で安全
- 🛠️ 中級者: CLI と VS Code の 両方。タスク単位で使い分け
- 🚀 上級者: CLI 中心。IDE はレビュー時のみ
- 🤖 CI/自動化: CLI のみ (
claude -pでスクリプタブル)
💡 どれを選んでも同じバックエンド。気分やタスクで切り替えていい。