← レッスンに戻る
第5章 · Claude Code入門

IDE 統合 (VS Code / JetBrains) と CLI の使い分け

IDE Integration vs CLI · 約 12 分

重要キーワード

English日本語説明
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 拡張のセットアップ

  1. 拡張機能タブ で「Claude Code」を検索 → インストール
  2. または CLI から: code --install-extension anthropic.claude-code
  3. コマンドパレット (Ctrl+Shift+P) で Claude Code: Open を実行
  4. サイドパネルが開く → 既存 CLI セッションを引き継ぐ or 新規開始

VS Code 拡張の便利機能

よくある使い分け

シーン 推奨
「この関数だけリファクタ」 VS Code 拡張 (関数を選択 → 依頼)
「リポジトリ全体のテスト追加」 CLI
「PR レビュー」 VS Code 拡張 (差分プレビューが視覚的)
「CI で claude -p を回す」 CLI
「ターミナル中心の作業」 CLI
「UI 開発で見た目を直す」 VS Code 拡張 (スクショ貼付 + プレビュー)

JetBrains プラグインのセットアップ

  1. SettingsPlugins → Marketplace で「Claude Code」検索
  2. インストール後 IDE 再起動
  3. 右サイドバーに Claude Code ツールウィンドウが追加
  4. Tools メニュー → Claude Code: Login

JetBrains 特有の便利

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

どちらを使う? (おすすめ)

💡 どれを選んでも同じバックエンド。気分やタスクで切り替えていい。

演習問題

演習 1: VS Code 拡張で Inline Diff を体験

VS Code に Claude Code 拡張をインストールし、以下を試してください。

  1. 既存ファイルの関数を選択 → 右クリック「Claude Code: Edit Selection」
  2. 「この関数を docstring 付きにリファクタして」と依頼
  3. Inline Diff で変更を行ごとに承認/却下
  4. 別のファイルでも同じ操作を繰り返し、複数ファイル承認の感覚を掴む

観察ポイント: - 選択範囲だけを編集してくれるか (関係ない場所をいじっていないか) - 承認/却下の判断速度 (CLI のテキスト diff より速いか?) - IDE 自体のリンタ警告が出ないか

スタータープロンプト:
選択した関数を読みやすくリファクタしてください。1) docstring (Google style) を追加 2) 早期 return で nest を浅く 3) 型ヒント追加。挙動は変えないこと。
ヒントを見る

Inline Diff は「ハンク単位の承認」が便利。すべて OK ならファイル全体を一括承認。一部だけ気に入らなければハンクごとに却下。

演習 2: CLI と IDE のセッション往復

1 つのタスクを CLI で開始し、途中で VS Code に切り替え、最後また CLI に戻ってください。

手順: 1. CLI で claude 起動 → 「TODO アプリを Flask で作って」と依頼 2. 雛形ができたら一旦止め、VS Code を開いてセッション引き継ぎ 3. VS Code でテンプレ HTML を Inline Diff で編集 4. CLI に戻り claude --continue で続き → 「テストを書いて実行」

観察ポイント: 同じセッション ID を共有しているか、文脈が途切れていないか

スタータープロンプト:
Flask で最小限の TODO アプリ (1 ファイル) を作ってください。SQLite で永続化、追加/完了/削除ができれば良いです。
ヒントを見る

IDE と CLI で別セッションになってしまった場合は、~/.claude/projects/ 配下のセッション ID を確認して --resume で同期できます。

理解度チェック

  1. VS Code 拡張で「Inline Diff」が果たす役割は?
    1. Claude のモデルを切り替える
    2. Claude の編集案を行ごとに承認/却下できる UI
    3. 差分をクラウドにアップロードする
    4. テストカバレッジを表示する
  2. 「リポジトリ全体に同じパターンの修正を一括で適用」したい時、最も向くのは?
    1. VS Code 拡張で 1 ファイルずつ Inline Diff
    2. CLI で claude を起動 (一括処理に向く)
    3. ブラウザ版 claude.ai/code で 1 ファイルずつ
    4. JetBrains の手動 Refactoring
  3. CLI で開始したセッションを VS Code 拡張で続きから再開する仕組みの根拠は?
    1. クラウドに会話が保存されている
    2. ~/.claude/projects/ にセッション履歴が保存され、CLI/IDE で共有できる
    3. Git history に保存される
    4. 再開はできない (各環境で別セッション)
  4. CI 上で Claude Code を非対話的に動かしたい時の最適な方法は?
    1. VS Code 拡張をヘッドレスモードで動かす
    2. claude -p "..." でワンショットモード (CLI)
    3. claude.ai/code を curl で叩く
    4. JetBrains plugin を CLI で起動
解答と解説を見る
  1. B — Inline Diff は IDE 上で行/ハンク単位に承認・却下できる UI。CLI のテキスト diff より視覚的に速い。
  2. B — 大量ファイルへの一括処理は CLI が最も効率的。IDE は小さな編集ループに向きます。
  3. B — セッション ID 単位で履歴が ~/.claude/projects/ に保存され、CLI と IDE で同じセッションを継続できます。
  4. B — claude -p (print モード) はスクリプタブルな非対話モードで、CI/シェルスクリプトから呼ぶのに最適です。