はじめに
先日、VSCodeのプラグインとしてClaude Code for VSCodeがリリースされたとのこと。
さっそくどんなものかと使ってみました。
ちなみに筆者は開発ゴリゴリにやっているわけでもなければ、インフラの知識もほぼ皆無です。（初めてLinux触りましたよ・・・！）
そのため、「難しいことわかんないけど、とりあえず生成AIでアプリ作ってみたいなぁ」的に考えている人向けのコンテンツです。
Windows環境で使ってみたとはいいつつ、現バージョンではLinux環境が必須です。
そこで今回はWSL2（Windows Subsystem for Linux 2）を活用しています。
手順の全体像
- WSL2のインストール - Ubuntu環境をWindows上に構築
- Node.jsとnpmのインストール - Claude Code実行に必要な環境整備
- Visual Studio Codeの設定 - WSL拡張機能のインストール
- WSL2からVSCodeを起動 - 開発環境の連携
- Claude Codeのインストール - npmでグローバルインストール
- Claude Code for VSCode拡張パッケージのインストール - 動作確認
必要な環境
- Windows 10（バージョン2004以降、WSL2対応版）
- Visual Studio Code
- インターネット接続
- Claudeのpro以上の有償プランアカウント
手順1: WSL2（Ubuntu）のインストール
基本的にはこちらの記事を参考にしています。
WSL2を有効化
PowerShellを管理者権限で開き、以下のコマンドを実行します：
wsl --install -d Ubuntu
このコマンドで自動的にWSL2とUbuntuがインストールされます。
WSL2のバージョン確認
インストール後、WSL2が正しく設定されているか確認
wsl --list --verbose
VERSION列に2と表示されていればWSL2が有効です。
Ubuntu起動と初回セットアップ
WSL2（Ubuntu）のインストールが完了しましたら、初回セットアップに進みます。
参考までにユーザー名とパスワードの規則は以下です。自身の覚えやすいものを設定しましょう。
ユーザー名の規則：
- 小文字のアルファベットまたはアンダースコア（_）で始める
- 使用可能文字：小文字、数字、ハイフン（-）、アンダースコア（_）
- 例：
dev01、_myuser
パスワード：
- 6文字以上（推奨は8文字以上）
- sudoコマンド実行時にも使用するため、覚えやすいものを設定
画像のような表記になればOK
これでWSL2（Ubuntu）のセットアップは完了です！
手順2: Node.jsとnpmのインストール
Claude Codeの実行にはNode.jsとnpmが必要なのでインストールします。
手順1の続きでpowershellに以下コマンドを入力します。
# Node.jsとnpmをインストール
sudo apt install nodejs npm
# バージョン確認
node --version
npm --version
こんな感じに確認できればOK！
手順3: Visual Studio Codeの設定（Windows側）
VSCodeのインストール
WSL2（Ubuntu）側ではなく、Windows側にVSCodeをインストールしてください。
Remote WSL拡張機能のインストール
VSCodeをWindows側でインストールしたら、以下の拡張機能をインストールします：
-
Remote - WSL または Remote Development（より多機能）
手順4: WSL2（Ubuntu）側からVSCodeを起動
次にWSL2（Ubuntu）側からVSCodeを起動します。
Ubuntuターミナルの起動
さきほどインストールしたUbuntuターミナルを起動します。
作業用ディレクトリの作成
以下のコマンドを実行します。
本来は作業用ディレクトリを作成するほうが良いのですが、
私はいかんせん初心者なのでまずはホームディレクトリをそのまま使いました・・・
# ホームディレクトリに作業用ディレクトリを作成（推奨）
mkdir ~/development
cd ~/development
# 私はこっちで実行
cd ~
VSCodeの起動
code
初回起動時は必要なパッケージの自動インストールに時間がかかります。
VSCodeが開いたら、左下に「WSL: Ubuntu」と表示されていることを確認してください。
この表示があれば、WSL2（Ubuntu）環境で正しく動作しています。
手順5: Claude Codeのインストール
npmでClaude Codeをインストール
VSCodeがWSL2（Ubuntu）で起動したら、VSCodeターミナルで以下のコマンドを実行します。
npm install -g @anthropic-ai/claude-code
エラーが発生した場合sudoコマンドで試みます。（私はこっちでやりました）
# sudoでインストールを試す
sudo npm install -g @anthropic-ai/claude-code
Claude Codeの起動確認
インストールが完了したら、Claude Codeが正しく動作するか確認します：
claude
このような表示が出たらURLにアクセスしてClaudeにログインしましょう。
（画像ではURLは見切れさせています。画像一番下にリンクがあり、ログインページに飛びます）
ログインが完了したらプロンプトを投げられます！
手順6: Claude Code for VSCodeプラグインのインストールと起動確認
WSL2（Ubuntu）側のVSCodeでプラグインをインストールします。
インストールが完了し、今までの手順が完了していれば、VSCodeのタブ右上にClaudeのアイコンが現れます。
これをクリックすると・・・
Claude Code for VSCode立ち上げ完了です！！！
まとめ
これでWindows 10上でClaude Code for VSCodeを使用する環境が整いました。
WSL2を使うことで、WindowsユーザーでもLinux環境でのAI開発ツールを手軽に利用できるようになります。
以上、この記事がどなたかの参考になれば幸いです。
おまけ -簡単なアプリを作ってみる-
以下のようなプロンプトを投げてみます。
簡単なグラフがWeb上で作れるツールをつくってみて
すると以下のようにコードが作成され、一時停止します。（ここまで約２分）
ここでコードを精査して気になる点があれば修正が可能です。
当然、手で直してもいいですし、プロンプトを投げてもOKです。
このままyesを選択すると・・・
という表記が出て・・・
このようにものの数分でサンプル完成です！
ちなみに機能はボタンが効かなかったりとバグだらけなので、ちゃんと作りこむ際はしっかりとプロンプトを考えましょう(笑)