Thymeleaf構文一覧

2023/6/29
V2にて追加されていた機能の説明を追記しました。

• th:switch/th:case
• th:remove=”all-but-first”

th:field

サブミットする場合に指定

th:field=”${form.userId}”

th:text

画面へ文字列を出力する

<span th:text=”${form.userName}”>テスト</span>

結果

<span>しょぼーん太郎</span>

上記”テスト”の部分は、th:textによる出力が優先される。
そのため、プロトの状態のときはタグ内にサンプルデータを書いておき、
実際にコーディングする際は、そのままThymeleafの属性を追加するだけでよい。

th:utext

HTMLとして出力する場合はこちら。

ただし、スクリプトなどを書いてしまうと、その通り実行されてしまうため、入力値を出力する箇所での使用はオススメしません。

th:value

テキストボックスなどの値にセットする場合に使用する

<input type=”text” th:value=”${form.textValue}” />

結果

<input type=”text” value=”1″ />

th:object

指定したタグの中でthymeleafを使用する際に、変数名を省略できる

<form th:object=”${form}”>
<span th:text=”${userName}”>テスト</span>
</form>

結果

<form>
<span>しょぼーん太郎</span>
</form>

th:action

formタグのaction属性をThymeleafで記述する場合に使用する。
URLを指定する場合、@で記述することで適切なURLを返却するようになる

<form th:action=”@{/top/}”></form>

結果（コンテキストルート＝colos）

<form action=”/colos/top/”></form>

th:if

式がtrueとなる場合にのみ、該当のタグを出力する

<span th:if=”${form.userId == null}”>ユーザIDがありません。</span>
<span th:if=”${form.userId != null}” th:text=”${form.userName}”>テスト</span>

結果

formクラスのuserIdがNULLの場合：<span>ユーザIDがありません。</span>
formクラスのuserIdがNULLでない場合：<span>しょぼーん太郎</span>

th:each

配列・リストをループ処理する場合に使用する。
（ここでは、Stringの配列と過程）

th:each=”ループ中の変数名, ステータスが格納される変数名 : ${ループする配列}”

<ul>
　<li th:each=”${str, status: form.userList}” th:text=”${str.userName + status.count}”></li>
</ul>

結果

<ul>
　<li>しょぼーん太郎1</li>
　<li>しょぼーん太郎2</li>
　<li>しょぼーん太郎3</li>
</ul>

使えるステータスは以下の通り

th:switch/th:case

Javaのswitch文と同じで、条件に一致するcaseのみを出力します。
th:ifを条件分用意するのと同じです。

<div th:switch="${str}">
  <span th:case="'a'">変数strには、"a"がセットされています。</span>
  <span th:case="'b'">変数strには、"b"がセットされています。</span>
  <span th:case="'c'">変数strには、"d"がセットされています。</span>
  <span th:case="*">変数strには、a,b,c以外がセットされています。</span>
</div>

th:switchでセットした変数を、th:caseにて判定します。
th:caseでは、文字列は”(シングルクォート)で囲み、*が指定されている場合はデフォルト値（該当しない）の判定を行います。

th:remove=”all-but-first”

プロトタイプ等で用意したテーブルデータを無視する仕組みです。

<table th:remove="all-but-first">
  <tr th:each="user : ${users}">
    <td th:text="${user.name}"></td>
  </tr>
  <tr>
    <td>佐藤</td>
  </tr>
  <tr>
    <td>鈴木</td>
  </tr>
  <tr>
    <td>高橋</td>
  </tr>
</table>

th:remove=”all-but-first”を指定すると、1行目以外の項目をすべて無視します。
プロトタイプで作成したデータ等を残したまま、実際の製造を行えます。

上記例では、1行目の<tr>タグが出力対象となり、
2行目以降の<tr>タグが無視されるようになります。

th:blockタグ

HTMLとして出力されない、Thymeleaf専用のタグ

<th:block th:if=”${form.userId != null}”>
　<span th:text=”${form.userName}”></span>
</th:block>

結果

form.userId == true：<span th:text=”${form.userName}”></span>
form.userId != true：何も出力されない

Date型を文字列にフォーマットする場合

Java側でDate型を保持しておき、HTMLに出力する際は文字列にしたい場合に使用する。
文字列日付から文字列日付へのフォーマットを行いたい場合、Java側でDateで持たせておく必要がある。

${#dates.format(form.today, ‘yyyy/MM/dd’)}

結果

2021/12/31

数値をカンマ区切りにして出力

Java側でIntegerなどの数値クラスを保持しておき、HTMLに出力する際はカンマ区切りに変換したい場合に使用する。

第2引数で1以上を指定した場合、その桁数を保証する。
指定桁数に満たない場合は、先頭0埋めされる。

${#numbers.formatInteger(form.price, 0, ‘COMMA’)}

結果

123,456,789