VS CodeでClaude Codeを使う方法｜最初の修正から差分の確認まで

公式拡張を入れて、作業するフォルダーを開く

VS Codeの拡張機能でClaude Codeを検索し、Anthropicの公式拡張であることを確認してインストールします。初回はパネルからSign inを選び、ブラウザで自分のアカウントを確認して認証します。組織の契約を使う場合は、その組織の利用方法に従います。

拡張のチャット用にはCLIが同梱されます。一方、端末でclaudeというコマンドを打ちたい場合は、単独のCLIも必要です。「パネルでは使えるのに、端末ではコマンドがない」は、この違いかもしれません。最初はどちらか一方で進めると混乱しにくくなります。

• 出典：Claude Code公式のVS Code操作（新しいタブ）
• 出典：Claude Codeの権限モード（新しいタブ）

アイコンが見えなければ、ファイルを一つ開く

エディター右上のClaudeのアイコンは、ファイルを開いているときに表示されます。左のアクティビティバーや、コマンドパレットでClaude Codeを検索して開く方法もあります。インストール直後に出ない場合は、公式案内のウィンドウ再読み込みを試します。

作業フォルダーには練習用のindex.htmlを一つ置きます。「このファイルが何を表示するか説明してください。まだ変更しないでください」と依頼し、違うファイルを説明していないか確かめます。既存の仕事用フォルダーで試すなら、先に未保存の変更を把握してください。

見出し一つだけを直して、差分を読む

架空のページに<h1>おしらせ</h1>という見出しがあるとします。これを<h1>新着のお知らせ</h1>へ変えるなら、変わるべきなのは文字の部分です。色、リンク先、ほかの文章まで変える必要はありません。

入力欄の権限モードを確認し、最初はPlanで計画を見るか、Manualで編集ごとに確認します。@で対象ファイルを指定し、変更したい場所と残したい部分を伝えます。自動編集のモードでは、毎回同じ確認が出るとは限りません。

完了の返事より、保存されたファイルを見る

VS Codeの差分表示で、追加・削除された行を確認します。狙った行だけが変わっているかを見たら、保存したHTMLをブラウザで開き、見出しが表示されることも確かめます。コードの見た目と、読者が見るページの両方を見る練習です。

不要な変更が混ざった場合は、その箇所だけを具体的に戻してもらいます。もともと自分が変更していた行もあるなら、ファイル全体の取り消しを急がないでください。差分を分けて見て、今回の修正と以前の作業を区別します。

Windowsでは、どの環境を開いているかも確認

Windowsのフォルダーを開いたVS Codeと、WSLへ接続したVS Codeでは、ターミナルやファイルの場所が異なることがあります。画面左下の接続表示、エクスプローラーの場所、ターミナルの現在位置を確認します。

まず、拡張の会話から見えているindex.htmlと、自分が開いているindex.htmlが同じものかを確かめます。環境が違うまま設定ファイルをコピーしたり、ログイン情報を移したりして解決しようとせず、公式のインストール経路とエラー内容を確認してください。

• 出典：VS Codeのソース管理（新しいタブ）

小さな修正ができたら、テストのある課題へ進む

次はボタンのリンク先や、入力のチェックなど、結果を自分で確かめられる課題を選びます。「動くように」だけでなく、「空欄なら送信せず案内を出す」のように成功条件を決めると、依頼とレビューがつながります。

継続してアプリを作りたい人には、Claudeを使う開発の書籍も候補です。下の本は環境構築や実装を学びたい人向けとして、目次と前提知識を確認してください。拡張の最新画面やボタン名は、書籍の版と違うことがあるため、この記事末尾の公式資料も併用します。