開発情報・ナレッジ

投稿者:SPIRERS ナレッジ向上チーム 2022年1月28日 (金)

【初級編】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 の使い方で追加のご要望がありましたら、
下記の「コンテンツに関しての要望はこちら」からご連絡ください。

解決しない場合はこちら コンテンツに関しての
要望はこちら