【thymeleafの書き方】

2024年9月3日 23:00

「Thymeleaf」とは

「Thymeleaf」とは、「テンプレートエンジン」と呼ばれる Java のライブラリです。このライブラリを開発環境に追加することで、HTML をベースにした書式のソースコード（テンプレート）を書いて、動的な処理結果を出力できます。
Thymeleaf の処理は、主に下記 2 種類の書式を HTML 書式と組み合わせて記述します。
❑ 属性：HTML タグの属性として、「th:text」や「th:value」などの形式で記述する。
❑ 式：属性の値として、「${}」や「@{}」などの形式で記述する。

１、属性を利用するための準備

<html xmlns:th="http://www.thymeleaf.org">

２、テキストの出力

テキストを出力する際は、「th:text」属性を使用します。この属性を使用すると、式の評価結果をタグのボディに埋め込みます。また、出力する際、自動的にエスケープ処理が行われます（「<」や「>」のように、HTML のコードとして認識される記号を、文字列情報として出力します）。

<div th:text="${item.id}" ></div>

また、テキストをエスケープせずに出力したい場合は「th:utext」属性を使用します。

<div th:utext="${item.id}" ></div>

３、任意の属性への値の付与

任意の属性に値を付与する際は、「th:attr」属性を使用します。この属性の値に「設定する属性名=値」という形式で記述します。そうすることで、「th:attr」属性が記述されたタグの属性の値を変更できます。

１、href属性への値の付与

<a href="dammy" th:attr="href=@{.items}" >リンク</a>

複数の属性に値を付与したい場合は、カンマ区切りのリストを指定する

２、scr属性、title属性、alt属性への値の付与

<img src="/sample.png" th:attr="src=@{/images/sample.png}, title=#{title}, alt=#{alt}" />

４、属性値の前後への値の連結

既存の属性値の前後に別の値を連結したい場合は、「th:attrprepend」属性と「th:attrappend」属性を使用します。「th:attrprepend」属性は属性値の前に連結し、「th:attrappend」属性は属性値の後ろに連結します。

１、th:attrappendの書き方

<div class="area_" th:attrappend="class=${num}"></div>

また、特殊なものとして、「class」属性の属性値に連結する「th:classappend」属性と、「style」属性の属性値に連結する「th:styleappend」属性がある。

２、th:classappendの書き方

<div class="area_" th:classappend="${num}"></div>

５、固定値ブール属性への値の追加

HTML では「checked」属性や「selected」属性のように、「checked」や「selected」などの固定値を持つか、属性自体が存在しないかのどちらかしかない特殊な属性があります。このような属性を「固定値ブール属性」と呼びます。
Thymeleaf では、このような属性に対応する属性も提供されています。たとえば、「checked」属性に対応する属性として「th:checked」属性が、「selected」属性に対応する属性として「th:selected」属性があります。
各属性の値には条件式を記述します。その条件式の結果が true の場合、対応する属性が追加されます。
また、false の場合は追加されません。

１、cheked属性の書き方

<input type="radio" name="gender" value="1" th:caheked="${gender == 1}">男性
<input type="radio" name="gender" value="2" th:caheked="${gender == 2}">女性

上記のサンプルコードでは、gender の値が 1 の場合は男性が、2 の場合は女性が初期選択された状態となります。

２、selected属性の書き方

下記のサンプルコードでは、category_idの値が１の場合は営業部が、２の場合は経理部が、３の場合は総務部が初期選択された状態となります。

<select name="dept_id">
    <option value="1" th:selected="${category_id == 1}">営業部</option>
    <option value="2" th:selected="${category_id == 2}">経理部</option>
    <option value="3" th:selected="${category_id == 3}">総務部</option>
</select>

制御系属性

Thymeleaf は、繰り返し処理や条件分岐のような、制御系の処理を実行するための属性「制御系属性」も提供している。

１、th:each属性

Thymeleaf では「th:each」属性を使用することで、ビュー内に繰り返し処理を実装できます。
「th:each」属性には、値として「繰り返し変数 : 被繰り返し変数」を設定します。「被繰り返し変数」
とは、繰り返す対象のリストのことを指します。また、「繰り返し変数」とは、そのリストに格納された
情報を 1 件ずつ格納する変数のことを指します。
また、繰り返し変数の値は「th:text」属性を使用して参照できます。
これらの属性を使用することで、リスト中の情報を一覧表示することが可能となります。

<table>
    <tr>
        <th>商品番号</th>
        <th>商品名</th>
        <th>価格</th>
    </tr>
    <tr th:each="item: ${items}">
        <td th:text="${item.id}"></td>
        <td th:text="${item.name}"></td>
        <td th:text="${item.price}"></td>
    </tr>
</table>

【属性】ステータス変数

「th:each」属性で宣言した繰り返し変数の後ろにカンマ区切りで 2 つ目の変数を宣言できます。このとき、2 つ目の変数は「ステータス変数」として扱われます。「ステータス変数」とは、繰り返し処理の状態を保有したオブジェクトを参照している変数のことです。ステータス変数が参照するオブジェクトのフィールドを呼び出すことで、各情報を参照できます。
フィールドは、ステータス変数の後ろにピリオド区切りで記述します。下表にステータス変数のフィールドを記載します。

フィールド名　　　　　説明

index 　　　　　　　現在インデックス（０からスタートするループ回数）
count　　　　　　　現在インデックス（１からスタートするループ回数）
siza　　　　　　　　要素数
current　　　　　　　繰り返し中の「繰り返し変数」
even/odd　　　　　　現在の繰り返し処理が偶然か奇数か（真偽値）
first　　　　　　　　現在の繰り返し処理が最初かどうか（真偽値）
last 　　　　　　　　現在の繰り返し処理が最後かどうか（真偽値）

<table>
    <tr>
        <th>No</th>
        <th>商品番号</th>
        <th>商品名</th>
        <th>価格</th>
    </tr>
    <tr th:each="item, st: ${items}">
        <td th:text="${st.count}"></td>
        <td th:text="${item.id}"></td>
        <td th:text="${item.name}"></td>
        <td th:text="${item.price}"></td>
    </tr>
</table>

また、ステータス変数を明示的に指定しない記述も可能です。その場合、繰り返し変数の後ろに「Stat」を付けた変数名を Thymeleaf は自動的に作成します。

ステータス変数を自動作成した場合

<table>
    <tr>
        <th>No</th>
        <th>商品番号</th>
        <th>商品名</th>
        <th>価格</th>
    </tr>
    <tr th:each="item: ${items}">
        <td th:text="${itemStat.count}"></td>
        <td th:text="${item.id}"></td>
        <td th:text="${item.name}"></td>
        <td th:text="${item.price}"></td>
    </tr>
</table>

２、「th:if」属性

ある条件が満たされる場合のみ特定の情報を出力したいという場合は、「th:if」属性を使用する。条件式は属性値に設定する。

書き方：例１

<span th:if="${#fields.hasErrors('name')}" th:errors="*{name}" style="color:red"></span>

書き方：例２

<div th:if="${session.bean == null} ">セッション中のスコープ変数beanの値がnullの場合</div>

また、「th:if」属性の値がnullでない場合にtrueと判断する式のルールは以下の通りです。
※値がnullの場合はfalseと判断します。

・boolean型のtrue
・０以外の数値
・０以外の文字
・「false」、「off」、「no」以外の文字列
・真偽値、数値、文字、文字列以外の場合

また、「th:if」とは逆に、条件を満たさない場合に特定の情報を出力する属性として「th:unless」属性があります。

<span th:unless="${#fields.hasErrors('name')}" th:text="正常値です"></span>

３、「th:switch」属性
thymeleafの条件分岐処理はif文のような処理以外に、switch文のような処理も記述できます。switch 文は「th:switch」属性と「th:case」属性を使用します。「th:switch」属性には、評価の対象を記述します。そして、「th:case」属性には値を記述します。いずれかの「th:case」属性の値が「th:switch」属性の値と一致する場合、対象の「th:case」属性の判定結果は true と評価され、対象のタグの処理結果が出力されます。そして、それ以降の「th:case」属性は全て false と評価されます。
また、「いずれの値にも一致しない場合」という条件で判定したい場合は「th:case="*"」と記述します。

<div th:switch="${user.deptId}">
    <div th:case="1">開発部</div>
    <div th:case="2">営業部</div>
    <div th:case="*">部署に所属していません</div>
</div>

式と演算子
thymeleafでは、以下のような式、演算子を提供しています。

式の種類

変数式↓

${…}

選択式変数式↓

*{…}

メッセージ式↓

#{…}

リンクURL式

@{・・・}

変数きと基本オブジェクト
式の中で最も利用頻度の高いものが片数式である。式の中で最も利用頻度が多いものが変数式です。変数式にスコープ変数を記述することで、その変数が参照しているデータをビュー内で取得できます。
また、変数式には、自分で定義したスコープ変数以外に、予め機能が決まっている変数を記述すること
もできます。それらの変数は特定のオブジェクトを参照しており、そのオブジェクトのことを「基本オブ
ジェクト」と呼びます。
基本オブジェクトの変数には決められた名前が付けられています。その変数名を式に記述することで、
セッションスコープやリクエストスコープの情報を参照できます。なお、基本オブジェクトの変数名の先
頭には「#」を記述してください。
以下に代表的な基本オブジェクトを記載します。
❑ #httpServletRequest ：リクエストスコープの情報（HttpServletRequest 型）
❑ #httpSession ：セッションスコープの情報（HttpSession 型）
また、リクエストパラメータ、セッションスコープの情報を取得する基本オブジェクトを呼び出す際に
は、変数名の代わりに下記のショートカットを使用できます。
❑ param ：リクエストパラメータを取得
❑ session ：セッションスコープを取得
また、クラスライブラリ内のクラスに関するオブジェクトも、ビュー内で利用できます。これらのオブ
ジェクトを「ユーティリティオブジェクト」と呼びます。
❑ #dates ：java.util.Date のユーティリティオブジェクト
❑ #calendars ：java.util.Calendar のユーティリティオブジェクト
❑ #strings ：java.lang.String のユーティリティオブジェクト
❑ #lists ：java.util.ArrayList のユーティリティオブジェクト
❑ #numbers ：org.thymeleaf.expression.Number のユーティリティオブジェクト
記述例（Date 型の日付情報を「yyyy/MM/dd」の形式で出力したい場合）

<span th:text="${#dates.format(employee.birthday, 'yyyy/MM/dd')}"></span>

記述例（リスト”items”の中身が空かどうかを判定したい場合）

<!-- リストの中身が空の場合の処理 -->
<th:block th:if="${#lists.isEmpty(items)}">
    ・・・
</th:block>

<!-- リストの中身が空ではない場合の処理 -->
<th:block th:if="!${#lists.isEmpty(items)}">
    ・・・
</th:block>

２、リンクURL式
リンク URL 式は、「@{…}」という形式で記述する式で、a タグの href 属性や<form>タグの action 属性などで使用できます。また、URL パス内でも変数式は使用できます。
「{」と「}」の間に「/」から始まる文字列を記述することで、自動的にコンテキストルートまでのURL を発行してくれます。なお、先頭の「/」以降の文字列はコンテキストルート以下の URL として扱われます。
また、URL の末尾に「(」と「)」を記述することで、URL パラメータを指定できます。URL パラメータの値は、自動的に URL エンコードされます。また、複数のパラメータを指定する場合はカンマ区切りで指定できます。
※ 使用しているブラウザが Chrome の場合、アドレスバー上では URL パラメータの値が URL エンコードされずに表示されます。

<a th:href="@{/items(id=$(item.id))}" >[[${item.name}]]</a>

この記事が気に入ったらサポートをしてみませんか？