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

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

🍄Thymeleafのデータ指定方法

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

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

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

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

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

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

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

<formaction="@{''}"method="post">
form>

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

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

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

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

title=English title

日本語はhello_ja.properties：

title=日本語タイトル

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

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

変数展開：${...}

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

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

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

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

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

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

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

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

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

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

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

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

コメント：

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

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

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

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

<pth:if="${#lists.isEmpty(items)}">アイテムがみつかりませんでしたp>
<pth: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が使えます。"*"でデフォルト値を設定できます。

<divth:switch="${month}">
<pth:case="1 th:text=|${month}月|">Janp>
<pth:case="2 th:text=|${month}月|">Febp>
<pth:case="*">Otherp>
div>

繰り返し：th:each

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

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

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

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

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

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

🎳HTMLに出力するthタグ

疑似ブロック：th:block

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

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

John Due

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

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

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

model.addAttribute(title,"
hoge
")

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

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

インライン処理：th:inline

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

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

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

<p>Hello, John Duep>

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

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

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

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

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

<formmethod="post"action="/article/create">
<inputtype="text"class="form-control"id="name"name="name"value="" />
form>

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

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

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

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

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

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

<ahref="#"class="baseclass"th:classappend="${isAdmin} ? 'adminclass' : 'userclass'">Go to xxxa>

😸サポート記法

三項演算子

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

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

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

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

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

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

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

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

<p>unknownp>

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

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

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

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

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

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

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

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

比較演算子

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

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

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

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

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

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

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

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

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

🍣参考リンク

• 必要最小限のサンプルで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のヘビーユーザーになので、「ここ」から会員登録してもらえるとサービス開発が捗ります！