はじめに
最近流行りの「Claude Code」、気になって触ってみようかな～と思っていたのですが
「Macじゃないと使いづらい」
「Windows？WSLの設定が面倒くさい」
なんて声を聞いて、使用を躊躇っていました。
でもいざやってみると使用するまでとても簡単だったので導入手順をここに記録しておくことにします。
想定読者
- windowsユーザー
- Claude Codeをこれから始める方
- Claude CodeをVSCode上で使用してみたいよ～という方
導入手順
参照元のドキュメントはこちらです。
https://docs.anthropic.com/en/docs/claude-code/overview
1. WSLのインストール
Windowsユーザーに必要なWSLのインストールからです。
wsl --install -d Ubuntu-22.04
2. node.jsのインストール
今回の環境にnode.jsが必要になってくるようなのでインストールします。
nodejsのインストール手順は以下です。
https://learn.microsoft.com/ja-jp/windows/dev-environment/javascript/nodejs-on-wsl#install-nvm-nodejs-and-npm
コマンド等を調べるのがめんどくさいよって方はこちらの記事にnode.jsに関する手順が記載されています。
3. Claude Codeのインストール
3.1 インストール
npm install -g @anthropic-ai/claude-code
3.2 作業ディレクトリへの移動
cd your-project-directory
3.3 起動
claude
3.4 テキストスタイルの選択
「Dark mode」や「Light mode」などの選択が出てくるので好みで選んでください。
3.5 Anthropicのアカウントにログイン
3.5.1 Press Enter to login to your Anthropic Console account... という表示が出てくるので「Enter」。
3.5.2 表示されるURLをコピーしてブラウザに張り付け、「Authorize」を押下。
3.5.3 Authentication Codeが表示されるので、WSL上のコンソールに貼り付け。
3.5.4 注意事項等を確認したのち、起動後の表示がされることを確認。
4. VSCode上での起動
ここまで起動させて、普段使用するエディター（VSCode）でClaude Codeを使用させてくれないと使いづらいじゃないかと思いました...
そのため以降ではVSCodeで使用するための手順を記載します。
4.1 VSCode上でwslを開く
VSCodeで開くフォルダーに以下のパスでWSL上のものを開く。claude_demoは手順3.2で作成したもの。
\\wsl.localhost\Ubuntu-22.04\home\{ユーザー名}\claude_demo
開いたのちに画像の赤丸部分（ターミナル右上）から「Ubuntsu-22.04（WSL）」を選択する。
4.2 VSCode上でClaude Codeを起動
以下の手順で実際に起動できることを確認。
claude
↓↓↓
5. 動作確認
せっかくなので最後に動作確認してみたいと思います。
プロンプトは以下です。
react × typescript × antdesignで京都の魅力を伝えることのできるHPを作成してください。
完成したら別のターミナルを同様に開き
npm start
しばらく待つとかなり完成度の高いものができました。Claude Codeは群を抜いているとは聞いていましたが予想以上でした、、、(笑)
終わりに
Windowsユーザーでも簡単にClaude Codeを始めることができるんだなということが本投稿で伝われば幸いです。
最後まで読んでいただきありがとうございました！