「Spring Tool Suite」を使用して「Spring boot + Thymeleaf」で簡単なWeb画面を作成

「Spring Tool Suite」を使用して「Spring boot + Thymeleaf」で簡単なWeb画面を作成してみたので、その時の手順を残します。

# 環境
+ Pleiades All in One Eclipse（リリース 2021-06）
+ Spring Tool Suite (STS) 4.11.0

「Pleiades All in One Eclipse」と「Spring Tool Suite (STS)」のインストールについては前回の記事「[EclipseにSpring Tool Suiteのプラグインをインストールする方法](https://qiita.com/yasushi-jp/items/16507881b42a007aa660 "EclipseにSpring Tool Suiteのプラグインをインストールする方法")」を参照してください。

# やってみた手順

### 1. Eclipseのプロジェクトの作成

Eclipseを起動し、メニューから「ファイル」ー「新規」－「Spring スターター・プロジェクト」を選択します。
![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292434/0ecd2ac5-529b-0ad9-0d3d-0ad3acd0e626.png)

「新規 Spring スターター・プロジェクト」で「Java バージョン」に「8」を選択、それ以外はデフォルトのままで、「次へ」をクリックします。
![02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292434/982130df-8fc2-764e-41fd-5878c564345d.png)

「新規 Spring スターター・プロジェクト依存関係」で「Spring Boot バージョン」で「2.5.2」を選択、「テンプレートエンジン」の「Thymeleaf」をチェック、「Web」の「Spring Web」をチェックし、「次へ」をクリックします。
![03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292434/1f549aca-eb7c-08bd-c93d-5fa2f308ecbd.png)

そのまま「完了」をクリックします。
![04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292434/aea6cf04-ed62-cda9-3fc4-4d0191e2fcc0.png)

「demo」プロジェクトが作成されます。
![05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292434/7292facd-a60e-97d6-ebaf-912956298611.png)

### 2. 「ようこそ！Spring boot + Thymeleafへ！」のページ作成

http://localhost:8080/ にアクセスすると、「ようこそ！Spring boot + Thymeleafへ！」のページが表示されるサンプルを作成します。

「com.example.demo」パッケージ配下に、以下の「DemoController.java」を作成します。
![06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292434/57afb287-f475-4927-3fc6-8b011c9d32c8.png)

```java:DemoController.java
package com.example.demo;

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

@Controller
public class DemoController {

	@RequestMapping("/")
	public String index(Model model) {
		model.addAttribute("message", "ようこそ！Spring boot + Thymeleafへ！");
		return "index";
	}
}
```

「src/main/resources/templates」配下に、以下の「index.html」を作成します。
![07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292434/1780b810-c186-7699-c40a-c48de3e311f6.png)

```html:index.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>トップページ</title>
</head>
<body>
	<p th:text="${message}"></p>
</body>
</html>
```

### 3. Spring Boot アプリケーションの実行

作成した「demo」プロジェクトを右クリックし、「実行」－「Spring Boot アプリケーション」を選択します。
![08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292434/1cb047f9-9930-cfdd-9c41-6d92eb4734d8.png)

EclipseのコンソールウィンドウにSpring Bootの起動ログが出力されます。
![09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292434/653f6c52-36bb-e055-3b83-f45486d7df78.png)

```log:コンソール

  .   ____          _            __ _ _
 /\\ / ___'_ __ _ _(_)_ __  __ _ \ \ \ \
( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \
 \\/  ___)| |_)| | | | | || (_| |  ) ) ) )
  '  |____| .__|_| |_|_| |_\__, | / / / /
 =========|_|==============|___/=/_/_/_/
[32m :: Spring Boot :: [39m              [2m (v2.5.2)[0;39m

[2m2021-07-06 23:45:47.817[0;39m [32m INFO[0;39m [35m7592[0;39m [2m---[0;39m [2m[           main][0;39m [36mcom.example.demo.DemoApplication        [0;39m [2m:[0;39m Starting DemoApplication using Java 1.8.0_202 on yasushi-PC with PID 7592 (C:\DK\pleiades-2021-06-java\pleiades\workspace\demo\target\classes started by yasushi in C:\DK\pleiades-2021-06-java\pleiades\workspace\demo)
[2m2021-07-06 23:45:47.820[0;39m [32m INFO[0;39m [35m7592[0;39m [2m---[0;39m [2m[           main][0;39m [36mcom.example.demo.DemoApplication        [0;39m [2m:[0;39m No active profile set, falling back to default profiles: default
[2m2021-07-06 23:45:48.471[0;39m [32m INFO[0;39m [35m7592[0;39m [2m---[0;39m [2m[           main][0;39m [36mo.s.b.w.embedded.tomcat.TomcatWebServer [0;39m [2m:[0;39m Tomcat initialized with port(s): 8080 (http)
[2m2021-07-06 23:45:48.479[0;39m [32m INFO[0;39m [35m7592[0;39m [2m---[0;39m [2m[           main][0;39m [36mo.apache.catalina.core.StandardService  [0;39m [2m:[0;39m Starting service [Tomcat]
[2m2021-07-06 23:45:48.479[0;39m [32m INFO[0;39m [35m7592[0;39m [2m---[0;39m [2m[           main][0;39m [36morg.apache.catalina.core.StandardEngine [0;39m [2m:[0;39m Starting Servlet engine: [Apache Tomcat/9.0.48]
[2m2021-07-06 23:45:48.543[0;39m [32m INFO[0;39m [35m7592[0;39m [2m---[0;39m [2m[           main][0;39m [36mo.a.c.c.C.[Tomcat].[localhost].[/]      [0;39m [2m:[0;39m Initializing Spring embedded WebApplicationContext
[2m2021-07-06 23:45:48.543[0;39m [32m INFO[0;39m [35m7592[0;39m [2m---[0;39m [2m[           main][0;39m [36mw.s.c.ServletWebServerApplicationContext[0;39m [2m:[0;39m Root WebApplicationContext: initialization completed in 682 ms
[2m2021-07-06 23:45:48.758[0;39m [32m INFO[0;39m [35m7592[0;39m [2m---[0;39m [2m[           main][0;39m [36mo.s.b.a.w.s.WelcomePageHandlerMapping   [0;39m [2m:[0;39m Adding welcome page template: index
[2m2021-07-06 23:45:48.852[0;39m [32m INFO[0;39m [35m7592[0;39m [2m---[0;39m [2m[           main][0;39m [36mo.s.b.w.embedded.tomcat.TomcatWebServer [0;39m [2m:[0;39m Tomcat started on port(s): 8080 (http) with context path ''
[2m2021-07-06 23:45:48.859[0;39m [32m INFO[0;39m [35m7592[0;39m [2m---[0;39m [2m[           main][0;39m [36mcom.example.demo.DemoApplication        [0;39m [2m:[0;39m Started DemoApplication in 1.337 seconds (JVM running for 1.833)
```

http://localhost:8080/ にアクセスすると、「ようこそ！Spring boot + Thymeleafへ！」のページが表示されます。
![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292434/cc30cc8a-578d-390c-5b30-5c60053a6581.png)

コンソールウィンドウの以下の停止ボタンをクリックすると、Spring Boot アプリケーションが停止します。
![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292434/a6ff245a-6885-fdce-aeab-cd86e5101225.png)

![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292434/e0e317a3-7460-0659-e709-ed10b19dc86f.png)

---

以上

次回はページからページの遷移、遷移時のパラメータの受け渡しを試してみたいと思います。
【[「Spring Tool Suite」を使用して「Spring boot + Thymeleaf」でWeb画面を作成し画面遷移（ページ遷移）をさせる](https://qiita.com/yasushi-jp/items/a1a4c50e394c57449035 "「Spring Tool Suite」を使用して「Spring boot + Thymeleaf」でWeb画面を作成し画面遷移（ページ遷移）をさせる")】