← レッスンに戻る
第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 をパネル表示するモード
**1 → 自動化なので API**, **2 → 手元で対話しながら直すならローカル版 Claude Code**, **3 → Web から大量収集する長時間タスクなので Claude Code on the web (クラウド)** が王道。Claude が違う答えを出した場合、理由を聞いてみましょう。

演習問題

演習 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 <id> で同期できます。

理解度チェック

  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/シェルスクリプトから呼ぶのに最適です。