「ウェルカムドリンク」の対義語って「京都のぶぶ漬け」だよな。DE-TEIUです。

Claude Codeが流行ってるので試しに使ってみようと思い、Windows11上に実行環境を作ってみたら、いくつかハマりポイントがあったので、環境構築手順を備忘録として残しておきます。

事前準備

Claude Proに課金

Claudeにログインし、ProプランまたはMaxプランに課金します。Proだと月額20ドル、Maxだと月額100ドルです。 両者の違いについては調べたらいくらでも詳しい情報が出てくるので、ここでは割愛します。私はProプランに課金しました。

Linux用Windowsサブシステムの有効化

コントロールパネルから、「プログラムと機能」→「Windowsの機能の有効化または無効化」を開きます。 ここで「Linux用Windowsサブシステム」にチェックを入れ、PCを再起動します。これでWSL2が有効化されます。

WSL2のUbuntuをインストール

次に、Microsoft Storeを起動し、WSL2用のLinuxをインストールします。今回は「Ubuntu 24.04.1 LTS」を選びました。

インストールが完了したら、スタートメニューから「Ubuntu」を起動します。初回起動時にユーザー名とパスワードを設定する必要があります。

最終的にこんな状態になればUbuntuを使う準備は完了です。

ちなみに、事前準備で「Linux用Windowsサブシステム」を有効化していないと、WslRegisterDistribution failed with error: 0x80370114というエラーメッセージが表示されて止まります。注意。

Node.jsのインストール

Node.jsをWSL2のUbuntuにインストールします。以下のコマンドを順に実行してください。

$ curl -fsSL https://deb.nodesource.com/setup_22.x | sudo -E bash -

$ sudo apt-get install -y nodejs build-essential

あとnvmも一緒にインストールしておきます。

$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

$ exec $SHELL

nvm経由でNode.jsをインストールします。ここではバージョン22を使用します。

$ nvm install 22

$ nvm use 22

$ nvm alias default 22

Claude Codeのインストール

Claude Codeをインストールしていきましょう。

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

インストールできたらバージョン確認

$ claude --version

Claude Codeの起動

Claude Codeを起動します。以下のコマンドを実行してください。

$ claude

あとは画面の案内に従って、Claudeにログインし、認証を進めましょう。Claudeを使う準備はそれで完了です。

VSCodeからの利用

これでひとまずWSL2上にClaude Codeの実行環境が整いました。次に、VSCodeからこの環境を利用する方法を説明します。

まずはVSCodeを起動し、左下の水色のボタンから、WSL2のUbuntu環境に接続しましょう。

画面上部に下記の選択項目が表示されたら、「WSLへの接続」を選択します。

画面左下の表示が「WSL: Ubuntu-24.04」になっていれば、WSL2のUbuntu環境に接続できています。

その状態でVSCodeからターミナルを開くと、WSL2のUbuntu環境のターミナルが開きます。 ここで先ほどインストールしたClaude Codeを実行できます。

ということで、あとはClaudeで開発したいプロジェクトを作成しましょう。

ターミナルを開いた直後のカレントディレクトリは、/home/ユーザー名/ になっていると思います。 ここに適当な名前(workspaceなど)のディレクトリを作成し、そこに移動してからプロジェクトを作成すると良いでしょう。

ちなみに私の環境では今こんな状態になってます。

注意事項

ちなみに、WSL2内では、Windowsの各ドライブもマウントされているため、例えばWSL2上で /mnt/c/ にアクセスすると、Cドライブの中身を参照できます。

なのでやろうと思えば、すでにCドライブ以下に置いてあるプロジェクトに移動し、そのファイルを直接編集して開発、なんてこともやろうと思えばできてしまいます。 が、それは以下2点の理由であまりおすすめしません。

1. /mnt 以下へのアクセスは遅い

WSL2から見ると、/mnt以下のディレクトリは、外部のディスクを(Windowsのファイルシステムで)マウントしている状態になっています。そのため、/mnt以下のファイルへのアクセスは、/homeなどのWSL2のディスク内へのアクセスに比べて、若干遅くなります。

2. ファイルの変更が即時反映されない

/mnt以下のファイルを編集して保存しても、WSL2内のプロセスからはその変更が即時に反映されません。 特に、Viteなどの開発サーバーを起動している場合、ファイルの変更を検知できず、ブラウザに反映されないことがあります。

一応、プロジェクト内に差分を即時反映させるような設定を入れたりすれば対策できますが、まぁそれは面倒ですし、 プロジェクト内にわざわざWSL2でデバッグするためだけの設定を入れるというのはなんか冗長な気もします。

Claude Code を実行してみる

WSL2上でClaude Codeを実行してみましょう。Claudeを使いたいディレクトリに移動し、ターミナルで以下のコマンドを実行します。

$ claude

初回起動時は色々アナウンスが出てきますが、最終的に以下のような状態になると思います。

次に、ClaudeCodeにプロジェクトの中身を調査させて、CLAUDE.mdを作ってもらいましょう。 ClaudeCodeを起動した状態で、以下のコマンドを実行します。

> /init

すると、プロジェクトの中身を調査し、CLAUDE.mdというファイルを作成してくれます。 その後、CLAUDE.mdを開くと、プロジェクトの概要や、どのファイルがどんな役割を持っているかなどが記載されているはずです。 （中身が英語で書かれてたら、「CLAUDE.mdを日本語に翻訳して」と言えば日本語で書き直してくれます）

Claude CodeにMCPサーバーを設定する

Claude Codeを使う際、MCPサーバーを設定することで、Claude Codeにいい感じのコンテキストを持たせたりして更に便利に利用できます。以下の手順で設定を行いましょう。

今回は、Context7のMCPサーバーを利用します。 こちらは様々なフレームワークやライブラリの最新のドキュメントをコンテキストとして持っており、これを組み込むと、Claude Codeがより正確なコードを生成してくれるようになります。便利。

Claude Codeを起動していない状態で、ターミナルで以下のコマンドを実行します。導入はこれだけで完了です。

$ claude mcp add --transport sse context7 https://mcp.context7.com/sse

Claude Codeを起動し、MCPサーバーが設定されているか確認してみましょう。

> /mcp

すると、以下のようにContext7が設定されていることが確認できるはずです。

参考記事

• Claude CodeをWindows上で使う方法
• WSL2でviteを使っている時に、npm run devをしても変更が即時反映されない時の話

---