【初級編】Thymeleafの使い方

Thymeleaf の使い方（書き方）がよくわからないという質問を多くいただきましたので、
よくある使い方をまとめました。
この記事は、【 MKupdate vol.4「SPIRAL ver.2.18 PHP」】を基に記載しています。
重複する部分がありますが、ご了承ください。
また、PHP + Thymeleaf 実践については、こちらを参照ください。

Thymeleaf とは

Thymeleaf は、テンプレートエンジンです。
独自のタグはなく、th:○○という属性をHTML のタグに追加する形で使います。
HTML のタグに属性を追加する形なので、
複数コードの記載によるインデントが乱れがなくなり、ソースコードの可読性が高くなります。

【基本】Thymeleaf の書き方

表示系カスタマイズする際に、よく使われる使い方をまとめました。

■ 標準構文

th:xxx=""

基本的な使われ方は、上記の構文を HTML のタグに追加します。

書き方

■ 値の出力

 <p th:text="${id}">id</p>

要素内の id は、${id} で出力された値と差し変わります。

■ 繰り返し処理

 <div th:each="data:${array}"></div>

■ 分岐処理

 <div th:if="${data} eq true"></div>

■ ローカル変数を定義

 <div th:with="x=1,y=‘hoge’">
     <p th:text="${x}"></p>
     <p th:text="${y}"></p>
 </div>

■ HTMLタグを出力しないThymeleaf の処理

<th:block th:if="${cp.result.value['date']}">
    <!-- 条件が正しい場合、pタグのみ出力されます。 -->
    <p>条件が正しい</p>
</th:block>

 <th:block  th:each="data:${array}">
    <!-- 配列の要素数だけ、pタグが出力されます。 （配列の値は、${data} に格納され、出力されます）-->
    <p th:text="${data}">データ</p>
</th:block>

■ 画面に出力したくない場合のコメントアウト

<!-- ソースに出力されるコメント-->
<!--/* ソースに出力されないコメント */-->

■ 文字列を結合その1

<!-- id：○○ が出力 -->
<p th:text="'id：' + ${id}"></p>

■ 文字列を結合その2

<!-- id：○○ が出力 -->
<p th:text="|id：${id}|"></p>

■ 演算

<!-- 3が出力 -->
<p th:text="1 + 2"></p>

演算子として、「+」「-」「*」「/」「%」が使用可能です。

【応用】Thymeleaf の書き方

■ 複雑な分岐

<!-- 複数条件 true と 文字列一致 -->
<th:block th:if="${cp.result.value['error'] eq true || cp.result.value['text'] eq 'error'}">
    <P>条件が正しい</p>
</th:block>

<!-- 複数条件 false と 文字列不一致 -->
<th:block th:if="${cp.result.value['error']  eq false && cp.result.value['text'] ne 'error'}">
    <P>条件が正しい</p>
</th:block>

<!-- if と else -->
<p th:if="${cp.result.value['text'] eq 1}">text の値が 1 の場合に表示</p>
<p th:unless="${cp.result.value['text'] eq 1}">text の値が 1 でない場合に表示</p>

<!-- switch による分岐 -->
<div th:switch="${cp.result.value['num']}">
    <p th:case="1" th:text="|${cp.result.value['num']}|"></p>
    <p th:case="2" th:text="|${cp.result.value['num']}|"></p>
    <p th:case="3" th:text="|${cp.result.value['num']}|"></p>
    <p th:case="*">対象なし</p>
</div>

<!-- 出力に分岐を入れる場合 -->
<p th:text="${cp.result.value['data']}? ${cp.result.value['data']} : '値はありません。'}"></p>

<!-- 比較演算子 -->
<p th:if="${cp.result.value['a'] gt cp.result.value['b']}">aはbより大きい場合に表示</p>

* cp.result.value[''] は、PHP実行結果をThymeleafに渡された値を使用する際の書き方となります。

Thymeleafの条件式に「<」「>」などは使用できません。
下記のように置き換えて使用してください。
* 「==」などの使用できる演算子もあるため、すべて使用できないわけではありません。

==	eq
!=	ne
>	gt
>=	ge
<	lt
<=	le
&&	and
\|\|	or

■ 繰り返し処理の応用

<!-- 直接配列を指定 -->
<th:block th:each="val : ${ { 1,2,3,4,5,6,7,8,9,10 } }">
    <p th:text="${val}"></p>
</th:block>

<!-- ローカル変数に配列を設定後 に 繰り返し処理 -->
<th:block th:with="array=${ {'一郎','次郎','三郎'} }">
    <th:block th:each="val : ${array}">
        <p th:text="${val}"></p>
    </th:block>
</th:block>
<!-- 繰り返し処理の簡略化 -->
<th:block th:with="array=${ {'一郎','次郎','三郎'} }">
    <p  th:each="val : ${array}" th:text="${val}"></p>
</th:block>

<!-- 連想配列 と 繰り返し処理 -->
<th:block th:with="array=${ { {id:1, name:'一郎', age:'15'},{id:2, name:'次郎', age:10},{id:3, name:'三郎', age:5}} }">
    <p th:each="val : ${array}" th:text="|${val[id]}:${val[name]}さん　${val[age]}歳|"></p>
</th:block>

<!-- ステータス変数1 -->
<th:block th:with="array=${ {'一郎','次郎','三郎'} }">
    <th:block th:each="val,status : ${array}">
        <p th:text="|${status.count}番目の要素|"></p>
    </th:block>
</th:block>

<!-- ステータス変数2 -->
<th:block th:with="array=${ {'一郎','次郎','三郎'} }">
    <th:block th:each="val,status : ${array}">
        <!-- 繰り返し処理の回数の奇数の場合表示 -->
        <p th:if=${status.odd} th:text="|${val}|"></p>
    </th:block>
</th:block>

<!-- ステータス変数3 -->
<th:block th:with="array=${ {'一郎','次郎','三郎'} }">
    <th:block th:each="val,status : ${array}">
        <!-- 繰り返し処理の回数が、奇数の場合 odd。偶数の場合 even のクラスを追加 -->
        <p th:text="|${val}|" th:classappend="${status.even} ? 'even':'odd'"></p>
    </th:block>
</th:block>

「ステータス変数」は、繰り返し処理中のステータスを知るための変数となります。
繰り返し処理の中で定義され、下記の内容を保持しています。

index	プロパティ	0始まりの現在の「繰り返しインデックス」
count	プロパティ	1始まりの現在の「繰り返しインデックス」
size	プロパティ	被繰り返し変数の全要素数
current	プロパティ	繰り返し中の「繰り返し変数」
even	真偽値プロパティ	現在の繰り返し処理が偶数か
odd	真偽値プロパティ	現在の繰り返し処理が奇数か
first	真偽値プロパティ	現在の繰り返し処理が最初かどうか
last	真偽値プロパティ	現在の繰り返し処理が最後かどうか

ver.2 の Thymeleaf

記載している内容は、一部ですので、ぜひ公式リファレンスをご参照ください。
Thymeleaf 公式

ver.2 では、th: を付けた属性は値が処理されます。
下記のように HTML の属性値を自由に変更することで、動的に変更することも可能ですので、ぜひお試しください。

<!--/* 参考 */-->
<p th:id="${id} ? |page-${id}|"></p>

注意点としまして、Thymeleaf 独自属性で制限がされているものもございます。
独自属性は使用できるかを確認の上、実装をお願いします。
SPIRAL ver2で許可されている記法

Thymeleaf の使い方で追加のご要望がありましたら、
下記の「コンテンツに関しての要望はこちら」からご連絡ください。

開発情報・ナレッジ

Thymeleaf とは

【基本】Thymeleaf の書き方

書き方

【応用】Thymeleaf の書き方

ver.2 の Thymeleaf

関連記事