WindowsのVS CodeでClaude Codeを使う方法

採用はこちら

Claude Codeは、Anthropicが提供しているAIコーディングエージェントです。
コードについて質問するだけでなく、プロジェクト内のファイルを調査したり、複数ファイルを横断して問題の原因を探したり、必要に応じてコードを修正したりできます。

以前はWindowsでClaude Codeを利用する際にWSLを使う方法が中心でしたが、現在はWindowsネイティブ環境も正式にサポートされています。
そのため、Windows 10やWindows 11でVS Codeを利用している人であれば、以前より簡単にClaude Codeを導入できます。

特に初めてClaude Codeを使う場合は、VS Codeの公式拡張機能を利用する方法がおすすめです。
VS Code上にClaude Codeの画面を表示できるため、ターミナル操作に慣れていない人でも利用しやすくなっています。

この記事では、WindowsのVS CodeでClaude Codeを使う方法を、インストールから基本操作、CLI版との違い、WSL2を利用する方法まで詳しく解説します。

目次

WindowsでClaude Codeを使う方法は主に3種類

Windows環境でClaude Codeを利用する方法は、大きく分けると3種類あります。

VS Code拡張機能を使う方法

もっとも簡単なのが、VS Code用のClaude Code拡張機能を利用する方法です。

VS Code上にClaude Code専用の画面が表示されるため、コードを見ながらClaudeへ質問したり、変更内容を確認したりできます。

初めてClaude Codeを使う人には、この方法がもっともおすすめです。

WindowsネイティブでClaude Code CLIを使う方法

Claude Codeは、WindowsのPowerShellから直接起動することもできます。

Standalone CLIをインストールすると、VS Codeのターミナルなどで、

claude

と入力してClaude Codeを起動できます。

ターミナル操作に慣れている人や、CLI中心で開発したい人に向いている方法です。

WSL2上でClaude Codeを使う方法

WSL2を利用して、Linux環境上でClaude Codeを動かすこともできます。

Dockerを頻繁に利用する場合や、本番サーバーに近いLinux環境で開発したい場合には便利です。

ただし、通常のWeb制作やJavaScript、React、Next.js、WordPressなどの開発であれば、最初からWSL2を導入する必要はありません。

WindowsでClaude Codeを使うための動作環境

Claude Codeは現在、Windowsネイティブ環境を正式にサポートしています。

対応しているWindows

Claude Codeの公式要件では、主に以下のWindows環境が対象です。

  • Windows 10 1809以降
  • Windows 11
  • Windows Server 2019以降

古い情報では「Claude CodeをWindowsで使うにはWSLが必須」と説明されている場合があります。

しかし現在は、Windowsネイティブ環境でもClaude Codeを利用できます。

そのため、単純にVS CodeからClaude Codeを使いたいだけであれば、WSL2をインストールする必要はありません。

VS Codeの必要バージョン

Claude CodeのVS Code拡張機能を利用する場合は、VS Code 1.94.0以上が必要です。

古いVS Codeを利用している場合は、先に最新版へアップデートしておくとよいでしょう。

VS Code拡張機能でClaude Codeを使う方法

WindowsでClaude Codeを始める場合は、まずVS Code拡張機能から試すのがおすすめです。

VS Codeを最新版にする

まずVS Codeを起動します。

メニューから更新を確認し、必要に応じて最新版へアップデートします。

Claude Code拡張機能を利用するにはVS Code 1.94.0以上が必要なので、古いバージョンを使っている場合は注意してください。

Claude Code拡張機能をインストールする

VS Codeを開いた状態で、

Ctrl + Shift + X

を押します。

すると「Extensions」の画面が表示されます。

検索欄に、

Claude Code

と入力します。

Anthropicが提供している公式のClaude Code拡張機能を選択し、「Install」をクリックします。

インストール後にClaude Codeのアイコンや画面が表示されない場合は、VS Codeを再起動するか、

Ctrl + Shift + P

を押してコマンドパレットを開き、

Developer: Reload Window

を実行すると改善することがあります。

Claudeアカウントでログインする

Claude Code拡張機能を開くと、初回利用時にログインを求められます。

「Sign in」を選択するとブラウザが開くので、Claudeのアカウントで認証します。

Claude Codeでは、対象となるClaudeの有料プランやClaude Consoleアカウントを利用できます。

通常のClaude有料プランで利用する場合は、基本的に自分でAnthropic APIキーを発行する必要はありません。

Claudeアカウントへログインして利用できます。

ただし、Windowsの環境変数などに ANTHROPIC_API_KEY を設定している場合は、API認証が優先されるケースがあるため注意が必要です。

プロジェクトフォルダをVS Codeで開く

Claude Codeを使う際は、単一ファイルだけを開くのではなく、プロジェクトフォルダ全体をVS Codeで開くのがおすすめです。

たとえば、

C:\Users\ユーザー名\Documents\my-site

というWebサイトのフォルダがある場合は、VS Codeの、

File
↓
Open Folder

から my-site フォルダを開きます。

プロジェクトフォルダとして開くことで、Claude Codeが複数のファイルを横断して構成を調査しやすくなります。

たとえば、以下のようなプロジェクトがあったとします。

my-site
├─ src
│  ├─ components
│  ├─ pages
│  └─ styles
├─ public
├─ package.json
└─ README.md

この状態でClaude Codeに、

このプロジェクトの構成を確認してください。
使用しているフレームワークと主要ファイルについて説明してください。

と質問できます。

参考サイト

WindowsでVS CodeからClaude Code拡張を使う手順メモ

VS CodeでClaude Codeを開く方法

Claude Code拡張機能をインストールすると、VS Code上からClaude Codeを呼び出せるようになります。

Claude Codeのアイコンから開く

VS Codeでは、Claude Codeを示すアイコンからClaude Code画面を開けます。

ファイルを開いている場合は、エディタ右上に表示されるClaude Code用のアイコンから起動できます。

Activity BarからClaude Codeを開く方法もあります。

コマンドパレットから開く

キーボードで、

Ctrl + Shift + P

を押してコマンドパレットを開きます。

そこで、

Claude Code

と検索すると、Claude Code関連のコマンドを確認できます。

Claude Codeに最初に質問してみる

Claude Codeを起動したら、まずは簡単な質問から試してみるとよいでしょう。

たとえば、

このプロジェクトの構成を説明してください。

と入力します。

するとClaude Codeがプロジェクト内を確認し、どのようなファイルやディレクトリが存在するのかを説明してくれます。

さらに、

このプロジェクトで使われているフレームワークを調べてください。

や、

コードに問題がないか確認してください。
まだファイルは変更しないでください。

といった使い方もできます。

Claude Codeの特徴は、単に質問に答えるだけではありません。

プロジェクト内のファイルを探し、関連するコードを読み、問題の原因を調査し、必要に応じて修正まで行える点にあります。

ファイルを指定してClaude Codeに質問する方法

Claude Codeでは、特定のファイルやフォルダを指定して質問できます。

@を使ってファイルを指定する

たとえば、

@src/components/Header.tsx

のように入力すると、特定のファイルを参照させることができます。

実際には、

@src/components/Header.tsx を確認して、
スマートフォンでメニューが開かない原因を調べてください。

のように利用できます。

ファイル名を完全に覚えていなくても、候補から探せるため便利です。

フォルダを指定する

ファイルだけでなく、フォルダを指定することもできます。

たとえば、

@src/components/

のように指定します。

特定のディレクトリ内の構成やコンポーネントをまとめて確認したい場合に便利です。

選択したコードをClaude Codeに渡す方法

VS Codeで特定のコードを選択して、その部分についてClaude Codeへ質問することもできます。

Alt+Kを利用する

WindowsやLinuxでは、コードを選択した状態で、

Alt + K

を押します。

すると、

@app.ts#5-20

のように、ファイル名と行番号を含んだ参照をClaude Codeへ挿入できます。

その状態で、

この処理をもっと分かりやすく書き換えてください。

と質問できます。

なお、現在のClaude Codeは選択中のコードを認識できるため、必ずしも Alt + K を使う必要はありません。

Alt + K は、選択範囲を明示的な参照としてプロンプトに追加したい場合に便利です。

Claude CodeのPermission Modeとは

Claude Codeを安全に利用するうえで重要なのが、Permission Modeです。

Claude Codeはファイルを編集したり、ターミナルコマンドを実行したりできるため、最初は権限設定を理解しておくことをおすすめします。

Manual

Manualでは、ファイル編集や多くのShellコマンドを実行する前に確認が入ります。

Claude Codeが提案した変更を確認してから許可できるため、初心者に向いています。

最初はManualを利用すると、意図しない変更を防ぎやすくなります。

Plan

Planでは、Claude Codeがすぐにコードを書き換えるのではなく、最初に作業計画を作成します。

たとえば、

1. 問題が発生しているファイルを調査
2. 原因を特定
3. 修正方針を作成
4. 必要なファイルを修正
5. 動作確認

といった計画を確認できます。

大規模な修正や複数ファイルにまたがる作業では特に便利です。

Auto

Autoでは、Claude Codeが操作内容を判断しながら必要な処理を進めます。

ただし、Autoだからといってすべての操作を無条件に実行するわけではありません。

一定の判断や確認を行いながら処理されます。

Edit automatically

Edit automaticallyでは、ファイル編集についてClaude Codeが確認なしで進められるようになります。

作業速度は上がりますが、初めてClaude Codeを使う場合はManualやPlanから始めるほうが安心です。

Claude Code CLIをWindowsにインストールする方法

VS Code拡張機能だけを利用するのであれば、Standalone CLIを別途インストールする必要はありません。

ただし、VS CodeのターミナルやPowerShellから、

claude

と入力してClaude Codeを起動したい場合は、Claude Code CLIをインストールします。

PowerShellからインストールする

WindowsではPowerShellを開き、以下のコマンドを実行します。

irm https://claude.ai/install.ps1 | iex

現在はNative Installが推奨されています。

以前はnpmによるインストール方法が広く利用されていましたが、Claude Codeを使うためだけにNode.jsを導入する必要はありません。

Wingetでインストールする

WindowsではWingetを利用する方法もあります。

winget install Anthropic.ClaudeCode

インストール後に更新する場合は、

winget upgrade Anthropic.ClaudeCode

を利用できます。

Winget版は、デフォルトでは自動アップデートされないため注意してください。

npmからインストールする

npm版を利用することもできます。

npm install -g @anthropic-ai/claude-code

ただし、現在のClaude Code npm版では新しいNode.jsが必要になる場合があります。

Claude Codeを導入するだけであれば、Native Installのほうがシンプルです。

Claude Code CLIがインストールできたか確認する

インストール後は、PowerShellまたはVS Codeのターミナルで、

claude --version

を実行します。

バージョン番号が表示されれば、インストールは完了しています。

問題が発生している場合は、

claude doctor

を実行します。

Claude Codeのインストール状態や設定上の問題を確認できます。

VS CodeのターミナルからClaude Codeを起動する

VS Codeでプロジェクトフォルダを開きます。

次に、

Ctrl + `

を押してターミナルを開きます。

そこで、

claude

を実行します。

Standalone CLIが正しくインストールされていれば、Claude Codeが起動します。

構成としては、

VS Code
├─ Editor
├─ Explorer
└─ Terminal
   └─ Claude Code

という状態になります。

VS Code拡張機能版とCLI版の違い

Claude Codeには、VS Code拡張機能版とCLI版があります。

VS Code拡張機能版が向いている人

VS Code拡張機能版では、コードとClaude Codeの画面を同時に確認できます。

変更内容の差分もGUIで確認しやすいため、初心者には特におすすめです。

以下のような人に向いています。

  • Claude Codeを初めて使う人
  • VS Code中心で開発している人
  • コード変更を視覚的に確認したい人
  • ターミナル操作が苦手な人

CLI版が向いている人

CLI版はターミナル中心でClaude Codeを利用します。

キーボード操作だけで素早く作業できるため、慣れると効率よく利用できます。

以下のような人に向いています。

  • ターミナル操作に慣れている人
  • GitやCLIツールを多用する人
  • Linux環境を利用する人
  • 自動化やスクリプトと組み合わせたい人

Claude Codeをターミナル形式で表示する方法

VS Code拡張機能を利用しながら、Claude Codeをターミナル形式で表示することもできます。

VS CodeのSettingsからClaude Codeの設定を開き、

Use Terminal

を有効にします。

GUI形式よりもCLI形式の操作に慣れている場合に便利です。

Git for Windowsは必要なのか

Claude CodeをWindowsで使うために、Git for Windowsは必須ではありません。

ただし、Web開発を行うのであればGit自体を利用することが多いため、インストールしておくことをおすすめします。

Git for Windowsを入れていない場合

Git for Windowsをインストールしていない場合でも、Claude CodeはPowerShellを利用できます。

そのため、

Gitがない
↓
Claude Codeが使えない

というわけではありません。

Git for Windowsを入れている場合

Git for Windowsをインストールすると、Claude CodeでGit Bashを利用できるようになります。

ただし、Git Bashを利用できるようになってもPowerShellが使えなくなるわけではありません。

PowerShellとGit Bashの両方を状況に応じて利用できます。

Git Bashを認識しない場合

Claude CodeがGit Bashを自動的に認識できない場合は、設定でパスを指定できます。

{
  "env": {
    "CLAUDE_CODE_GIT_BASH_PATH": "C:\\Program Files\\Git\\bin\\bash.exe"
  }
}

Git for Windowsのインストール先を変更している場合は、実際のパスに合わせて設定してください。

WSL2でClaude Codeを使う方法

Windowsネイティブ環境ではなく、WSL2上でClaude Codeを利用することもできます。

WSL2が向いているケース

以下のような場合はWSL2を利用するメリットがあります。

  • Linuxサーバーに近い環境で開発したい
  • Dockerを頻繁に利用する
  • Linuxコマンドを中心に開発したい
  • Claude CodeのSandboxingを利用したい

WindowsネイティブやWSL1ではSandboxingに対応していません。

Sandboxingを利用したい場合はWSL2が必要です。

WSL2をインストールする

管理者権限のPowerShellを開き、

wsl --install

を実行します。

環境によってはWindowsの再起動が必要です。

インストール完了後、

wsl

を実行するとLinux環境へ入れます。

WSL内にClaude Codeをインストールする

WSL2でClaude Codeを利用する場合は、Windows側ではなくWSL側へClaude Codeをインストールします。

WSLのターミナルで、

curl -fsSL https://claude.ai/install.sh | bash

を実行します。

その後、

claude

を実行します。

VS CodeからWSL環境を開く

VS CodeのWSL機能を利用すると、Windows上のVS CodeからWSL内のプロジェクトを編集できます。

たとえばWSL側で、

cd ~/projects/my-site

へ移動したあと、

code .

を実行します。

構成は、

Windows
↓
VS Code
↓
WSL2
↓
Claude Code

となります。

WindowsネイティブとWSL2はどちらがおすすめか

どちらが適しているかは開発内容によって異なります。

Windowsネイティブがおすすめな人

HTML、CSS、JavaScript、TypeScript、React、Next.js、WordPressなどを中心に利用するのであれば、まずWindowsネイティブから始めて問題ありません。

特にClaude Codeを初めて試す場合は、

Windows
↓
VS Code
↓
Claude Code拡張機能

という構成がもっとも簡単です。

WSL2がおすすめな人

Linux環境を前提とした開発をしている場合や、Dockerを多用する場合はWSL2が向いています。

また、Claude CodeのSandboxingを利用したい場合もWSL2が必要です。

Claude Codeを使うときはGitを併用する

Claude Codeはファイルを自動的に変更できるため、Gitと組み合わせて使うのがおすすめです。

変更前にコミットしておく

Claude Codeへ大きな修正を依頼する前に、

git status

で現在の状態を確認します。

問題がなければ、

git add .
git commit -m "before claude changes"

のようにコミットしておきます。

こうしておけば、Claude Codeの変更に問題があった場合でも元の状態へ戻しやすくなります。

最初はPlanやManualを使う

初めて利用するときは、いきなり自動編集を許可するよりも、

原因を調査してください。
まだファイルは変更しないでください。

と指示するのがおすすめです。

次に、

修正方法を提案してください。

と依頼します。

内容を確認して問題なければ、

その方法で修正してください。

と進めます。

この方法なら、Claude Codeが何を変更しようとしているのか確認しながら作業できます。

Claude CodeでWebサイトを調査する使い方

Claude Codeはプログラミングだけでなく、Webサイトの構造確認にも利用できます。

WordPressサイトを調査する

WordPressテーマをVS Codeで開き、

このWordPressテーマの構成を確認してください。
CSSとJavaScriptがどのように管理されているか説明してください。

と質問できます。

テーマファイルの構成を理解するときにも便利です。

ReactやNext.jsを調査する

ReactやNext.jsのプロジェクトなら、

このプロジェクトのコンポーネント構成を調査してください。
似た処理をしているコンポーネントがないか確認してください。

と依頼できます。

コードの重複や構成上の問題を見つける用途にも向いています。

SEO実装を調査する

Claude CodeはWebサイトのSEO実装確認にも利用できます。

たとえば、

このプロジェクトのSEO実装を確認してください。

・title
・meta description
・canonical
・OGP
・構造化データ
・robots
・sitemap
・見出し構造

について確認してください。

まだファイルは変更しないでください。

と指示できます。

サイト制作やWebマーケティングに関わる人にとっても便利な使い方です。

Claude Codeを初めて使うときにおすすめの指示

セットアップが完了したら、いきなりClaude Codeへコードを書かせるのではなく、最初にプロジェクトを理解させるのがおすすめです。

たとえば、

このプロジェクト全体を確認してください。

まだファイルは変更しないでください。

以下について説明してください。

・使用しているフレームワーク
・ディレクトリ構成
・主要ファイル
・アプリケーションの仕組み
・改善できそうな点

と入力します。

Claude Codeがプロジェクトを確認したあと、

問題点を優先度順に整理してください。

と依頼します。

さらに、

優先度が高い問題について修正方法を提案してください。

と進めれば、内容を確認しながら安全に作業できます。

Claude Codeでよくあるトラブル

Claude Codeをインストールしたあと、うまく動作しないことがあります。

claudeコマンドが認識されない

PowerShellで、

claude : 用語 'claude' は認識されません

などと表示される場合は、まず、

claude --version

を確認します。

インストール直後の場合はPATHがまだ反映されていないこともあるため、PowerShellやVS Codeを一度終了して開き直します。

Standalone CLIをまだインストールしていない場合は、

irm https://claude.ai/install.ps1 | iex

を実行します。

VS Code版は動くのにclaudeコマンドが動かない

これは必ずしも異常ではありません。

VS Code拡張機能には、拡張機能内部で利用するClaude Code CLIが含まれています。

そのため、

VS CodeのClaude Code
→ 利用できる

PowerShellのclaudeコマンド
→ 利用できない

という状態になることがあります。

VS Codeのターミナルから claude を実行したい場合は、Standalone CLIを別途インストールしてください。

WindowsでClaude Codeを使うおすすめ構成

初めてClaude Codeを利用する場合は、必要なツールを最初からすべてインストールする必要はありません。

まずは、

Windows 11
↓
VS Code
↓
Claude Code公式拡張機能

というシンプルな構成がおすすめです。

必要になった段階で、

Git for Windows
Claude Code CLI
Node.js
WSL2
Docker

などを追加していけば十分です。

特に、VS Code拡張機能だけでClaude Codeを使う場合は、Node.jsやnpm、WSL2、Standalone CLIは必須ではありません。

WindowsのVS CodeでClaude Codeを使う手順まとめ

WindowsでClaude Codeを試すだけなら、手順は非常にシンプルです。

  1. VS Code 1.94.0以上を用意する。
  2. Ctrl + Shift + X で拡張機能画面を開く。
  3. 「Claude Code」を検索する。
  4. Anthropic公式のClaude Code拡張機能をインストールする。
  5. Claudeアカウントでログインする。
  6. VS Codeでプロジェクトフォルダを開く。
  7. Claude Codeを起動する。
  8. 「このプロジェクトの構成を説明してください」と質問する。

基本的にはこれだけでClaude Codeを使い始められます。

ターミナルからClaude Codeを利用したくなった場合は、その段階でStandalone CLIを追加すれば問題ありません。

Windows版Claude Codeは以前より導入しやすくなっているため、これから始める人はまずVS Code拡張機能から試し、必要に応じてCLIやWSL2へ利用範囲を広げていく方法がおすすめです。

以上、WindowsのVS CodeでClaude Codeを使う方法についてでした。

最後までお読みいただき、ありがとうございました。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次