Thymeleafについて

2024年6月8日 09:47

今回はThymeleafについて記事を書いていこうと思います。

Thymeleafとは？

Thymeleafは、Javaベースのテンプレートエンジンであり、主にサーバーサイドのWebアプリケーションで使用されます。HTMLテンプレートを直接編集できることから、デザインとロジックの分離が容易です。Spring Bootとの組み合わせで非常に強力なツールとなります。

Thymeleafの特徴

WYSIWYG: Thymeleafテンプレートは、HTMLファイルとしてブラウザでそのまま表示可能です。
強力な表現力: 条件分岐、ループ、文字列操作などの豊富な機能を提供。
エクステンシビリティ: カスタムダイアレクトを作成し、機能を拡張することができます。
国際化対応: 複数の言語に対応したアプリケーションの構築が容易。

Thymeleafの基本的な使い方

Spring BootプロジェクトへのThymeleafの追加

まず、Spring BootプロジェクトにThymeleafを追加します。pom.xmlに以下の依存関係を追加します。

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

基本的なテンプレート

Thymeleafのテンプレートは、標準のHTMLファイルに特別な属性を追加することで作成します。以下は、基本的なHTMLテンプレートの例です。
（このテンプレートは、Spring Bootコントローラーで設定したメッセージを表示します。）

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Thymeleaf Example</title>
</head>
<body>
    <h1 th:text="${message}">Hello, Thymeleaf!</h1>
</body>
</html>

コントローラーの設定

次に、Spring Bootコントローラーを設定して、テンプレートにデータを渡します。

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

@Controller
public class GreetingController {

    @GetMapping("/greeting")
    public String greeting(Model model) {
        model.addAttribute("message", "Hello, Thymeleaf!");
        return "greeting";
    }
}

アプリケーションの実行

Spring Bootアプリケーションを実行し、http://localhost:8080/greetingにアクセスすると、テンプレートがレンダリングされて表示されます。

高度なThymeleafの機能

条件分岐

Thymeleafでは、th:ifとth:unless属性を使用して条件分岐を行うことができます。

<p th:if="${user != null}">Welcome, <span th:text="${user.name}">User</span>!</p>
<p th:unless="${user != null}">Welcome, Guest!</p>

ループ

リストやコレクションの要素をループするには、th:each属性を使用します。

<ul>
    <li th:each="item : ${items}" th:text="${item}">Item</li>
</ul>

URLの構築

Thymeleafを使って動的にURLを構築するには、@{}構文を使用します。

<a th:href="@{/path/{id}(id=${item.id})}">Link</a>

まとめ

Thymeleafは、Spring Bootと組み合わせて使用することで、直感的でパワフルなテンプレートエンジンとして機能します。基本的な使い方から高度な機能、カスタマイズまで幅広くサポートしており、JavaベースのWebアプリケーション開発において非常に有用です。
今回はここまでとなります。最後まで閲覧いただきありがとうございます。