VSCode + SpringBoot(Gradle)でWebアプリの開発環境を構築する

# 動機
- 社内勉強会でSpringBootを使ってWebアプリを作りたい
- 通常業務のJava開発は古いバージョンのEclipseを利用
    - そのEclipseではSpringBootが動かない！
    - GitHub CopilotのライセンスをもらったがJavaではEclipseで動かず試せていない
    - せっかくなんでJava22触りたい（だったんですがGradleがうまく動かず21で妥協）

ということでVSCode + SpringBootでの環境を作ってみようと思いやってみました。
勉強会の手順書を兼ねて手順を記録していきます。

# 手順

## 想定環境
- WindowsOS
- Javaとか何も入っていない状態
- プロジェクトはGradleプロジェクトにしたい

## JDK21のインストール
ダウンロードサイト

https://www.oracle.com/jp/java/technologies/downloads/

JDK21 -> Windows -> x64 Installerを選択してインストーラーをダウンロードします。
任意の設定でインストールを実行。
インストールフォルダは後で設定に入力するため、どのフォルダにインストールしたかを覚えておきましょう。

## VSCodeの本体のインストール

ダウンロードサイト

https://code.visualstudio.com/

Download for Windowsのボタンを押してインストーラーを取得します。
任意の設定でInstallを実施して起動します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1126770/fde094c0-0640-9811-3b95-b02cef3d4a59.png)

## VSCodeのExtensionのインストール
Extensionとは拡張機能のことです。
VSCodeでは必要な言語のExtensionを足すことで様々な言語の実行やデバッグをできるようにする作りとなっているようです。
今回は以下を順番にインストールしていきます。
- Extension Pack for Java
- Spring Boot Extension Pack
- Gradle for Java

サイドバーのExtensionsを選択する。
`Java` で検索して `Extension Pack for Java` を探す。
青いinstallボタンを押してインストールする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1126770/bb5e9a60-d354-83b1-cb00-b185e7f32301.png)

`Spring Boot` で検索して `Spring Boot Extension Pack` を探す。
青いinstallボタンを押してインストールする。

![SpringBootExtension.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1126770/beb69807-f76b-1cb3-146d-4ffa5147a400.png)

`gradle` で検索して `Gradle for Java` を探す。
青いinstallボタンを押してインストールする。

![gradle.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1126770/b65f3708-bb92-69ac-43c0-11969aeeff95.png)

## Java Homeの設定

`Ctrl` と `,` （カンマ）のキーを同時に押してSettingsを開く。
Userタブが選択されていることを確認し、`java home` で検索して `Language Support for Java(TM) by Red Hat` を選択する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1126770/2d130ae1-4033-9050-f81a-15a968fdce71.png)

`Edit in settings.json` を押して `java.jdt.ls.java.home` にjdk-21をインストールしたフォルダを入力する。
この時 `\` （バックスラッシュ）は2重に入力する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1126770/7cf8afff-2b4a-a924-2d7c-08c81e10e729.png)

Settingsに戻り、Gradleを選択してGradle Java:Homeにjdk-21をインストールしたフォルダを入力する。
この時 `\`は2重にしなくても良い。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1126770/d280c74d-3d9d-dc45-8652-d84704715e72.png)

settings.jsonに反映されている。
 `\` は自動的に2重になっている。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1126770/b84b41f7-2d4e-825f-a041-0ce323ba090c.png)

うまく Gradle: Homeが表示されない場合は `settings.json` に直接入力します。
`java.import.gradle.java.home`


## ワークスペースの作成

メニューの `File` から `Add Folder to Workspace` を押す。
任意のフォルダをワークスペースに設定する。（ここにソースコードが入ります）[^1]

[^1]:このフォルダ内のファイルの作成者を信頼しますか？
という内容の警告が出る場合があるので、出た場合はYesを押す。
（ワークスペースに設定したフォルダ内のファイルを信頼したことになるので危険なファイルが入らないようにする）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1126770/ae9063c1-6e5a-fc50-5ca0-e4c35fd0f8f0.png)

## Spring Initializrでプロジェクトを作成する
`Ctrl` と `Shift` と `P` を同時に押してコマンドパレットを開く。
`Spring Ini` と入力し `Spring Initializr: Create a Gradle Project` を選択する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1126770/ccd0dde9-27b7-33e2-47cd-ac2830058a34.png)

- Spring Boot のversion を選択する -> `3.2.4`
- projectの言語を選択する -> `Java`
- projectのGroup Id を入力する  -> `任意のId 例：com.example`
- Artifact Id を入力する -> `任意のId 例：demo`
- packaging type を選択する -> `Jar`
- Javaのversion を選択する -> `21`
- dependenciesに追加するライブラリを選択する、選択したら Selected 3 dependenciesを押す。[^2]
    - Spring Web
    - lombok
    - Thymeleaf

[^2]:ほかの使いたいライブラリを追加してもOK。後で追加することもできます。

- Projectを作成するフォルダを選択する -> 先ほど作成したワークスペースを選択し `Generate into this folder` を押す

Spring Bootのプロジェクトが作成されて準備が始まる。
上手く準備が始まらない時はjavaファイルを開くと動きだしたりする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1126770/1c27363e-fd87-f577-7100-210356f714cf.png)

問題がなければJava Procjetとして認識される。[^3]

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1126770/477adf4b-42fc-4928-0cf9-6b8bf1f947f8.png)
[^3]:何か問題が起きた時はコマンドパレットで `Clean the Java Language Server Workspace` を実行してみる。それでも解消しない場合はエラーログを見る。

# 動かしてみる

`com.example.demo.DemoApplication` クラスを実行する。[^4]
[^4]:実行する際にJavaやVSCodeの通信がファイアウォールでブロックされることがあるが許可する。（ライブラリを取得したりするのに必要）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1126770/7edf7350-bd16-6012-8cdf-153c8364ec0a.png)

コンソールにSpring Bootのアスキーアートが出たら起動できている状態です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1126770/ebb7bb80-98e1-a342-f59d-4c86f5471eaf.png)


http://localhost:8080/ にアクセスする。
Whitelabel Error Pageが表示されサーバーが起動していることが確認できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1126770/ffe928e6-456c-a654-f550-cb1b77fca4aa.png)

これだけだとちゃんと動作しているのかわからないので一つコントローラーを追加して動かしてみます。

`com.example.demo` パッケージに以下のControllerを追加。
```Java
package com.example.demo;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class DemoController {
    
    @GetMapping("test")
    public String getMethodName() {
        return "test";
    }

}
```

`resources/templates` に `test.html` を追加。

```Html
<p style="color:red;">Hello World!</p>
```

http://localhost:8080/test にアクセス。
赤字のHello Worldが表示されれば動作しています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1126770/1f675288-c689-45a9-d846-e592ed783ac5.png)

おわり。

追記：
続きの記事です。
こちらで準備した開発環境をDockerで立てたMySQLサーバーに接続できるようにします。

https://qiita.com/gengen0719/items/73ab46e1a6b46e2cfae7

更にクラスを分割し、SpringのDIの仕組みを使ってインジェクションする実装に変更します。

https://qiita.com/gengen0719/items/65cab20943bf4cce61ca

更にSpringSecurityを使ってログインの仕組みを実装します。

https://qiita.com/gengen0719/items/e442feb2c322d633ab63

SpringBootのアプリにGitHubCopilot AgentModeを使って機能追加するチュートリアル記事を書きました
こちらの記事の開発環境が構築できていればすぐに試せますのでよかったらどうぞ

https://qiita.com/gengen0719/items/102936699375a9f5b774