VSCodeでSpringBootのプロジェクト作成からアプリケーションの実行まで


## 概要

VSCodeを使ってSpringBootのWebアプリケーションを実行するまでの手順です。

## 環境

```
$ sw_vers
ProductName:	macOS
ProductVersion:	11.6.2
BuildVersion:	20G314

$ java -version
openjdk version "1.8.0_322"
OpenJDK Runtime Environment Corretto-8.322.06.1 (build 1.8.0_322-b06)
OpenJDK 64-Bit Server VM Corretto-8.322.06.1 (build 25.322-b06, mixed mode)

$ code -v
1.64.2
f80445acd5a3dadef24aa209168452a3d97cc326
x64
```

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

VScodeでSpringBootを開発するときに必要な拡張機能をインストールします。

Extension Pack for Java
![スクリーンショット 2022-02-19 22.51.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227811/a36daec6-6d11-df03-6840-4e641f106321.png)

Spring Boot Extension Pack
![スクリーンショット 2022-02-19 22.54.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227811/640e8d28-e775-8c4c-b9c4-607c90a47c96.png)


## プロジェクトの作成

拡張機能をインストール後にプロジェクトを作成します。
以下の初期設定は一例ですので、適宜お好きな物を選択してください。

コマンドパレットを開いて(command + shift + p)

Spring Initializr: Create a Maven Projectを選択
![スクリーンショット 2022-02-19 22.57.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227811/9e144b11-fa1c-6e10-1924-df0b63fdf1d8.png)

プロジェクトの言語でJavaを選択
![スクリーンショット 2022-02-19 22.58.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227811/551117df-1a35-0158-61c2-5549f54b0173.png)

パッケージ名を入力
![スクリーンショット 2022-02-19 22.59.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227811/fd86230d-3975-18e4-0bad-b903ab9dafd6.png)

プロジェクト名を入力
![スクリーンショット 2022-02-19 23.00.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227811/b9b047af-0ae9-d575-4509-dbb8bbd64862.png)

パッケージの形式でJarを選択
![スクリーンショット 2022-02-19 23.00.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227811/11e7e6a4-6f49-9db8-1548-bb293090ebc0.png)

Javaのバージョンを選択
![スクリーンショット 2022-02-19 23.00.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227811/e7d6baed-d8a5-c60c-2148-aa7d2d1bbe69.png)

依存関係でSpring WebとThymeleafを選択
![スクリーンショット 2022-02-19 23.01.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227811/df6ddcf6-39f1-94b0-42b7-6d611073603c.png)

最後にプロジェクトの保存場所を選択します。

## アプリケーションの実行

保存したプロジェクトをVSCodeで開くとmainメソッドが作成されています。
（パッケージ名やプロジェクト名によって場所は変わります）

```src/main/java/com/example/demo/DemoApplication.java
package com.example.demo;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class DemoApplication {
	public static void main(String[] args) {
		SpringApplication.run(DemoApplication.class, args);
	}
}

```

同じフォルダ内にcontrollerフォルダを作成して、
SampleController.javaを作成します。

```src/main/java/com/example/demo/controller/SampleController.java
package com.example.demo.controller;

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

@Controller
public class SampleController {
    @RequestMapping("/sample")
    public String sample() {
        return "sample";
    }
}
```

src/main/resources/templatesにsample.htmlを作成します。

```src/main/resources/templates/sample.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Sample</title>
    </head>
    <body>
        <h1>HelloWorld</h1>
    </body>
</html>
```

mainメソッドに表示されているRunをクリックするとローカルサーバーが立ち上がります。
![スクリーンショット 2022-02-19 23.29.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227811/2fec295b-9b8b-92df-6e61-1956fde80088.png)

http://localhost:8080/sample に接続するとsample.htmlの内容が表示されているのが確認できます。