初めてのdevcontainer 数分クッキング(Java 21 + WSL + VSCode + Docker)

### はじめに

皆さんこんにちは､@fsd-shoyaです｡

Javaを学ぶために､最小構成のdevcontainerを作成しましたので､そのご紹介です｡
短時間で作成出来ますので､devcontainerの作成をしたことの無い方でもご覧頂けるかと思います｡

ご指摘などありましたらお知らせ頂けると幸いです｡

---
### 前提条件
* WindowsのWSL2をインストール済みであること｡
* Visual Studio Codeをインストール済みであること｡
* WSL2上でDockerが起動できること｡

---

### 事前準備
#### WSLへの接続
まず､WSLの拡張をインストールします｡

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3323118/90c4c27e-a6c3-b84f-bad9-4d2fd69c23f2.png)

インストールが完了したら､画面左下の`><`マークをクリックし､`WSLへの接続`を選択します｡

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3323118/42b6bfa6-4d66-22e1-c2d0-67ffe7bdfcd2.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3323118/dc86f720-2b24-0ec5-0b6d-0f35ef71a29d.png)

画面左下の表示に`WSL`と表示されていればWSLへ接続されています｡

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3323118/7160e512-da06-fc0f-6646-da51aa3c4144.png)

#### 拡張機能のインストール

* Dev Containers

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3323118/3b69bc5c-0bf2-b142-7a3b-0b32127660dd.png)

* Docker

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3323118/97ea4c09-5efc-7fa1-bfc9-eeeb606f98a1.png)

---

### 実行ファイルの作成
事前準備が完了したので､実行ファイルの作成を行っていきます｡

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3323118/438af3f5-fd0b-4a01-4190-82eee5991d60.png)

VSCode上のターミナルで作業していきます｡

#### ディレクトリ構成
<pre>java-21-sample/
├── .devcontainer
│   └── devcontainer.json
├── docker
│   └── compose.yml
└── src
    └── Main.java</pre>

#### ディレクトリの作成
`java-21-sample/`とその直下に`.devcontainer/, docker/, src/`のディレクトリを作成します｡
```bash:bash
mkdir -p ./java-21-sample/{.devcontainer,docker,src}
```
### ファイルの作成
作成したディレクトリ内に`devcontainer.json, compose.yml, Main.java`のファイルを作成します｡
```bash:bash
touch ./java-21-sample/{.devcontainer/devcontainer.json,docker/compose.yml,src/Main.java}
```
#### devcontainer.jsonの編集
```bash:bash
vim ./java-21-sample/.devcontainer/devcontainer.json
```
```json:.devcontainer.json
{
  "name": "java-21-sample",

  "dockerComposeFile": ["../docker/compose.yml"],

  "service": "java",
  "workspaceFolder": "/java-21-sample",
  "extensions": ["vscjava.vscode-java-pack"]
}
```
#### compose.ymlの編集
今回は､最新のLTSであるJava21のJDKイメージを利用します｡
```bash:bash
vim ./java-21-sample/docker/compose.yml
```
```yaml:compose.yml
version: "3"
services:
  java:
    image: openjdk:21-jdk
    container_name: java-21-sample
    ports:
      - 8000:8000
    tty: true
    volumes:
      - ..:/java-21-sample:cached
```
#### Main.javaの編集
```bash:bash
vim ./java-21-sample/src/Main.java
```
```java:Main.java
class Main {
	public static void main(String[] args) {
		System.out.println("Hello, World!");
	}
}
```
---
### devcontainerの起動
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3323118/2e6f1a45-9a71-a2eb-f091-6140a773d980.png)

こちらの画面から､`フォルダーを開く`をクリックします｡

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3323118/049b8adf-9f13-9ec5-4990-3a03372c3c52.png)

`java-21-sample/`ディレクトリを選択し､`OK`をクリックします

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3323118/d6a54c39-6b72-ff7e-1d28-a551d25dbc93.png)

`コンテナーで再度開く`をクリックします｡

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3323118/3e7c3a12-cd9f-7e88-d07c-ed8c04c056c7.png)

このように､左下に`開発コンテナー`が表示されていれば､devcontainerの起動が成功しています｡

---

### Javaプログラムの実行

試しに､サンプルプログラムを実行してみましょう｡

```bash:bash
java src/Main.java
```
以下のような出力になれば､実行成功です｡
```bash:output
Hello, World!
```

---
### 終わりに
いかがでしたでしょうか？
複雑なイメージのあるdevcontainerですが､一度手を動かして作成してみると学ぶハードルが下がるかと思います｡
この記事がdevcontainerと仲良くなる一歩目になれば幸いです｡