study-note

View / テンプレートエンジン（Thymeleaf）

基本構文

テンプレートエンジンThymeleafを使って、ControllerからView（HTML）にデータを渡し、動的なページを作成する
データの流れ：Controller → Model → View

Controller側

package com.example.demo.controller;

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

@Controller
public class GreetingController {

    @GetMapping("/greet")
    public String greet(Model model) {
        model.addAttribute("name", "ユーザーさん");
        return "greet"; // templates/greet.html を表示
    }
}

Model：Viewに値を渡すデータのコンテナ
- addAttribute("key", value)で渡す

Thymeleaf

greet.html：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Greeting</title>
</head>
<body>
    <h1 th:text="'こんにちは、' + ${name} + '！'"></h1>
</body>
</html>

結果：こんにちは、ユーザーさん！

Thymeleafの主な構文

th:text：テキストを埋め込む
```
<p th:text="${msg}"></p>
```
th:href：リンクのパスを設定
```
<a th:href="@{/home}">Home</a>
```
th:if, th:unless：条件分岐
```
<p th:if="${login}">ようこそ</p>
```

th:each：ループ

<li th:each="item : ${list}" th:text="${item}"></li>

th:<object> / *{}：フォームオブジェクトを参照
```
<input th:field="*{name}">
```

Conroller → View間の値の受け渡し

String

単一の値

Controllerでの書き方
```
model.addAttribute("msg", "Hello");
```
Viewでの書き方
```
${msg}
```

List

配列：リスト

Controllerでの書き方
```
model.addAttribute("list", "users");
```
Viewでの書き方
```
th:each="u : ${list}"
```

Object

DTOやEntity

Controllerでの書き方
```
model.addAttribute("user", user);
```
Viewでの書き方
```
${user.name}
```

→　次：Service / DI（依存性注入）

study-note

View / テンプレートエンジン（Thymeleaf）

目次

基本構文

Controller側

Thymeleaf

Thymeleafの主な構文

Conroller → View間の値の受け渡し

String

List

Object