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 />

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

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

<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:ifth:unless:条件分岐

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

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>

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:with:ローカル変数の定義

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

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

th:block:疑似ブロック

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

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

John Due

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

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

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

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

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

<p>unknown</p>

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

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

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

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

#lists.isEmptyのようにいくつかのユーティリティオブジェクトを利用できます。

🚌 参考リンク

📚 おすすめの書籍