「Claude Code」の真価は併用にあり 4つのインターフェース使い分けとハイブリッド運用：「AIはただのコード補完」はもう古い 速習・実践「Claude Code」（3）（2/3 ページ）

[高江 賢（著）／監修：山田祥寛（WINGSプロジェクト），＠IT]

ハイブリッド運用の基本パターン――1つに絞らず乗り換える

　ある入り口に慣れてから次へ、と考える必要はありません。同じ会話・同じ設定をそのまま持ち越せるので、乗り換えコストはほぼゼロです。代表的な3つのパターンを挙げます。

• CLI版で大きな改修を自律的に走らせ、生成された差分はVS Code拡張機能版で確認・微調整する。実装の速さと確認の細やかさを、入り口ごとに分ける組み合わせ
• VS Code拡張機能版で局所的に手を入れて固めてから、CLI版に切り替えてテストや周辺コマンドを回す。エディタで考えながら作り、ターミナルで検証する流れ
• Desktopを加えるなら、CLIで開始した長時間タスクを/desktopで移して一覧画面から監視する、ライブプレビューを見ながら実装させて細部だけVS Code拡張機能版で詰める、といった使い方

　CLIで進めた会話は、VS Code拡張機能版でも履歴から選んで続けられます。CLIで開き直したいときは、「claude --resume」で履歴ピッカーを呼び出します。

　ここまでは入り口を乗り換える例ですが、CLI版とVS Code拡張機能版は別プロセスなので、同じプロジェクトを両方から同時に開いておくこともできます。ただしこの場合は、それぞれの会話になるので、Session history（セッション履歴）での引き継ぎとは異なる使い方です。編集ファイルの競合には注意が必要なものの、長いタスクの合間に別の作業も可能です。

CLI版とVS Code拡張機能版の比較

　いよいよ本題です。同じ題材を、CLI版とVS Code拡張機能版で順に使い、何が違って何が同じかを、手を動かして確かめます。Plan ModeもCheckpointsも両方から使えますが、CLI版にしかない機能も残っています。次の3点は、VS Code拡張機能版に制限がある機能です。

• コマンド・Skillsはサブセットのみ（/で表示、CLI版は全件）
• !によるbashショートカットは使えない
• タブ補完は使えない

　今回のハンズオンでは、こうした機能差ではなく、操作の手ざわりがどう違うかを確かめます。

題材：シンプルなマークダウンプレビューツール

　題材は、「HTML」「CSS」「JavaScript」だけで作る軽量なマークダウンプレビューです。左に入力欄、右にプレビュー領域。Markdownの解析にはmarked.jsを使い、ビルドツールやパッケージマネジャーは挟みません。

　依存関係が薄く、ブラウザでindex.htmlを開けば動きます。生成される差分も一目で読み切れるので、コードを気にすることなく、入り口ごとの操作感を見比べられます。本連載次回以降はこのプロジェクトに同じClaudeで機能を足していくので、ここで作ったものを、そのまま使い続けます。

　なお、ハンズオンでは、モデルも、思考の深さを決めるeffortも既定のまま使います。「/model」コマンドでいつでも切り替えられますが、どれを選んでも手順は変わりません。Claudeの応答は、実行のたびに揺れるものなので、記事中の例と違う返答になっても、気にせず読み進めてください。

ステップ1：CLI版＋Plan Modeでひな型を生成させる

　空のフォルダを前にして、いきなりコードを生成させません。まずはClaude Codeで計画を立てます。CLI版でPlan Modeに入り、ひな型が出来上がるまでの流れを見ていきます。

• Plan Modeでひな型を依頼する

　「markdown-preview」という空フォルダを用意し、VS Codeで開きます。メニューの「ターミナル」→「新しいターミナル」（または［Ctrl］＋［@］）で統合ターミナルを開き、そこでclaudeを起動します。続いて［Shift］＋［Tab］を何度か押し、権限モードをPlan Modeに切り替えます。プロンプトの表示が「plan mode」に変わったら準備完了です。

　ここで、Claudeに次のプロンプトを入力します。

マークダウンプレビューのひな型を作ってください。
- HTMLとCSS、JavaScriptだけで動く構成
- ビルドツールやパッケージマネジャーは使わない
- 左に入力欄、右にプレビュー画面
- Markdownの解析はライブラリ利用。marked.jsを想定、他に適切なものがあれば提案して
- 読み込みはCDN経由
- 入力したらプレビューが更新されるところまで（ダークモードや拡張機能は今後追加予定）

　Plan Modeの場合、Claudeはこの指示に対してコードを書きません。返ってくるのは「これから何をどう作るか」という段取りだけです。

• Claudeが返した2つの質問

　たいていの場合、Claudeはいきなり完成形を出さず、判断の分かれる点を先に整理してくれます。今回まず返ってきたのは、計画そのものではなく2つの質問でした。

　1つ目の質問はライブラリについてのもの。こちらが想定として挙げたmarked.jsには「軽量・高速・APIがシンプル。今回の用途には十分」と評価。別の候補のmarkdown-itも示し、「CommonMark準拠でプラグイン機構が豊富。将来拡張機能を追加する予定があるなら、プラグインで拡張しやすい」と長所を並べてくれました。どちらかを選ばせる前に、判断材料をそろえてくるわけです。

　2つ目の質問は安全性についてのもの。次のような内容でした。

marked.jsの出力はデフォルトでHTMLエスケープされないため、入力に生HTMLや<script>を書くとそのまま実行されます。サニタイズ処理を入れますか？
> 1. DOMPurifyを追加する（推奨）
     CDNから追加でDOMPurifyを読み込み、marked.parse()の出力をサニタイズしてからDOMに挿入する。安全側に倒す。
  2. 今回は入れない
     ひな型をシンプルに保つ。ローカルで自分の入力のみ扱う想定なら許容範囲だが、後で追加が必要になる。

　この質問には、ローカル用途なので「今回は入れない」を選択しました。こういった質問が出るかどうかも、モデルや実行のたびに変わります。文脈を読んだ上で整理し、計画づくりへ進む場合もあります。

　先回りで確認されなかった点も、気になればこちらからたずねます。「Markdownの解析を自前で書くのは現実的か」と聞けば、「パーサを一から書くのは手間がかかる、だからライブラリに委ねるのが現実的だ」と判断材料が返ってきます。

• 返ってきた計画を確認する

　今回返ってきたのは、次のような計画でした。そのままでは長いので、適宜省略しています。

 Markdownプレビュー ひな型
 Context
 markdown-preview ディレクトリはまだ空。ビルドツール・パッケージマネジャーなし、HTML/CSS/JSのみで動くMarkdownプレビューのひな型を新規作成する。ダークモードや拡張機能は将来追加予定のため、今回はスコープに含めない。
 ユーザー確認済みの方針:
 - Markdown解析ライブラリ: marked.js(CDN経由)
 - HTMLサニタイズ(DOMPurify等): 今回は入れない(将来の拡張候補として計画には注記する)
 ファイル構成
 markdown-preview/ 直下にindex.html、style.css、script.jsの3ファイルを新規作成
 〜中略〜
 検証方法
 - index.htmlをブラウザで直接開く(file://でOK、サーバー不要)
 - textareaに見出し・リスト・コードブロックなどを含むMarkdownを入力し、右側にリアルタイムで整形されたHTMLが表示されることを確認
 - コンソールにエラーが出ていないことを確認(marked.jsのCDN読み込み含む)

　この計画の最後に注目してください。承認前に、ファイル構成や実装方針だけでなく検証方法まで示されているのです。「ファイルをブラウザから直接開いて確認する」「コンソールにエラーが出ていないかどうか確かめる」というのは、ビルドやサーバを挟まないこのプロジェクトの特徴を踏まえた検証手段です。

• 計画を承認し、実装させる

　計画の画面は、それ自体が実行してよいかどうかを問う質問でもあり、検証時には末尾に次の3択が表示されました。

Claude has written up a plan and is ready to execute. Would you like to proceed?
> 1. Yes, and use auto mode
  2. Yes, manually approve edits
  3. Tell Claude what to change
     shift+tab to approve with this feedback

　1と2はどちらも計画の承認で、違いは実行中に確認を挟む粒度です。auto mode（自動モード）を選べば、Claudeが最後まで自律的に書き進め、manually approve editsなら、ファイルへの変更を1つずつ確かめながら承認していきます。

　3のTell Claude what to changeを選ぶと、選択肢の右横がそのまま入力欄になり、フィードバックを打ち込めます。「3ファイルに分けず、まずは1つのindex.htmlにまとめたい」と構成そのものを頼んで戻すこともできます。

　コードはまだ1行も書かれていないので、やり直しを気にする必要はありません。今回は自動モードを選んだので、Claudeがファイルを書き出していきます。出来上がったのは、次の3ファイルです。

markdown-preview/
├ index.html   ← 2カラムの土台。style.css と script.js を読み込む
├ style.css    ← レイアウトとプレビュー本文のスタイル
└ script.js    ← 入力→marked.parse()→プレビュー更新

　書き出した後のClaudeの挙動も、実行のたびに違いました。「index.htmlをブラウザで直接開けば動作します」と伝えるだけのこともあれば、「Claude in Chrome」を使って自分で開き、見た目まで確かめてくることもあります。

Claude in Chrome

CLIやVS Code拡張機能版からブラウザを操作したいときに使う拡張機能です。Chromeにインストールしてサインインすると、Claudeが画面を認識し、クリックや入力、スクロールといった操作を代行します。

　ブラウザでindex.htmlを開くと、あらかじめ入っているサンプルのMarkdownがそのままプレビューされます。入力欄を書き換えれば、右のプレビューも即座に追従します。

出来上がったマークダウンプレビュー（左に入力、右にプレビュー）

　スタイルもロジックも別ファイルに分かれていますが、開くのはindex.htmlだけでよく、ビルドは不要です。