0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

VSCode+Claude Codeによる開発環境を構築する2つの方法(Windows)

Last updated at Posted at 2025-07-01

はじめに

概要

Windows環境で、VSCodeによる普段の開発体験はそのままに、Claude Codeを導入する方法について取り上げます。
例としてJava/Spring Bootの開発環境を想定しますが、他の環境であっても適宜読み替えて活用できるかと思います。

image.png
↑完成イメージ

前提条件

  • WSL経由でLinux環境構築済み
  • Docker環境構築済み

動作環境

  • Windows 11 Home(24H2)
  • WSL2(2.1.5.0)
  • Ubuntu 24.04
  • Docker 28.0.4
  • Docker Desktop 4.37.1

基本

image.png

普段は、ローカルマシンに直接VSCodeとJDKをインストールし、必要に応じて拡張機能でもインストールすれば、最低限の開発環境構築は完了です。

image.png

しかし、今回導入したいClaude CodeはWindowsに直接インストールできません。
そこで、Claude Codeが動作する環境を別途用意する必要があり、その方法が以下の通り2つあります。

①WSL上のUbuntuに直接インストール

image.png

1つ目は、WSL上にLinux環境(今回はUbuntu)を用意し、そこにJDKやClaude Codeを直接インストールする方法です。
Windowsでの環境構築と同様の作業をUbuntuで行うだけなので、シンプルで分かりやすいのが利点です。

②開発コンテナ内にインストール

image.png

2つ目は、Dockerで開発環境用のコンテナを構築し、その中にJDKやClaude Codeを用意する方法です。
必要なコンポーネントが全てコンテナ内で完結しているので、ローカルマシンはもちろん、WSL環境を汚さずに済むという利点があります。

上記2つの方法では、どちらもVSCodeはローカルマシンのものを使用します。
開発環境との接続については、後述するVSCodeの拡張機能のおかげでスムーズに進めることができます。

構築手順

以降の手順では、

これらは完了済みの想定で進めていきます。

①WSL上のUbuntuに直接インストール

1.JDKインストール

コマンドプロンプトまたはPowerShellから、以下コマンドでUbuntuにログインします。

wsl

Ubuntu上でOpenJDKをインストールします。

sudo apt update
sudo apt install openjdk-21-jdk

2.Claude Codeインストール

引き続きUbuntu上で、こちらの通りインストール作業を実施します。
上記記事の1-(1)~(2)まで実施すればOKです。

とても分かりやすい記事で、恐縮ですが引用させていただきました。

3.アプリケーション作成

続いて、ローカルマシンに戻りVSCodeを開きます。

image.png
拡張機能「WSL」をインストールします。

VSCode左下の水色のボタンから、「WSLへの接続」を選択します。

image.png
接続後、Spring Bootアプリケーションの開発に使用する拡張機能である、

  • Extension Pack for Java
  • Spring Boot Extension Pack

をインストールします。

ローカルマシンのVSCodeを使用していても、拡張機能などの設定は、Ubuntu環境に別途保持されます。

Spring Initializrから、任意のプロジェクトを作成します。
今回は以下の通り作成しました。

  • プロジェクト:Mavenプロジェクト
  • Spring Bootバージョン:3.5.3
  • 開発言語:Java
  • Group Id:com.example
  • Artifact Id:qiita-spring-wsl
  • パッケージングタイプ:Jar
  • Javaバージョン:21
  • 依存関係:Spring Boot DevTools, Spring Web, Thymeleaf
  • 生成先フォルダ:/home/ユーザ名/work/src/(※)

※Cドライブ配下(/mnt/c)にプロジェクトを作成することもできますが、パフォーマンスが落ちるので非推奨みたいです。

プロジェクト作成後、VSCodeでフォルダを開きます。
image.png

4.Claude設定

続いて、VSCode内蔵のターミナルから以下コマンドを実行し、対話形式で設定を進めていきます。

claude

一通り完了した後、コマンドパレットから「Run Claude Code」を実行すると、以下の通りウインドウが表示されます。
ここから、Claude Codeに対してプロンプトを投げることができます。
image.png

ここまでで、はじめに示した図の通り環境構築が完了しました。

image.png
ソースコードなどの各種ファイルもUbuntu上に作成され、VSCodeにより接続している状態です。

もし、Ubuntu上のファイルをエクスプローラーで確認したい場合は、「\wsl.localhost」にアクセスすると確認できます。

5.動作確認

では、Claude Codeを使用してアプリケーションを開発してみます。
上記画面のClaude Codeタブから、以下の通り指示します。

Spring Bootを使用して簡易的なWebアプリケーションを開発してください。DBは使用しません。Thymeleafで構築した画面を返却するようにしてください。

image.png
作業タスクを列挙したものが出力されました。
依存関係なんかも自動で追加してくれたようです。

image.png
少し待つと、いくつかファイルが作成され、アプリケーションの起動方法やアクセス方法まで教えてくれました。

image.png
image.png
実際に、出力された通りの操作で起動・アクセスができました。

❓なぜ、ローカルマシンから通常通りアクセスできるのか
WSLの標準機能で、WSL上でリッスンしているポートを検知して、自動的にローカルマシンに転送しているおかげのようです。

以上で、WSL上のUbuntuを使用した環境構築の方法は完了です。

②開発コンテナ内にインストール(Dev Containers)

1.開発コンテナ構築

ローカルマシンで適当なアプリケーションフォルダを作成し、VSCodeで開きます。

image.png
拡張機能「Dev Containers」をインストールします。

コマンドパレットから「Dev Containers: Add Dev Container Configuration files」を実行し、以下の通り設定します。

  • ワークスペースに構成を追加
  • テンプレート:Java
  • バージョン:21-bullseya
  • オプション:Install Maven

.devcontainer/devcontainer.jsonファイルが作成されます。
開発コンテナに関する設定はこのファイルに定義していきます。

現状、先ほどの設定によりJavaをインストールするよう定義されています。
さらに、Claude Codeをインストールするよう、以下設定を追加します。

devcontainer.json
"features": {
	"ghcr.io/devcontainers/features/node:1": {},
	"ghcr.io/anthropics/devcontainer-features/claude-code:1.0": {}
}

また、開発コンテナで使用するVSCodeの拡張機能として、

  • Extension Pack for Java
  • Spring Boot Extension Pack

をインストールするよう設定します。

devcontainer.json
"customizations": {
	"vscode": {
		"extensions": [
			"vscjava.vscode-java-pack",
			"vmware.vscode-boot-dev-pack"
		]
	}
}

ローカルマシンのVSCodeを使用しますが、拡張機能などの設定は、このdevcontainer.jsonファイルに依存します。

完成したJSONファイルは以下の通りです。

devcontainer.json
{
	"name": "Qiita Spring Devcontainer",
	"image": "mcr.microsoft.com/devcontainers/java:1-21-bullseye",
	"features": {
		"ghcr.io/devcontainers/features/java:1": {
			"version": "21",
			"installMaven": "true",
			"installGradle": "false"
		},
		"ghcr.io/devcontainers/features/node:1": {},
		"ghcr.io/anthropics/devcontainer-features/claude-code:1.0": {}
	},
	"customizations": {
		"vscode": {
			"extensions": [
				"vscjava.vscode-java-pack",
				"vmware.vscode-boot-dev-pack"
			]
		}
	}
}

2.アプリケーション作成

VSCode左下の水色のボタンから、「コンテナで再度開く」を選択します。

接続後、JDKやClaude Code、拡張機能などが意図した通りインストール済みであることが分かります。

java --version
> openjdk 21.0.7 2025-04-15 LTS
> OpenJDK Runtime Environment Microsoft-11369942 (build 21.0.7+6-LTS)
> OpenJDK 64-Bit Server VM Microsoft-11369942 (build 21.0.7+6-LTS, mixed mode, sharing)

claude --version
> 1.0.35 (Claude Code)

Spring Initializrから、任意のプロジェクトを作成します。
今回は以下の通り作成しました。

  • プロジェクト:Mavenプロジェクト
  • Spring Bootバージョン:3.5.3
  • 開発言語:Java
  • Group Id:com.example
  • Artifact Id:qiita-spring-devcontainer
  • パッケージングタイプ:Jar
  • Javaバージョン:21
  • 依存関係:Spring Boot DevTools, Spring Web, Thymeleaf
  • 生成先フォルダ:/workspaces/

指定したフォルダが既に作成されている旨のメッセージが表示されますが、「Continue」とします。

個人的に.devcontainerフォルダがアプリケーションのルートフォルダに配置されるようにしたく、
Artifact Idにはアプリケーションフォルダと同名を、生成先フォルダにはworkspacesを指定するようにしました。

image.png

3.Claude設定

続いて、VSCode内蔵のターミナルから以下コマンドを実行し、対話形式で設定を進めていきます。

claude

一通り完了した後、コマンドパレットから「Run Claude Code」を実行すると、以下の通りウインドウが表示されます。
ここから、Claude Codeに対してプロンプトを投げることができます。
image.png
(Auto-update failedとなっているのが気になります)

ここまでで、はじめに示した図の通り環境構築が完了しました。

image.png
ソースコードなどの各種ファイルも開発コンテナ内に作成され、VSCodeにより接続している状態です。
フォルダは自動でマウントされるので、各種ファイルはローカルマシンにも同期されます。

4.動作確認

では、Claude Codeを使用してアプリケーションを開発してみます。
上記VSCodeのClaude Codeタブから、以下の通り指示します。

Spring Bootを使用して簡易的なWebアプリケーションを開発してください。DBは使用しません。Thymeleafで構築した画面を返却するようにしてください。

image.png
作業タスクを列挙したものが出力されました。

image.png
少し待つと、いくつかファイルが作成され、アプリケーションの起動方法まで教えてくれました。

image.png
image.png
実際に、正常にアプリケーションを実行でき、アクセスすることができました。

❓なぜ、ローカルマシンから通常通りアクセスできるのか
Dev Cotntainers拡張機能が開発コンテナ内でリッスンしているポートを検知して、自動的にローカルマシンに転送しているおかげのようです。

以上で、開発コンテナを使用した環境構築の方法は完了です。

おわりに

Windows環境でClaude Codeを導入する方法をまとめてみました。
ポイントは、いずれかの方法でLinux環境を用意する点であり、構築した開発環境との接続はVSCodeの機能に大変助けられてる形でした。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?