[Java/Spring Boot]Thymeleaf

Thymeleafとは

ThymeleafはテンプレートにJavaのデータ（コントローラーから渡された変数）を反映させて、内容が動的に変化するHTMLページを生成するために使用されます。

Thymeleaf属性

属性	役割	例
th:text	文字列を表示	<p th:text="${name}"></p>
th:if	条件がtrueなら表示	<div th:if="${flag}">表示</div>
th:unless	条件がfalseなら表示	<div th:unless="${flag}">非表示</div>
th:switch	値に基づいて分岐	<div th:switch="${status}">
th:each	コレクションをループ処理	<li th:each="item : ${items}">

th:switchの例

model.addAttribute("status", "SUCCESS");//成功しました

<div th:switch="${status}">
  <p th:case="SUCCESS">成功しました！</p>
  <p th:case="FAIL">失敗しました。</p>
  <p th:case="*">不明なステータス</p>
</div>

th:eachの例

model.addAttribute("items", List.of("リンゴ", "バナナ"));

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

出力結果

<ul>
  <li>リンゴ</li>
  <li>バナナ</li>
</ul>

動的なパラメータを埋め込んでパスを指定する方法

@{/images/{fileName}}でパスを指定します。ここでの{fileName}は動的に置き換わり、(fileName=${catImage.fileName})で値を置換します。

<img id="image" 
     th:src="@{/images/{fileName}(fileName=${catImage.fileName})}" 
     th:alt="${catImage.title}">

ユーティリティオブジェクト

Thymeleafには、テンプレート内で利用できるユーティリティオブジェクトがいくつか組み込まれており、文字列操作などをテンプレート上で柔軟に処理できます。

#string

#stringsユーティリティオブジェクトは、テンプレート内で文字列操作を行えます。

//大文字変換
<p th:text="${#strings.toUpperCase(name)}"></p>
//小文字変換
<p th:text="${#strings.toLowerCase(name)}"></p>
//長さ取得
<p th:text="${#strings.length(name)}"></p>
//空文字列かを判定(true or false)
<p th:text="${#strings.isEmpty(name)}">空文字です</p>
//部分文字列を取得(インデックス1から3まで(2文字),開始インデックスのみでも可能)
<p th:text="${#strings.substring(name, 1, 3)}"></p>
//文字列の比較(true)
<p th:text="${#strings.equals(name1, name2)}"></p>

#numbers

#numbersユーティリティオブジェクトは、数値のフォーマットや整形処理を行えます。

//3桁区切りでカンマを表示
<p th:text="${#numbers.formatInteger(number, 3, 'COMMA')}"></p>
//小数点の桁数を指定してフォーマット
//(number, 最小の整数桁数（不足分は0）, 最小の小数桁数（不足分は0）, 最大の小数桁数（超えた場合は丸める）)
<p th:text="${#numbers.formatDecimal(3.5, 2, 2, 2)}"></p> //出力　03.50

#temporals

#temporalsユーティリティオブジェクトは、日付や時間を整形・操作するためのユーティリティオブジェクトです。

//日時フォーマット
<span th:text="${#temporals.format(dateTime, 'yyyy-MM-dd HH:mm:ss')}"></span> //出力 2025-05-10 14:30:45
//値の取得 .day() / .month() / .year()
<span th:text="${#temporals.month(dateTime)}"></span> //出力 5

#lists

#listsは、JavaのListに対する便利な操作をテンプレート上で簡単に行えるユーティリティオブジェクトです。

関数	説明
size(list)	リストの要素数を返す
isEmpty(list)	空リストかどうか判定
isNotEmpty(list)	要素が1つ以上あるか
contains(list, element)	指定要素を含んでいるか
containsAll(list1, list2)	list1 が list2 のすべての要素を含むか
sort(list)	昇順ソート
reverse(list)	リストを逆順にして返す
add(list, item)	要素を追加した新しいリストを作成
remove(list, item)	指定要素を除いた新しい新リストを作成
toList(array)	配列からリストに変換

使用例

//　productListの要素数を表示
<p th:text="${#lists.size(productList)} + ' 件の商品があります'"></p>
//空リストかどうかを判定
<div th:if="${#lists.isEmpty(users)}">ユーザーがいません</div>
// 特定の値が含まれているか
<p th:if="${#lists.contains(roles, 'ADMIN')}">管理者</p>
// リストを逆順にして表示
<ul>
  <li th:each="msg : ${#lists.reverse(messages)}" th:text="${msg}"></li>
</ul>
//ソートして表示
<ul>
  <li th:each="name : ${#lists.sort(names)}" th:text="${name}"></li>
</ul>

#maps

#mapsユーティリティオブジェクトで、JavaのMapに対するキー,値などの操作や条件分岐などをテンプレート上で行えます。

関数名	説明
size(map)	要素数を返す
isEmpty(map)	空かどうか
isNotEmpty(map)	空でないかどうか
containsKey(map, key)	指定キーを含むか
containsValue(map, val)	指定値を含むか
get(map, key)	キーに対応する値を取得
keys(map)	キーの一覧を取得
values(map)	値の一覧を取得
entries(map)	エントリの一覧を取得

使用例

//値の取得
<p th:text="${#maps.get(userMap, 'name')}"></p>
//キーの存在チェック
<p th:if="${#maps.containsKey(userMap, 'email')}">メールアドレスが存在する</p>
// Mapの全エントリを表示
<ul>
  <li th:each="entry : ${#maps.entries(userMap)}">
    <strong th:text="${entry.key}">キー</strong> :
    <span th:text="${entry.value}">値</span>
  </li>
</ul>
// キー一覧を表示
<ul>
  <li th:each="key : ${#maps.keys(userMap)}" th:text="${key}"></li>
</ul>
//値一覧を表示
<ul>
  <li th:each="val : ${#maps.values(userMap)}" th:text="${val}"></li>
</ul>