Claude Codeには主に3つの動かし方があります。ターミナルで claude コマンドを打って使うCLI版、Claude公式のデスクトップアプリの中で使うデスクトップアプリ版、VS Codeに拡張機能として入れて使う拡張版です。
このうち、VS Code拡張版は、エディタが持っているファイルツリー・タブ・差分表示をそのまま使えるのが特徴です。複数のファイルにまたがった作業や、出てきた変更をその場で読み比べたい場面に向きます。拡張を入れてサインインすればすぐ動くので、Node.jsもGitも事前に入れる必要はありません。VS Codeへの拡張インストールから、架空のカフェのホームページを1つ作らせるところまでを順番に進めます。
VS Code拡張版Claude Codeとは
VS Code拡張版のClaude Codeは、VS Codeというコードエディタに後付けで入る拡張機能です。インストール後、エディタの右側（または左側）にチャットパネルが出てきて、Claudeへの指示はそのパネルから入力します。
中で動いている本体は、PowerShellで使うCLIと同じです。違うのは、コマンドを打つかわりにチャットパネルから話しかけられること、そしてVS Codeのエクスプローラーや差分表示と統合される点です。Claudeがファイルを書き換えるたびに、見慣れたVS Codeの差分画面で内容を確認してから「承認」できます。
デスクトップアプリ版は1つのページや1ファイルを単発で作らせる用途に向いているのに対し、VS Code拡張は、複数ファイルを横断する作業や、ファイル単位で内容を確認したい場面に向いています。会話を別タブで複数開けるので、別々の作業を並列に進めることもできます。
Claude Codeで実際に何ができるのかはClaude Codeとはにまとめています。
始める前に
用意するのは次の3つです。
- VS Code（バージョン1.98以上）
- Claudeの有料プラン（Pro、Max、Team、Enterpriseのいずれか）
- インターネット接続
VS Codeが入っていない場合は、次の章でそのまま入れていきます。Claude Codeは無料プランでは使えません。料金は変わることがあるので、契約前に公式の料金ページで確認するのが確実です（2026年6月時点）。
VS Code拡張版は、Claude Codeのプログラム本体を拡張に同梱しています。Node.jsやGitを別途インストールする必要はありません。
VS Codeを準備する
VS Codeはマイクロソフトが公開している無料のコードエディタです。すでに入っている方は、この章は読み飛ばして次へ進んでください。
入っていない場合は、VS Code公式のダウンロードページから取得します。
「Windows」の項目から、ご自身の環境に合うインストーラー（ふつうのPCはx64の「User Installer」）をダウンロードします。ダウンロードした VSCodeUserSetup-...-x64.exe をダブルクリックして起動します。
インストール画面では設定項目がいくつか出てきますが、すべてデフォルトのまま「次へ」を押して進めて構いません。最後に「インストール」を押すと、そのまま完了します。
これでVS Codeの準備は完了です。
Claude Code拡張をインストールする
VS Codeを起動し、左サイドバーの「拡張機能」アイコン（四角が並んだようなアイコン）をクリックします。Ctrl+Shift+X のショートカットでも開けます。
検索欄に「Claude Code」と入力すると、複数の拡張が並びます。発行元が「Anthropic」になっているものが公式です。同名・似た名前のサードパーティ拡張も並ぶので、発行元を確認したうえで選び、「インストール」を押します。
「インストール」を押すと、発行元 Anthropic を信頼するかを確認するダイアログが出てきます。これはVS Codeが、初めて入れる発行元について確認する標準的な画面です。発行元の横に「verified」（検証済み）の印が付いていることを確認して、「発行元を信頼してインストールする」を押します。
インストールが終わると、画面右側にClaude Codeのパネルが出てきます。最初はサインインを求められるので、画面の案内に従ってブラウザでClaudeの有料アカウントを承認します。承認が終わるとVS Codeに戻り、パネルに入力欄が現れます。
これで拡張側の準備は終わりです。
練習用フォルダを開く
ここから、Claudeに作業させるフォルダを指定します。本番のリポジトリでいきなり試すと、意図しない場所を書き換えられた場合に元に戻すのが大変です。練習用に空のフォルダを1つ作ってから進めます。
エクスプローラーで C:\Users\あなたのユーザー名 の中に新しいフォルダ（例：claude-practice）を作っておきます。
VS Codeに戻り、メニューから「ファイル → フォルダーを開く」を選んで、いま作った claude-practice を選択します。
フォルダを開くと、左側のエクスプローラーに空のフォルダが表示され、右側にClaude Codeのパネルが並んだ画面になります。モデルはデフォルトのままで問題ありません。
これでClaude Codeが claude-practice フォルダの中だけを見て作業する状態になりました。
実際に動かしてみる
題材として、架空のカフェのホームページを1つ作らせます。
右側のClaude Codeパネルの入力欄に、自然な日本語でこう書いてみます。
架空のカフェのシンプルなホームページを作って。店名はお任せファイルの分け方や置き場所は、こちらから細かく指示しません。Claudeに任せると、内容に応じてHTMLだけの1ファイル構成にしたり、HTML・CSS・JavaScriptに分けたりと、適した形を選んできます。弊社が試したときは、index.html と style.css の2ファイル構成で返ってきました。
Claudeはファイルを作る前に、「Allow write to c:\Users\あなたのユーザー名\claude-practice\index.html?」（このファイルへの書き込みを許可しますか）のような英語の確認ダイアログを出してきます。選択肢は「Yes」「Yes, allow all edits this session（このセッション中の編集をすべて許可）」「No」の3つです。内容を見て問題なければ「Yes」を選び、続けて他のファイルも順に承認していきます。ダイアログの上には、これから書き込まれる差分が表示されているので、目を通してから判断できます。
ファイル構成がClaude側の判断で決まるからこそ、VS Codeのエクスプローラーで全体像を見たり、差分画面で1つずつ内容を確かめられることが効いてきます。「どこに何が書かれているか」を読み取りながら進められるのが、VS Code拡張で使うときの良さです。
ひと通り承認すると、index.html をブラウザで開いて結果が見られます。弊社が試したときに最初に返ってきたのは、Hero・About・Menu・Info で構成されたシンプルなカフェのホームページでした。
ここから、追加の指示を重ねて理想の形に近づけていきます。たとえばこんな具合です。
全体を青系の落ち着いた配色にしてページ上部に「メニューを見る」ボタンを追加して、押したらメニュー欄まで画面がスクロールするようにして
これらの指示を承認すると、最初は無かった「メニューを見る」ボタンがHeroに追加され、押すとメニュー欄まで画面がスクロールします。
1つめは style.css だけを編集すれば済む話、2つめは index.html にボタンを追加したうえで、スクロール挙動を style.css に書き足す話です。スクロールはJavaScriptで実装することもできますが、CSSの設定だけで実現できる場合はそちらを選ぶ、というように実装手段までClaudeが判断します。指示の内容によっては、最初は無かった script.js のような新しいファイルがClaudeの判断で増えることもあります。どのファイルを触り、どのファイルを新しく作るかをClaudeが決め、該当する差分を順に出してくるので、VS Codeのエクスプローラーで全体像を、差分画面で1ファイルずつの変更を確認できます。
最後に、エクスプローラーで生成されたファイルを確認し、index.html をブラウザで開き直します。指示通りのページが表示されていれば完成です。
ここまでで、コードは一行も書いていません。やったのは、作ってほしい内容を言葉で伝え、出てきた差分に承認を出しただけです。
気をつけること
便利に使うために、3つだけ覚えておいてください。
1つめは、最後に確認するのは人だということ。Claude Codeは初期設定（「Ask before edits」モード）では、ファイルを変えたりコマンドを実行したりするときに必ず承認を待ちます。出てきた差分に目を通してから進めれば安心です。慣れてくると、毎回確認しなくてよい「Edit automatically」モードや、変更前に計画だけ立てさせる「Plan」モードへの切り替えもできますが、最初は初期設定のまま使うのが安全です。
2つめは、対象のファイルを @ファイル名 で明示できる点です。「@index.html の見出しを大きくして」のように書くと、Claudeはそのファイルだけを対象に差分を出してきます。複数ファイルがあるプロジェクトで、特定のファイルにだけ修正をかけたい場面で便利です。
3つめは、もっともらしく見えて間違っていることもある、という点です。出てきた結果を信頼しすぎず、自分で確かめる。これはAIを使ううえでの基本になります。
試しているうちは、消えても困らない、大事なデータの入っていないフォルダで動かしてください。
ここから何を試すか
VS Codeへの拡張インストールから、最初の1サイトを作らせるところまで進めました。今日やった「架空カフェのホームページを作る」くらいの小さな題材から始めて、次は手元の業務に近い題材に置き換えていくと、使い勝手のイメージが掴みやすくなります。
Claude CodeにはCLI版やデスクトップアプリ版もあります。1ページもの・単発の作業はデスクトップアプリ、複数ファイルやファイル横断の編集はVS Code拡張、ターミナルでまとめて指示したい場面はCLI、というように使い分けるとそれぞれの良さが活きます。
業務でClaude Codeを使う場合は、触らせる範囲、承認の運用、顧客情報や本番データの扱いを先に決めておきます。弊社はアプリケーションの企画・開発を手がけており、Claude Codeも実務で使っています。AIを開発や業務改善に取り入れたい場合は、試したい作業や困っている工程を整理したうえでお問い合わせください。