[Spring Boot]ThymeleafでHelloWorldを表示する

# [Spring Boot]ThymeleafでHelloWorldを表示する

Spring Bootで標準的に利用される Thymeleaf についてまとめてみました。
最初の一歩なので、いつも通り Hello World! から始めていきましょう。

## 1. SpringでThymeleafを使うポイント

大事なポイントは以下の3点のみです。

- Spring Starterプロジェクトで Thymeleaf を追加する
- HTMLファイルは src/main/resource/templates/ に追加する
- HTMLファイルのhtmlタグに xmlns:th="http://www.thymeleaf.org" を追加する

## 2. 目的

Controllerから属性情報（属性名：message）を渡してThymeleaf（hello.html）で表示させてみましょう。

### 2.1. HTMLファイル(Thymeleaf)を作成する

HTMLファイル(hello.html)を以下の手順で作成していきます。単純にEclipseでHTMLファイルを追加する手順と同じです。

1. Ecpliseで src/main/resource/templates/ にHTMLファイル(hello.html)を作成します
2. HTMLファイル(hello.html)のhtmlタグに xmlns:th="http://www.thymeleaf.org" を追加します
3. 属性を表示したい箇所に th:text="${message}" を追加します

このようなHTMLになります。

[hello.html]

```html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <!-- th:textで属性を表示する -->
    <h1 th:text="${message}"></h1>
    <!-- この書き方でも同じ  -->
    <h1>[[${message}]]</h1>
</body>
</html>
```
Spring MVCのControllerを作っていきます。

### 2.2. Controllerを作成する

hello.htmlを表示するControllerを作成します。

1. Ecpliseで src/mian/java にクラス(HelloController.java)を作成します
2. メソッドの引数に Model を指定します
3. Modelに addAttribute　で属性を追加します
3. メソッド(hello)の戻り値に HTMLファイル を指定します（.htmlは不要)

このようなControllerになります。

[HelloController.java]

```java
package com.example.demo;

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

@Controller
@RequestMapping("/hello")
public class HelloController {

	@GetMapping
	public String hello(Model model) {

		//メソッドが呼び出されたかデバッグ表示
		System.out.println("hello.");

		//属性名: message に hello! を設定する
		model.addAttribute("message", "hello!");

		//Thymeleafを呼び出す
		return "hello.html";

		//.htmlを省略してもOK
		//return "hello"
	}
}
```

## 3. 動作確認する

最後に、Springアプリケーションを実行して http://localhost:8080/hello にアクセスして確認します。

## 4. thの記述方法

### 4.1. 変数の書き方

|記述方法|説明|例|
|---|---|---|
|${XX}|一般的な書き方|`${message}`、`${item.id}`|
|*{XX}|選択変数式と呼ばれるもので、th:objectで設定したオブジェクトのプロパティと取り出す書き方。|*{id}|
|@{XX}|リンク式と呼ばれるもので、リンクのURLの書き方|`@{/add}`|

### 4.2. 一覧ショートカット

|やりたいこと|th|例|
|---|---|---|
|テキストを表示|th:text|`<h1 th:text="${message}"></h1>`|
|繰り返し|th:each|`<tr th:each="item : ${itemList}" th:object="${item}">`|
|formタグなどにオブジェクトの中にあるプロパティ（フィールド）の取り出し|th:object|`th:object="${item}"`|
|inputタグにオブジェクトの中にあるプロパティ（フィールド）の設定|th:field|`th:field="*{id}"`|
|formタグのactionの設定|th:action|`<form th:action="@{/list}" th:object="${item}" method="post">`|
|リンク|th:href|`<a th:href="@{/item/add}">新規登録ページに移動</a>`|

## 4.3. リンク

Controllerへのリンクは @{XX} で記載します。

```html
<a th:href="@{/user/add}">新規登録はこちら</a>
```

## 4.4. 繰り返し

th:each で繰り返しを行います。 th:objectも併用して値を取り出します。

```html
<table>
  <tr th:each="user : ${userlist}" th:object="${user}">
      <td th:text="*{id}"></td>
      <td th:text="*{account}"></td>
      <td th:text="*{kanaName}"></td>
      <td th:text="*{kanjiName}"></td>
      <td th:text="${#dates.format(user.createDate, 'yyyy/MM/dd')}"></td>
      <td ><a th:href="@{/user/{id}(id=*{id})}">詳細</a></td>
  </tr>
</table>
```