「Claude Code」の真価は併用にあり 4つのインターフェース使い分けとハイブリッド運用：「AIはただのコード補完」はもう古い 速習・実践「Claude Code」（3）（3/3 ページ）
Claude CodeをローカルPCで使う場合、4つの利用形態（CLI、VS Code拡張機能版、Desktopアプリ、Web版）があります。マークダウンプレビューツールの作成を通じて、それぞれの使い分け、Plan ModeやCheckpointsを活用した効率的な開発手順を解説します。
ステップ2：VS Code拡張機能版＋Checkpointsで微調整する
次は同じVS Codeウィンドウのまま、VS Code拡張版に切り替えます。サイドバーのClaude Codeアイコンをクリックすると、会話パネルが現れます。開いた直後は新規の会話ですが、CLIとVS Code拡張機能版は会話履歴を共有しているので、パネル上部のSession historyからステップ1の会話を選べば、続きとしてそのまま再開できます。
パネル下部の権限モードが自動モードになっていることも確かめておきます（違っていれば切り替えます）。
ここでは、生成されたscript.jsに手を入れていきます。エディタでscript.jsを開き、プレビュー更新を担うrender()のうち、marked.parse()の結果をinnerHTMLに渡しているコード部分を選択。今回はこのまま自動モードで進め、会話パネルに次のように打ち込みます。
選択範囲のプレビュー更新処理を次のように直してください。 1. innerHTML に渡す前に、最低限のサニタイズを通したい - まずは追加ライブラリなしで対応できる方法を優先 - marked 自身のオプションで賄えるか、難しければ代替案も含めて提案してほしい 2. プレビュー更新の関数名（render）はReactのrender()など他のフレームワークとも紛らわしいので、parseMarkdownに変更する
@メンションでファイルを指し示してはいません。script.jsを開いて選択している間は、ファイルパスと選択範囲がそのままClaudeに伝わるからです。行番号を数えて、@script.js#8-10のように指定する必要はなく、マウスでなぞるだけです。別のファイルまで読ませたいときは、そこで初めて@でファイル名やフォルダ名を指定します。
自動モードなので、Claudeは確認を挟まずに書き換えを終え、変更前と変更後を左右（あるいは上下）に並べた差分プレビューをログとして表示します。
もっと細かく1つずつ「採用」「却下」と確認したい際は、この依頼の前に、モード表示からManualへ切り替えておきます。
コードの差分ログの後は、生成したコードの概要を表示し、次のようなサニタイズ方法の比較表を添えることもありました。
| 方法 | 評価 |
|---|---|
| markedのオプション | ×（現行のmarkedは出力HTMLをサニタイズしない。頼れない） |
| 自前の簡易サニタイズ（今回採用） | △（学習用・暫定なら可。追加ライブラリ不要だが簡易版） |
| DOMPurify（推奨アップグレード） | ◎（実運用向け。外部入力を扱うならこちら） |
| Claudeが提示したサニタイズ方針の比較（VS Code拡張機能版） | |
採用されたのは、指示通り、追加ライブラリ不要の簡易サニタイズです。ステップ1の計画に注記しておいたDOMPurifyへの差し替えは、外部入力を扱う場面での検討事項として残っています。
適用された変更を眺めて、気に入らない部分があれば戻せます。もう1つ、VS Code拡張版で扱いやすいのがCheckpointsです。Checkpoints自体はCLIにも備わっているものの、VS Code拡張版ではメッセージにホバーすると現れるrewindボタンから操作でき、巻き戻す地点を目で見て選ぶことができます。
プロンプトを送るたびにコードの状態がスナップショットとして取られ、「やっぱり今の変更はなしにしたい」「2つ前のあの状態に戻したい」という際、該当メッセージから「Rewind code to here（コードをここまで巻き戻す）」を選べばファイルがその時点に戻ります。コミットを打つほどでもない細かなundoとして機能します。ただし、Claudeがシェルコマンドで加えた変更や、サブエージェントによる変更は戻せません。
ステップ3：振り返り――冒頭のマトリクスと照らし合わせる
2つのステップでは、それぞれ理由があって入口を選んでいました。
- ステップ1でCLI版を選んだのは、ターミナルでの操作感を体験してもらいたかったためです。計画レビューの画面はターミナルに収まり、承認時に自律実行を選べば長時間タスクも手間をほとんどかけずに進められます。生成直後にtestやbuildコマンドを実行する流れも、ターミナルの中で完結します。マトリクスでCLIに◎が並ぶ背景には、こうした一連の流れがあります
- ステップ2でVS Code拡張版に切り替えたのは、関数単位の局所的な調整に入ったためです。エディタの選択範囲で対象を絞り、差分プレビューで結果を確かめ、Checkpointsで万一の事故に備える。マトリクスの「行範囲を指定した微修正・補完」をVS Code拡張機能版＝◎とした理由は、ここにあります
2つのステップを通じて、ツールの乗り換え自体にはほとんど手間がかかりませんでした。会話履歴がSession historyからそのまま続けられるので、ステップ2でのClaudeは「ステップ1で何を作ったか」をふまえて応答しています。
CLAUDE.mdやAuto Memoryといった設定も、入り口をまたいで共有されます。それらを書きためていくのは、この先の話です。こちらが使う入口を変えただけで、ピッチに立つ司令塔はいずれも同じClaudeです。戦術の伝え方が、入り口ごとに少し違うだけです。
おわりに
ここまでで、3つの入り口の使い分け方を整理し、CLI版とVS Code拡張版を操作しながらハイブリッド運用を確かめました。入り口をいずれかに絞る必要はありません。CLI版とVS Code拡張機能版のペアを軸に、固有機能が欲しくなったらDesktopを開く。当面の采配は、これで十分です。
次回は、作成したマークダウンプレビューをベースに、仕様駆動開発のフローへと進みます。「AIに何を任せ、人間はどこで判断するか」を実プロジェクトの中で具体化していきます。
筆者紹介
WINGSプロジェクト 高江賢
多様な開発分野の「何でも屋（フルスタックエンジニア）」として働きつつ、WINGSプロジェクトにて、Web記事、書籍の執筆活動をこなしてきたが、2026年夏、勤め人を卒業。フリーランスの技術者兼著述家としてリブート。
WINGSプロジェクト
有限会社WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表：山田祥寛）。主にWeb開発分野の書籍／記事執筆、翻訳、講演等を幅広く手掛ける。2026年7月時点での登録メンバーは約50名で、現在も執筆メンバーを募集中。興味のある方は、どしどし応募頂きたい。著書、記事多数。
・サーバーサイド技術の学び舎 - WINGS（https://wings.web-deli.com/）
・RSS（https://wings.web-deli.com/rss）
・X: @WingsPro_info（https://x.com/WingsPro_info）
・Facebook（https://www.facebook.com/WINGSProject）
Copyright © ITmedia, Inc. All Rights Reserved.