🤖 Claude Code を VS Code で使う方法

〜初心者がやってみたWindows環境でのセットアップガイド〜

📌 はじめに

Anthropicが開発したAIコーディングアシスタント「Claude Code」を、Visual Studio Code（VS Code）上で使えるようにセットアップする方法を紹介します。

本記事では以下のような方を対象に、最初から順番に進められるよう手順をまとめています。

✅ Anthropicアカウントをまだお持ちでない方
✅ Node.jsが未インストールの方
✅ Windows環境で使いたい方

💡 Claude Code とは？

Claude CodeはAnthropicが提供するAIエージェントです。単なるコード補完ツールではなく、ターミナル上で動作し、ファイルの読み書き・編集・コマンド実行まで自律的に行える「エージェント型」のAIアシスタントです。

VS Code拡張機能を使うことで以下のことが可能になります。

機能	説明
💬 サイドパネルチャット	ターミナルを切り替えずにVS Code内から指示を出せる
📝 差分表示（diff）	コード変更をGUIで確認・承認できる
📎 @ファイル指定	特定のファイルや行をコンテキストとして指定できる
🔀 複数会話	別タブで複数の会話を同時に開ける

⚙️ 事前に確認すること

必要な環境

項目	要件
OS	Windows
Node.js	v18以上（インストール方法は後述）
VS Code	v1.85以上
Anthropicアカウント	（作成方法は後述）

Windowsユーザーへの注意
PowerShellのスクリプト実行ポリシーがデフォルトで制限されており、そのままではnpmコマンドが使えないことがあります。本記事の手順内で解決方法を説明します。

🗺️ セットアップの全体の流れ

以下の 6ステップ で進めます。

① Anthropicアカウント作成
        ↓
② Node.jsのインストール
        ↓
③ PowerShell実行ポリシーの変更（Windows特有）
        ↓
④ Claude Code CLIのインストール
        ↓
⑤ VS Code拡張機能のインストール
        ↓
⑥ 初回起動・ログイン認証

STEP① 🔑 Anthropicアカウントの作成

まず、Claude Codeを使用するためのAnthropicアカウントを作成します。

1. ブラウザで以下のURLを開く

https://console.anthropic.com/login

2. サインアップ方法を選択する

🟦 「Continue with Google」（Googleアカウント連携・おすすめ）
📧 メールアドレスで登録

3. 画面の指示に従って登録を完了する

Googleアカウントをお持ちの場合は「Continue with Google」が最も簡単で素早く登録できます。

STEP② 📦 Node.jsのインストール

まずインストール済みか確認する

PowerShellを開いて以下のコマンドを実行してください。

node --version

結果の見方：

表示内容	対応
`v18.x.x` 以上が表示された	✅ インストール済み → STEP③へ
エラーが表示された	❌ 未インストール → 以下の手順でインストール

インストールされていない場合

1. ブラウザで以下のURLを開く

https://nodejs.org/en/download

2. 「Windows Installer (.msi)」ボタンをクリックしてダウンロード

3. ダウンロードしたファイルをダブルクリックして実行

4. インストールウィザードに従って「Next」を押し続けて完了

インストール後の確認

PowerShellを一度閉じて、新しく開き直してから確認してください。
既存のウィンドウは古い環境変数を参照しているため、インストールが認識されません。

node --version
# 例: v24.14.0 と表示されればOK

STEP③ 🔧 PowerShell実行ポリシーの変更

Windowsでは、デフォルトでPowerShellのスクリプト実行が制限されており、そのままでは npm コマンドが以下のようなエラーになります。

npm : このシステムではスクリプトの実行が無効になっているため...

以下の手順で解除します。

1. PowerShellを「管理者として実行」で開く

Windowsキー → powershell と入力 → 右クリック → 「管理者として実行」

2. 以下のコマンドを実行する

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

3. Y を入力してEnterで確定

4. 以下のコマンドで確認

npm --version
# 例: 11.9.0 と表示されればOK

-Scope CurrentUser を指定することで、現在のユーザーのみに変更が適用されます。システム全体の設定には影響しません。

STEP④ 💻 Claude Code CLIのインストール

PowerShell（管理者）で以下のコマンドを実行します。

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

以下のような表示が出ればインストール成功です🎉

added 2 packages in 5s

npmの新しいバージョンが利用可能という通知（npm notice New minor version of npm available!）が出ることがありますが、無視してもClaude Codeの動作には影響ありません。

STEP⑤ 🧩 VS Code拡張機能のインストール

VS Codeを開き、以下の手順で拡張機能をインストールします。

1. Ctrl+Shift+X を押して拡張機能パネルを開く

2. 検索欄に Claude Code と入力

3. 以下の拡張機能を選択して「インストール」をクリック

項目	確認内容
拡張機能名	Claude Code for VS Code
発行元	Anthropic ✅
識別子	`anthropic.claude-code`

マーケットプレイスには同名の非公式拡張機能も存在します。
必ず発行元が「Anthropic」であることを確認してからインストールしてください。

STEP⑥ 🚀 初回起動・ログイン認証

VS Codeのターミナルを開いてClaude Codeを起動します。

1. VS Codeで Ctrl+` を押して統合ターミナルを開く

2. 以下のコマンドを実行

claude

3. ブラウザが自動的に開くので、AnthropicアカウントでOAuth認証を行う

4. 認証完了後、ターミナルに以下のような画面が表示される

╭─────────────────────────────────────╮
│  Claude Code v2.x.x                 │
│  Welcome back ○○！                  │
│  Sonnet 4.6 · Claude Pro            │
╰─────────────────────────────────────╯

右側のサイドパネルにClaude Codeのチャット画面が表示されれば、セットアップ完了です！🎉

✅ 動作確認

セットアップ完了後は以下のような操作が可能です。

基本的な使い方

# ファイルを開いた状態でClaude Codeに話しかける
> このコードのバグを見つけて修正して

# プロジェクト用の設定ファイルを自動生成
> /init

# 特定のファイルをコンテキストとして指定
> @src/index.ts このファイルを最適化して

便利なキーボードショートカット

ショートカット	動作
`Ctrl+Shift+P` → `Claude Code`	コマンドパレットからClaude Codeを操作
`Alt+K`	選択中のコードを@メンションとして挿入

📋 まとめ

本記事では、WindowsにClaude CodeをVS Codeで使えるようにセットアップする手順を紹介しました。

セットアップ完了チェックリスト

Anthropicアカウント作成完了
Node.js v18以上インストール済み
PowerShell実行ポリシー変更済み
Claude Code CLI（npm install -g）インストール済み
VS Code拡張機能（発行元：Anthropic）インストール済み
claude コマンドで起動・ログイン認証完了

ハマりやすいポイントまとめ

ポイント	対処法
`node` コマンドが認識されない	PowerShellを閉じて新しく開き直す
`npm` がセキュリティエラーになる	`Set-ExecutionPolicy` で実行ポリシーを変更する
拡張機能が見つからない/偽物	発行元が「Anthropic」であることを確認

ぜひClaude Codeを活用して、日々の開発作業をより効率的に進めてみてください！🚀