Thymeleaf の基礎

2023/08/14

Thymeleaf は、Java で利用できるテンプレートエンジンです。 Thymeleaf と Spring Framework を組み合わせて利用することで、動的な Web ページの構築が可能になります。

このレクチャーでは、Thymeleaf の主要な機能について処理前後のコード例を使って解説します。

Thymeleaf とは

Thymeleaf は、Java で利用できるテンプレートエンジンです。 Spring Framework と統合して使用すると、HTML ファイル内で特別な属性を使用し動的なコンテンツを生成できます。動的コンテンツとは、ユーザーの入力、アクション、セッション、時間、データベースからのクエリなどに基づいてリアルタイムで変更されるウェブページ上の情報や要素のことを指します。たとえば、ページにユーザー名を表示したい場合は、ログインしているユーザーに応じて表示を変える必要があります。このようなコンテンツを動的コンテンツといい、Thymeleaf によって実現できます。

Spring Framework を使った開発でテンプレートエンジンを採用すると以下のようなメリットがあります：

可読性：HTML コードと Java コードを別ファイルとして記述できるため、読みやすいコードになります
保守性：ビューのロジックとビジネスロジックが分離されるため、コードの保守がしやすくなります
再利用性：共通のレイアウトやコンポーネントを再利用できるため、開発効率が向上します

Thymeleaf を使うための設定

Thymeleaf を Spring Boot アプリケーションで利用するときは、build.gradle の dependencies セクションに spring-boot-starter-thymeleaf の依存関係を追加します。

dependencies {
	...
	implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
	...
}

また、Thymeleaf の機能を HTML で利用するときは、th:text のように th というプレフィクスを記述します。この th というネームスペースを HTML タグに定義する必要があります。

<!DOCTYPE html>
<html lang="ja" xmlns:th="http://www.thymeleaf.org">

Thymeleaf の主要な機能

ここらは、Spring Boot のアプリケーション開発でよく利用する Thymeleaf の記法を紹介していきます。

`th:href`

リンク先の URL を動的に生成します。 th:href の値は @{} でパスを囲って記述します。

処理前のコード：

<a th:href="@{/home}">ホームページへ</a>

処理後のコード：

<a href="/home">ホームページへ</a>

`th:text`

HTML 要素のテキスト内容を動的に設定します。例として、Spring の Controller で message 変数に "こんにちは、世界！" という値が設定されている場合を見てみましょう。

model.addAttribute("message", "こんにちは、世界！");

処理前のコード：

<p th:text="${message}">デフォルトメッセージ</p>

処理後のコード：

<p>こんにちは、世界！</p>

`th:each`

コレクションや配列などの要素を反復処理して表示します。例では、items 変数に ["アイテム1", "アイテム2", "アイテム3"] というリストが設定されているとします。

model.addAttribute("items", List.of("アイテム1", "アイテム2", "アイテム3"));

処理前のコード：

<ul>
    <li th:each="item : ${items}" th:text="${item}">リストアイテム</li>
</ul>

処理後のコード：

<ul>
    <li>アイテム1</li>
    <li>アイテム2</li>
    <li>アイテム3</li>
</ul>

`th:object`

オブジェクトのフィールドを参照したいときは、th:text="${user.name}" のように記述できますが、画面の内容によっては、${user.　} と繰り返し記述する必要がでてきます。このようなときは、th:object を使うと重複した記述を削減できます。 th:object は、指定されたオブジェクトをローカルコンテキストにバインドします。バインドされた変数のフィールドには、*{ } のように記述するアスタリスク記法でアクセスできるようになります。

例として、persons 変数に人物オブジェクトのリストが設定されている場合を考えます。このとき、th:object="person" とすると、div タグ内で person のフィールドにアスタリスク記法でアクセスできるようになります。

処理前のコード：

<div th:each="person : ${persons}" th:object="${person}">
    <p>名前: <span th:text="*{name}">名前</span></p>
    <p>年齢: <span th:text="*{age}">年齢</span></p>
</div>

処理後のコード：

<div>
    <p>名前: <span>Alice</span></p>
    <p>年齢: <span>30</span></p>
</div>
<div>
    <p>名前: <span>Bob</span></p>
    <p>年齢: <span>25</span></p>
</div>

まとめ：Thymeleaf を使って効率的な開発をしよう

Thymeleaf と Spring Framework を組み合わせることで、非常に効率的なWebアプリケーション開発が可能です。 th: から始まる記法はたくさんありますので、一度に覚えようとする必要はありません。必要なときに、その都度知識を増やしていければ大丈夫です。

このレクチャーでは、th:href, th:text, th:each, th:object を紹介しました。少しずつ覚えていきましょう。

Thymeleaf とは

Thymeleaf を使うための設定

Thymeleaf の主要な機能

th:href

th:text

th:each

th:object

まとめ：Thymeleaf を使って効率的な開発をしよう

🎁 ニュースレターに登録しませんか？🎁

`th:href`

`th:text`

`th:each`

`th:object`