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><span th:text="*{title}">2個目のタイトルspan>
ul>

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

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

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

コメント：

レスポンスに含めたくないコメントはと書きます。

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

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

条件分岐：th:if、th:unless

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

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

• number、charで0、null以外
• Stringで、false、off、no、null以外
• boolean、number、char、String以外でnull以外

多項分岐：th:switch

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

<div th:switch="${month}">
  <p th:case="1 th:text=|${month}月|">Janp>
  <p th:case="2 th:text=|${month}月|">Febp>
  <p th:case="*">Otherp>
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, "hoge")

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

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

インライン処理：th:inline

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

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

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

<p>Hello, John Duep>

🚌 フォームに関すする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 xxxa>

😸 サポート記法

三項演算子

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

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

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

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

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

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

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

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

<p>unknownp>

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

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

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

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

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

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

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

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

比較演算子

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

<p th:text="6 gt 5">truep>
<p th:text="6 le 5">falsep>

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

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

#datesはjava.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)	リストがからかどうかをチェック

🍣 参考リンク

• 必要最小限のサンプルでThymeleafを完全マスター
• Thymeleafチートシート
• html - Using Thymeleaf when the value is null
• html - Thymeleaf: how to use conditionals to add/remove dynamically a CSS class
• Thymeleaf(+ Spring MVC) におけるフォーム

🖥 VULTRおすすめ

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

📚 おすすめの書籍