JavaのテンプレートエンジンThymeleafチートシート


Thymeleaf」はJavaの代表的なテンプレートエンジンライブラリです。次の特徴があります。

  • Webサーバから受け取ったデータを埋め込んで表示できる
  • 定義されたロジックをDOM上でXMLタグ・属性で指定。HTMLを静的に表示できる
  • パースされたフィアルをキャッシュしてI/Oを最適化し、高速に表示

🐝 Thymeleafのデータ指定方法

リンク/CSS/JS/画像パスの指定:@{...}

リンク/CSS/JS/画像などのパスの記述するために@{...}の書き方があります。

<link rel="stylesheet" href="../../img/example.jpg" th:href="@{/img/example.jpg}" >

自動でコンテキストパスを補完してくれて、HTMLのレスポンスはつぎのようになります。

<link rel="stylesheet" href="/path/to/img/example.jpg" />

現在のURLを指定:@{''}

前述のパス指定の応用で@{''}とすると現在のURLを指定できます。formを使ってひとつのパスでGetのときは表示、Postのときは登録とアクションを振り分けるときに便利です。

<form action="@{''}" method="post">
</form>

多言語対応:#{...}

多言語対応を行う場合は#{...}を使います。

<p th:text="#{title}">タイトル</p>

ロケールファイルはデフォルトがhello.properties

title=English title

日本語はhello_ja.properties

title=日本語タイトル

HTMLレスポンスは日本語のロケールでは次のようになります。

<p>日本語タイトル</p>

変数展開:${...}

Webサーバ(Controller)から渡された変数の展開は${...}を使います。

<p th:text="${title}">タイトル</p>

HTMLレスポンスはつぎのようになります。

<p>渡された変数のタイトル</p>

コレクションの変数展開:*{...}

コレクションを順番に処理するようなループ処理では次のように記述します。

<ul>
<li th:each="article: ${articleList}" th:object="${article}">
<span th:text="*{title}">タイトル</span>
</li>
</ul>

HTMLレスポンスはつぎのようになります。

<ul>
<li><span th:text="*{title}">最初のタイトル</span></li>
<li><span th:text="*{title}">2個目のタイトル</span></li>
</ul>

リテラル置換:|テキスト ${...}|

|テキスト ${...}|で変数式を組み込んだリテラル置換ができます。

<p th:text="|置換後のテキスト: ${text}|">テキスト</p>

コメント:<!--/* */-->

レスポンスに含めたくないコメントは<!--/* */-->と書きます。

<!--/*-->
<p>ここの内容はレスポンスに含まれません</p>
<!--*/-->

🎉 ロジックを記述するthタグ

条件分岐:th:ifth:unless

<p th:if="${#lists.isEmpty(items)}">アイテムがみつかりませんでした</p>
<p th:unless="${#lists.isEmpty(items)}" />アイテムが見つかりました!</p>

th:ifth:unlessの評価はboolean以外でも次のように評価します。

  • numberchar0null以外
  • Stringで、falseoffnonull以外
  • booleannumbercharString以外でnull以外

多項分岐:th:switch

複数の条件の分岐はth:switchが使えます。"*"でデフォルト値を設定できます。

<div th:switch="${month}">
<p th:case="1 th:text=|${month}月|">Jan</p>
<p th:case="2 th:text=|${month}月|">Feb</p>
<p th:case="*">Other</p>
</div>

繰り返し:th:each

<ul>
<li th:each="article: ${articleList}" th:object="${article}">
<span th:text="*{title}">タイトル</span>
</li>
</ul>

[[$(変数)]]でインライン処理で下記なおすこともできます。

<ul>
<li th:each="article: ${articleList}" th:object="${article}">
<span>[[${article.title}]]</span>
</li>
</ul>

ローカル変数の定義:th:with

th:with=変数=値でテンプレート内で変数を定義できます。

<div th:with="title=hoge,author=john">
<p th:text="${title}">タイトル</p>
<p th:text="${author}">著者</p>
</div>

🎳 HTMLに出力するthタグ

疑似ブロック:th:block

<th:block th:text="${author}"></th:block>

author = John Dueの場合、HTMLレスポンスは次のようになります。

John Due

値がない場合にタグを表示したくない場合はth:blockを使うのがよさそうです。

サニタイズせずに出力:th:untext

th:untextでサニタイズせずに内容を出力できます。Controller側で次のように記述します。

model.addAttribute(title, "<h1>hoge</h1>")

テンプレート側は次のように変数を受け取って出力。

<div th:utext="${title}">タイトル</div>

インライン処理:th:inline

タグの中に変数を埋め込むにはth:inline属性を使い、表示したい変数を[[...]]で囲みます。

<p th:inline="text">Heelo, [[${author]]!</p>

author = John Dueの場合、HTMLレスポンスは次のようになります。

<p>Hello, John Due</p>

👽 フォームに関すするthタグ

フォームの入力値管理:th:field

フォームのinputタグのid/name属性の生成や戻る遷移時のvalueの設定はth:fieldを使います。

<form method="post" action="#" th:action="@{'/article/create'}" th:object="${form}">
<input type="text" th:field="*{name}" />
</form>

生成されるHTMLは次のようになります。

<form method="post" action="/article/create">
<input type="text" class="form-control" id="name" name="name" value="" />
</form>

🗽 クラス定義に関するthタグ

動的なCSSクラスの定義:th:class

th:classで動的にCSSクラスを設定できます。(HTMLのclassを上書きします)

<li th:class="${#strings.contains(content.language,'JP')} ? 'active' : ''">

動的にCSSクラスを追加:th:classappend

th:classappendで動的にクラスを追加できます。

<a href="#" class="baseclass" th:classappend="${isAdmin} ? 'adminclass' : 'userclass'">Go to xxx</a>

🐰 サポート記法

三項演算子

次のように三項演算子で値をセットできます。

<tr th:class="${row.even}? 'even' : 'odd'">
...
</tr>

条件を満たさなければnullをセットすることもできます。(三項演算子の最後要素を省略できます)

<tr th:class="${row.even}? 'alt'">
...
</tr>

nullの場合のデフォルト値:?:

?:を使うと、変数の値がnullの場合はデフォルト値を表示できます。

<p th:text="${title}?: 'unknown'">タイトル</p>

titlenullの場合のHTMLレスポンスは次のようになります。

<p>unknown</p>

nullでない場合のみチェインを実行:?

値がnull出ない場合のみメソッドチェインを処理していくこともできます。

<td th:text="${user?.address?.city}"></td>

パラメータへのアクセス:param

URLが/article?id=123のパラメータへのアクセスはparam.id[0]を使います。

<p th:text="${param.id[0]}">id</p>

日付フォーマット:dates.format

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

比較演算子

><>=<=が利用可能。ただし<>は利用すべきでないのでgt(>)lt(<)ge(>=)le(<=)not(!)のエイリアスを使うべきです。

<p th:text="6 gt 5">true</p>
<p th:text="6 le 5">false</p>

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

java.util.Dateオブジェクト用のユーティリティメソッド

#datesjava.util.Dateオブジェクト用のユーティリティメソッドです。フォーマット、コンポーネントの抽出などがあります。

利用例 説明
#dates.format(date, 'yyyy/MM/dd HH:mm') 指定されたパターンで日付をフォーマット(HHは24時間表記)
#dates.day(date) 日(1-31)のプロパティを取得
#dates.month(date) 月のプロパティを取得
#dates.createNow() 現在日時の日付オブジェクトを生成
#dates.createToday() ぜんざい日の日付オブジェクトを生成(時間は00:00)

数値オブジェクト用のユーティリティメソッド

#numbersは数値オブジェクト用のユーティリティメソッドです。

利用例 説明
#numbers.formatInteger(num, 1,'COMMA') 整数の最小桁数と3桁ごとの区切り文字を設定

リスト用のユーティリティメソッド

#listsはリスト用のユーティリティメソッドです。

利用例 説明
#lists.isEmpty(list) リストが空かどうかをチェック
#lists.size(list) リストがからかどうかをチェック

🏈 参考リンク

🖥 VULTRおすすめ

VULTR」はVPSサーバのサービスです。日本にリージョンがあり、最安は512MBで2.5ドル/月($0.004/時間)で借りることができます。4GBメモリでも月20ドルです。 最近はVULTRのヘビーユーザーになので、「ここ」から会員登録してもらえるとサービス開発が捗ります!

📚 おすすめの書籍