🤖

【Windows/WSL】話題のAI社員「Claude Code」をVS Codeに召喚する！料金・セットアップガイド

に公開
AI
VS Code
WSL
Remote Development
Claude Code
tech

🚀 はじめに

「AIにコードを書いてもらう」から、「AIがコードを書く」時代へ。

最近、エンジニア界隈で 「Claude Code（クロード・コード）」 という言葉を耳にしませんか？

「また新しいツールが出たのか...」
「便利そうだけど、環境構築が面倒くさそう」
「お金はかかるの？ Proプランに入らないとダメ？」

そんな疑問を持って、そっとブラウザを閉じてしまった経験、ありますよね。
私自身も実際にそうで興味はありましたが、先日社内の勉強会で 「Claude Code（クロード・コード）」 のすごさを知りこれは触らなければと思い構築をした体験記です。

この記事では、Windows (WSL) + VS Code という多くのエンジニアが愛用する環境で、話題の「Claude Code」を導入する手順を、エディタの準備から既存環境との共存方法まで、初心者の方にも分かりやすく解説します。

私自身もとても簡単に環境構築することができましたのでぜひ参考にしてください！

🤖 Claude Code（Claude CLI）とは？

一言で言うと、「ターミナルの中で動く、自律的なAIエージェント」 です。

今まで、ChatGPTやClaudeのWeb画面にコードをコピペして、修正案をもらって、またエディタに貼り付けて...という作業をしていましたよね？

Claude Codeは違います。
あなたがターミナルで「このバグ直して」と頼むだけで、Claudeがプロジェクト内のファイルを読み込み、原因を特定し、ファイルを直接編集してくれます。

まさに、「隣に座っている優秀なペアプログラマー」 が、あなたのPCの中にやってくるイメージです。

💰 ステップ0：料金体系と利用条件

まずはお金の話です。Claude Codeを利用するには、「Claude Pro（月額サブスク）」 または 「API従量課金」 のいずれかが必要です。
無料プラン（Free Tier）のアカウントでは利用できません。

1. Claude Pro プラン（推奨）

Web版の「Claude.ai」で利用する月額$20のサブスクリプションです。

  • 料金: 月額 $20（約3,000円）
  • 特徴: Web版のチャットと、ターミナルでのClaude Codeの両方が利用できます。
  • メリット: 毎月の支払いが固定なので安心です。
  • デメリット: メッセージ上限（レートリミット）があります。Claude Codeは裏側で何度も思考するため、Web版よりも早く上限に達することがあります。
  • こんな人におすすめ: 個人開発者、まずは試してみたい人。

2. API 従量課金（Anthropic Console）

開発者向けのコンソールでクレジットを購入（プリペイド）して使う方法です。

  • 料金: 使ったトークン量に応じた従量制（$5〜チャージ可能）
  • 特徴: サブスク未加入でも、APIキーさえあれば利用可能です。
  • メリット: 1日の使用上限を自分で設定できるため、「数時間待ち」が発生しません。
  • デメリット: 「コンテキスト（記憶）」が増えると料金が跳ね上がります。 複雑な指示をすると、たった1回のやり取りで数百円かかることもあります。
  • こんな人におすすめ: 企業での利用、ヘビーユーザー。

🛠️ ステップ1：VS Code と WSL の連携準備

Claude CodeはLinux環境での動作が基本です。Windowsユーザーは WSL (Windows Subsystem for Linux) を使い、VS Codeからそこへ接続する形をとります。

そのために必要なのが、VS Codeの 「Remote Development（WSL）」 拡張機能です。

1. 拡張機能のインストール

VS Codeを開き、左側のブロックのようなアイコン（拡張機能）をクリックします。
検索窓に「WSL」と入力し、Microsoft製の 「WSL」 という拡張機能をインストールしてください。

※「Remote Development」というパックをインストールしてもOKです（WSL拡張機能が含まれています）。

2. VS Code から WSL に接続する

インストールが完了したら、以下の手順で接続します。一番確実な「コマンドパレット」を使う方法を紹介します。

  1. キーボードの F1 キー（または Ctrl + Shift + P）を押します。
  2. 入力欄に WSL と入力します。
  3. 候補に出てくる 「WSL: Connect to WSL（WSLへの接続）」 を選択します。

新しいウィンドウが開き、左下が「WSL: Ubuntu」のようになれば接続成功です！
これで、VS CodeがWindowsではなく、Linux（WSL）の世界と繋がりました。

📦 ステップ2：Node.js のインストール

WSL環境には、初期状態ではNode.jsが入っていないか、バージョンが古いことが多いです。
Claude Codeには Node.js v18以上 が必要です。

WSL接続後のターミナル（Ctrl + J で開けます）でバージョンを確認します。

node -v

実際の画面

もし Command 'node' not found と出たり、バージョンが古い場合は、バージョン管理ツール nvm を使ってインストールするのが一番安全です。

# 1. nvm (Node Version Manager) をインストール
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

# 2. 設定を反映させるために、一度ターミナルを閉じて開き直すか、以下を実行
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

# 3. 最新のLTS版Node.jsをインストール
nvm install --lts

これで準備完了です。

🚀 ステップ3：Claude Code のインストールと認証

準備が整ったWSLターミナルで、いよいよインストールします。

1. インストール

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

実際の画面

数秒で完了します。念のため確認しましょう。

claude --version
# => 2.0.x などと表示されればOK

実際の画面

2. 認証（ログイン）

Claudeに「私が主人です」と教えます。

claude login
  1. Enterキーを押すとブラウザが起動し、Anthropicの認証画面が開きます。
  2. Claude Proユーザーの方：普段のアカウントでログインし「Allow」を押します。
  3. API利用の方：「Anthropic Console」のアカウントでログインします。
  4. 表示された認証コードをコピーして、ターミナルに貼り付けます。

これで、セットアップはすべて完了です！🎉

実際の画面（セットアップ完了後）

🏃‍♂️ 実践：Claude Codeを使ってみよう

セットアップお疲れ様でした！
ここからは、実際にVS Code上でClaude Codeを使ってみましょう。

1. 起動する

VS Codeのターミナルで、シンプルにこう打ってください。

claude

すると、ターミナルが対話モードに切り替わり、Claudeが挨拶してくれます。
もう、ここは普通のターミナルではありません。Claudeとの対話空間です。

実際の画面

2. 会話してみる

まずは簡単な挨拶から。

ユーザー: こんにちは！自己紹介してください。

Claudeは流暢な日本語で返してくれます。

実際の画面

3. ファイルを作ってもらう（ここが凄い！）

ここからが本番です。
例えば、簡単なPythonのスクリプトを作ってもらいましょう。

ユーザー: 「現在の時刻を表示する Pythonスクリプトを作成して」

Claudeは以下のようなアクションを提案してきます。

  1. Thinking: （どうすればいいか考え中...）
  2. Tool Use: create_file などのツールを使おうとします。

実際の画面

ここで、「実行してもいいですか？」と聞かれるので、Enterキーを押して承認します。
実際の画面

すると...
左側のファイルエクスプローラーを見てください。
勝手に新しいファイルが作成されていますよね！？

これがClaude Codeの真骨頂です。
チャット画面からコピペする必要は、もうありません。

実際の画面

💡 知っておくと便利なコマンド

普段の開発で使うための、ちょっとしたコツを紹介します。

/compact - お財布とメモリを守る

長く会話していると、コンテキスト（記憶）が増え、動作が重くなったり、APIコスト（Proの場合は使用枠）を消費しやすくなります。
/compact と打つと、これまでの会話を要約して記憶を軽量化してくれます。タスクが一つ終わるたびに実行するのがコツです。

実際の画面

/cost - 利用状況の確認

（API利用の場合）現在どれくらいのコストがかかっているかを確認できます。

Ctrl + C - 終了する

Claudeとの対話を終えて、通常のターミナルに戻るときは Ctrl + C を2回押します。

🔌 Tips：既存の環境（Zennなど）と共存させる

「以前の記事を参考に、すでにWindows側でZennの執筆環境を作ってあるんだけど...」
「新しい設定をしたら、今までの環境が壊れない？」

そんな心配をしている方もご安心ください。
以下の手順を使えば、Windowsにあるフォルダ構成をそのままに、操作環境だけをAIが使えるWSLモードに切り替える ことができます。

1. 既存のフォルダを「WSLモード」で開き直す

今までWindowsで作っていたZennの記事フォルダを、AIが使えるWSL側で開く方法です。
この手順が最も確実で簡単です。

  1. Windowsモードで、いつものZennプロジェクトを開きます。
  2. キーボードの F1 キー（または Ctrl + Shift + P）を押します。
  3. 入力欄に WSL と入力します。
  4. 候補から 「WSL: Reopen Folder in WSL（フォルダをWSLで再度開く）」 を選択します。

これだけで、VS Codeが再読み込みされ、**「ファイルの実体はそのままに、操作環境だけWSL（Linux）になった状態」**になります。これで claude コマンドが使えるようになります！

2. 拡張機能のインストール（忘れがち！）

WSLモードに切り替えると、普段使っている拡張機能（Zenn EditorやPrettierなど）がグレーアウトしていることがあります。
拡張機能パネルを開き、「Install in WSL: Ubuntu」 という青いボタンが表示されているものは、クリックしてWSL側にもインストールしてください。

3. node_modules の再インストール（超重要）

Windows側で npm install して作られた node_modules フォルダは、Linux（WSL）側では動かないことがあります（OS間でバイナリの互換性がないため）。

WSLで初めてプロジェクトを開いたときは、エラーを防ぐために一度 node_modules を作り直すことを強くおすすめします。

# WSLのターミナルで実行
rm -rf node_modules
npm install

これで、既存のZenn環境でもClaude Codeが走り回れるようになりました！

今後の展開としては、記事のアイデア出し　や　記事の校正　などでも活躍してもらえそうです！

【追記】他の方法について（結果私はこちらの環境にしました）

上記の方法でもVScode上で開くことが出来たのですが、Git連携の部分がなぜかうまくいきませんでした。

そのため、WSL上でGitのセットアップを行い、
リポジトリをクローンさせてVScode上のワークスペースに追加するという環境に落ち着きました。

結果、Windows環境とWSL環境とZennの記事を管理する環境が2つ出来てしまいましたが、
今後は新たに作成したWSL環境の方のみVscodeで記事を管理していけばよさそうです。

🎉 まとめ

  1. VS Codeに 「WSL拡張機能」 を入れる。
  2. WSLに接続し、Node.jsを準備する。
  3. sudo npm install -g @anthropic-ai/claude-code で召喚する。
  4. 既存プロジェクトは F1キー -> 「WSL: Reopen in WSL」 でAI対応させる。

この環境が整えば、面倒なセットアップスクリプトを書くのも、リファクタリングも、テストコードの作成も、全部Claudeにお願いできます。

ぜひ、あなたのVS Codeに「最強の新人エンジニア」を迎え入れて、開発ライフを爆速化させてください！

📚 参考出典

Discussion