Thymeleafを使ってみよう！

今回はWebアプリケーションを作る上で超重要な「画面」について解説していくね！ Spring Bootで画面を作る方法はいろいろあるけど、今回は特によく使われる**Thymeleaf（タイムリーフ）**っていうテンプレートエンジンを紹介するよ。

Thymeleafって何？

「テンプレートエンジン」って聞くと難しく感じるかもしれないけど、要はHTMLにJavaのデータをごにょごにょっと埋め込んで、動的なWebページを作るための道具なんだ。

例えば、

「こんにちは、〇〇さん！」

って表示したいとき、〇〇の部分はユーザーの名前によって変わるよね？そういうときにThymeleafが活躍するんだ。

簡単に言うと、HTMLファイルの中に特別な書き方（Thymeleafの記法）でJavaの変数とか条件分岐とかを書いておくと、Spring BootがそのHTMLを処理して、最終的なWebページを生成してくれるイメージだよ。

なんでThymeleafがいいの？

Thymeleafの魅力はいくつかあるんだけど、特にJava初心者さんにとって嬉しいポイントはこれ！

HTMLをそのまま編集できる感覚！ Thymeleafの記法はHTMLのタグの中に属性として書くことが多いから、普段HTMLを書いてる感覚でコードが書けるんだ。他のテンプレートエンジンだとHTMLの中に独自の記法を埋め込むから、HTMLとして見るとちょっと変に見えちゃうこともあるんだけど、ThymeleafはHTMLとして見ても自然だから、デザイナーさんとの連携もスムーズだよ。
IDE（開発環境）のサポートが手厚い！ IntelliJ IDEAとかVS Codeとかの統合開発環境だと、Thymeleafの記法に対する補完機能とかエラーチェックがしっかり効くから、ミスを減らせて開発がはかどるんだ。
セキュリティも考慮されてる！ エスケープ処理（悪意のあるコードが埋め込まれるのを防ぐ処理）を自動でやってくれるから、セキュリティ面でも安心だよ。

Thymeleafを使ってみよう！

じゃあ実際にThymeleafを使ってみよう！前回のSpring Bootプロジェクトをベースにするよ。

1. Thymeleafの追加

まず、pom.xml（Mavenを使っている場合）またはbuild.gradle（Gradleを使っている場合）にThymeleafの依存関係を追加するよ。

Mavenの場合 (pom.xml)

XML

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
</dependencies>

Gradleの場合 (build.gradle)

Gradle

dependencies {
    // 他の依存関係
    implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
}

これを追加したら、プロジェクトをリロードしてね。

2. コントローラーの作成

次に、Thymeleafに渡すデータを用意するコントローラーを作成するよ。

src/main/java/com/example/demo/HelloController.java (もしプロジェクト名がdemoなら)

Java

package com.example.demo;

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

@Controller
public class HelloController {

    @GetMapping("/hello")
    public String hello(Model model) {
        model.addAttribute("message", "こんにちは、Thymeleafの世界へようこそ！");
        model.addAttribute("userName", "太郎");
        return "hello"; // hello.html を表示する
    }

    @GetMapping("/users")
    public String users(Model model) {
        String[] userList = {"Alice", "Bob", "Charlie"};
        model.addAttribute("users", userList);
        return "users"; // users.html を表示する
    }
}

このコントローラーでは、Modelというオブジェクトを使って、HTMLに渡したいデータをセットしているよ。

model.addAttribute("message", "こんにちは、Thymeleafの世界へようこそ！");：messageという名前で文字列をHTMLに渡す。
model.addAttribute("userName", "太郎");：userNameという名前で文字列をHTMLに渡す。
return "hello";：src/main/resources/templates/hello.htmlというファイルを表示するという意味だよ。

3. Thymeleafテンプレートの作成

最後に、表示するHTMLファイルを作成するよ。ファイルはsrc/main/resources/templates/フォルダの中に置くのがルールだよ。

src/main/resources/templates/hello.html

HTML

<!DOCTYPE html>
<html lang="ja" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Thymeleafの例</title>
</head>
<body>
    <h1 th:text="${message}">ここにメッセージが表示されます</h1>
    <p>ユーザー名: <span th:text="${userName}"></span></p>

    <h2>Thymeleafの基本的な使い方</h2>
    <h3>変数の表示 (`th:text`)</h3>
    <p>これはThymeleafを使って表示しています: <span th:text="${message}"></span></p>
    <p>ユーザーの名前は <span th:text="${userName}"></span> です。</p>

    <h3>条件分岐 (`th:if`, `th:unless`)</h3>
    <p th:if="${userName == '太郎'}">あなたの名前は太郎さんですね！</p>
    <p th:unless="${userName == '太郎'}">あなたの名前は太郎さんではありませんね。</p>

    <h3>繰り返し (`th:each`)</h3>
    <p>ユーザーリストはこちら（/usersにアクセスすると見れるよ）：</p>
    <p>
        <a href="https://moritama321.hatenablog.com/" target="_blank">前回の記事はこちら</a>
    </p>
</body>
</html>

src/main/resources/templates/users.html

HTML

<!DOCTYPE html>
<html lang="ja" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>ユーザーリスト</title>
</head>
<body>
    <h1>登録ユーザー一覧</h1>
    <ul>
        <li th:each="user : ${users}" th:text="${user}"></li>
    </ul>
    <p>
        <a href="https://moritama321.hatenablog.com/" target="_blank">前回の記事はこちら</a>
    </p>
</body>
</html>

ポイントはこれだよ！

xmlns:th="http://www.thymeleaf.org": HTMLタグの<html>にこの属性を追加することで、Thymeleafの記法が使えるようになるよ。
th:text="${message}": コントローラーから渡されたmessage変数の値を、このHTML要素のテキストとして表示するよ。$は変数を参照するときの記号だね。
th:if="${userName == '太郎'}": userName変数が「太郎」と等しい場合に、この要素が表示されるよ。条件分岐だね。
th:unless="${userName == '太郎'}": userName変数が「太郎」と等しくない場合に、この要素が表示されるよ。th:ifの逆だね。
th:each="user : ${users}": usersという配列（リスト）の要素を一つずつ取り出して、userという変数に格納しながら、この<li>要素を繰り返し生成するよ。ループ処理だね。