【Thymeleafを使いこなそう】第1回基本コード解説

Thymeleaf（タイムリーフ）は属性名th:~で指定された値を処理し様々なHTMLを生成することができます。
本記事ではソース設定を行う際、Thymeleafでよく使用されている記載についてまとめています。

Thymeleafの記法や動作についてはSPIRAL WebTools サポートサイト Thymeleaf記法をご参照ください。
また、Thymeleaf関連記事をまとめた Thymeleaf特集も是非ご覧ください。

Thymelafの記載

Thymeleafで下記のようなth:textを使用している場合には、「"${'Hello'}"」の「Hello」が表示され、
「World」部分は表示されません。
また、「th:~」はHTMLの正常な属性として扱われ、画面に表示されることはありません。

<!-- Thymeleafのコード -->
<div th:text="${'Hello'}">World</div>

<!-- 実際に出力されるコード -->
<div>Hello</div>

th:text

値の評価結果を、タグのボディにセットします。
既存のボディは置き換わり、処理後のHTMLにはこの属性は残りません。

<!-- Thymeleafのコード -->
<div th:text=${2}>two</div>

<!-- 実際に出力されるコード -->
<div>2</div>

th:value

値の評価結果を、value属性にセットします。
既存のボディは置き換わり、処理後のHTMLにはこの属性は残りません。

<!-- Thymeleafのコード -->
<button type="submit" value="Next" th:value="${'次へ'}"></button>

<!-- 実際に出力されるコード -->
<button type="submit" value="次へ"></button>

th:if

この属性が指定された要素は値がfalseの時削除されます。
エラーメッセージや特定のランクの会員のみ表示などの特定の条件で出したい時などによく使用されます。
既存のボディは置き換わり、処理後のHTMLにはこの属性は残りません。

<!-- Thymeleafのコード -->
<div th:if="${true}" th:text="値はTrueです"></div>
<div th:if="${false}" th:text="値はFalseです"></div>

<!-- 実際に出力されるコード -->
<div>値はTrueです</div>

th:unless

この属性が指定された要素は値がtrueの時削除されます。
th:ifと併用することで、条件に当てはまる場合/当てはまらない場合で異なる出力をさせることが可能となります。
既存のボディは置き換わり、処理後のHTMLにはこの属性は残りません。

<!-- Thymeleafのコード -->
<div th:unless="${true}" th:text="値はTrueです"></div>
<div th:unless="${false}" th:text="値はFalseです"></div>

<!-- 実際に出力されるコード -->
<div>値はFalseです</div>

th:with

一時的に変数を作成して使用することができます。
数値やテキストだけではなく、配列や連想配列の変数も作成可能です。
変数は宣言しているタグ内(今回の場合は、th:withを使用しているdivの内)のみでしか使用できません。
既存のボディは置き換わり、処理後のHTMLにはこの属性は残りません。

<!-- Thymeleafのコード -->
<div th:with="x=1,y=2,text='text',list=${ {'apple','carrot'} },map=${ {fruits : 'apple',vegetable : 'carrot'} }">
    <p th:text="${x}"></p>
    <p th:text="${y}"></p>
    <p th:text="${text}"></p>
    <p th:text="${list}"></p>
    <p th:text="${map}"></p>
</div>

<!-- 実際に出力されるコード -->
<div>
    <p>1</p>
    <p>2</p>
    <p>text</p>
    <p>[apple, carrot]</p>
    <p>{fruits=apple, vegetable=carrot}</p>
</div>

th:each

この属性が指定されたタグをコレクションの件数分、繰り返し出力します。
<input type="checkbox">や<option>などの繰り返し記述される要素によく使用されます。
処理後のHTMLにはこの属性は残りません。
今回の場合の「val」はリストの要素を、「status」繰り返し処理中のステータスを知るための変数となります。
「status」は繰り返しの中で定義され、下記の内容を保持します。

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

<!-- Thymeleafのコード -->
<div th:with="list=${ {'apple','carrot','salmon'} }">
    <th:block th:each="val,status:${list}">
        <p>--------------------------------------</p>
        <p th:text="${val}"></p>
        <p th:text="${status.index}"></p>
        <p th:text="${status.count}"></p>
        <p th:text="${status.size}"></p>
        <p th:text="${status.current}"></p>
        <p th:text="${status.even}"></p>
        <p th:text="${status.odd}"></p>
        <p th:text="${status.first}"></p>
        <p th:text="${status.last}"></p>
    </th:block>
</div>

<!-- 実際に出力されるコード -->
<div>
    <p>--------------------------------------</p>
    <p>apple</p>
    <p>0</p>
    <p>1</p>
    <p>3</p>
    <p>apple</p>
    <p>false</p>
    <p>true</p>
    <p>true</p>
    <p>false</p>
    <p>--------------------------------------</p>
    <p>carrot</p>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>carrot</p>
    <p>true</p>
    <p>false</p>
    <p>false</p>
    <p>false</p>
    <p>--------------------------------------</p>
    <p>salmon</p>
    <p>2</p>
    <p>3</p>
    <p>3</p>
    <p>salmon</p>
    <p>false</p>
    <p>true</p>
    <p>false</p>
    <p>true</p>
</div>

th:block

要素をグループ化して処理するために使用します。
HTML構造を変えることなく、th:ifなどの条件により要素を表示したりすることが可能です
処理後のHTMLにはこのタグは残りません。

<!-- Thymeleafのコード -->
<th:block th:if="${true}">
    <div>この値はTrueです</div>
</th:block>
<th:block th:unless="${true}">
    <div>この値はFalseです</div>
</th:block>

<!-- 実際に出力されるコード -->
<div>この値はTrueです</div>

fields['f0xx']

SPIRALのフォームで使用できる変数で、各フィールド情報を持つ変数です。f0+フィールドIDで参照するフィールドを指定することができます。
使用する際には、<sp:input-field name="f0xx"></sp:input-field>にて、フィールドを宣言する必要があります。
例として、対象のフィールドのラベル値や、name値を出力可能です。

<!-- フィールド宣言 -->
<sp:record-item-field name="f0xx"></sp:record-item-field>

<!-- ラベル出力 -->
<th:block th:text="${fields['f0xx'].label}">Label</th:block>

<!-- name属性出力 -->
<th:block th:text="${fields['f0xx'].name}">name</th:block>

inputs['f0xx']

SPIRALのフォームで使用できる変数で、ユーザの入力した情報を持つ変数です。
fieldsと同様にf0+フィールドIDで指定することでフィールド毎の入力された値を参照できます。
入力フィールドがマルチセレクトの場合には、文字列ではなくListで格納されます。

<!-- フォームの一例 -->
<input type="text" class="sp-form-control" th:name="${fields['f0xx'].name}" th:placeholder="${fields['f0xx'].placeholder}" th:value="${inputs['f0xx']}">

values['f0xx']

SPIRALのフォームで使用できる変数で、入力/選択された値を引き継いで表示する変数です。
fieldsと同様にf0+フィールドIDで指定することでフィールド毎の入力された値を参照できます。

<!-- フォームの一例 -->
<div class="sp-form-data">
    <span class="sp-form-embedded" th:text="${values['f0xx']}">12345</span>
</div>

pages['p0xxxxxx']

ページの情報を持つ変数です。
p0+ページIDを指定することで、対象のページの情報を持つことができます。レコードリストで使用する場合には、自DBレコードを引用したリンクを付与させることや、
パラメータを付与させることも可能です。

<!-- 引用なしのリンク -->
<a th:href="${pages['p0xxxxx']?.path ?:'/404'}" th:text="${pages['p0xxxxx']?.title ?: pages['p0xxxxx']?.displayName ?: '404'}" ></a>

<!-- レコードリスト：自DBレコードつきのリンク -->
<a th:href="|${pages[{p0xxxxx}]?.path ?: '/404'}?${record.linkParam}|" th:text="${record['f_id']}">12345</a>

<!-- パラメータ「test」つきのリンク -->
<a th:href="|${pages['p0xxxxx']?.path ?:'/404'}?test|" th:text="${pages['p0xxxxx']?.title ?: pages['p0xxxxx']?.displayName ?: '404'}" ></a>

record['f0xx']

SPIRALの更新フォームのクエリパラメータ引用、削除フォームのクエリパラメータ引用、レコードリスト、レコードアイテムなどで使用できる変数です。
使用する際には、<sp:record-item-field name="f0xx"></sp:record-item-field>にて、フィールドを宣言する必要があります。
fieldsと同様にf0+フィールドIDで指定することでフィールド毎の入力された値を参照できます。

<!-- フィールド宣言 -->
<sp:record-item-field name="f0xx"></sp:record-item-field>

<!-- レコードリストの一例 -->
<tbody>
    <tr th:each="record, stat : ${pageRecords}">
        <!--/* テキスト (text) */-->
        <sp:record-data-field name="f0xx"></sp:record-data-field>
        <td>
        <span th:text="${record['f0xx']}">Example</span>
        </td>
    </tr>
</tbody>

siteClient.record[xx]

SPIRALの認証エリア内で使用できる変数です。
xx部分に認証エリアに設定しているDBのフィールドIDで指定することでフィールド毎の認証値を参照できます。
また、認証DBの参照フィールドからも値を呼び出すことが可能です。
参照する場合には、yy部分を参照先DBのDBのフィールドIDを指定する必要がございます。

<!-- 認証DBのフィールド呼び出し -->
<span th:text="${siteClient.record[xx]}">Example</span>

<!-- 認証DBの参照先フィールド呼び出し -->
<span th:text="${siteClient.record[xx] != null} ? (${siteClient.record[xx][yy]} ?: '値なし')">Example</span>

dbs[xxxxxx].record[yy]

SPIRALの登録フォームのクエリパラメータ引用で使用できる変数です。
xxxxxx部分にDBのフィールドIDで指定することで登録先DBにレコード公開範囲が設定されているDBを参照している参照フィールドを引用できます。
参照する場合には、yy部分を参照先DBのDBのフィールドIDを指定する必要がございます。

<!-- クエリパラメータからのフィールド呼び出し -->
<span th:text="${dbs[xxxxxx] != null} ? (${dbs[xxxxxx].record[yy]} ?: '値なし')">Example</span>

[オブジェクト]?.[プロパティ]

ソース編集で使用されている「?.」は、セーフナビゲーションとなります。
これは、NullPointerExceptionを回避するものとなります。
対象のオブジェクトへの参照がある場合、オブジェクトのプロパティにアクセスする前に、
プロパティが存在することを確認する必要がある場合があります。
セーフナビゲーションを使用することで、存在しない場合にはnullと評価することで、エラーを回避しています。

<!-- 認証値としてセレクト項目のidを取り出す場合の例 -->
<span th:text="${siteClient.record[xx]?.id}">Example</span>

[条件式]?[trueの場合]:[falseの場合]

出力する値を、条件に応じて変更するには、三項演算子を用いることで可能です。
式は省略することも可能で、[条件式]?:[nullの場合]とすることもできます。

<!-- Thymeleafのコード -->
<!-- 三項演算子 -->
<div th:text="${true} ? 'true' : 'false' "></div>

<!-- 省略形 -->
<div th:text="${null} ?: 'nullText' ">Example</div>

<!-- 実際に出力されるコード -->
<!-- 三項演算子 -->
<div>true</div>

<!-- 省略形 -->
<div>nullText</div>

文字列結合

名前を呼び出している変数に「様」等を付けたい場合には、
文字列結合を行うことで可能です。
文字列は、「||」で囲うことで結合します。

<!-- Thymeleafのコード -->
<div th:with="list=${ {'太郎','花子','次郎'} }">
    <th:block th:each="val,status:${list}">
        <p th:text="|${val}様|"></p>
    </th:block>
</div>

<!-- 実際に出力されるコード -->
 <div>
    <p>太郎様</p>
    <p>花子様</p>
    <p>次郎様</p>
</div>

条件式

Thymeleafで条件式を記載する場合には、「>」「<」などは使用できません。
そのため、下記に置き換えて使用する必要があります。

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

<!-- 例：太郎のみを出力 -->
<!-- Thymeleafのコード -->
<div th:with="list=${ {'太郎','花子','次郎'} }">
    <th:block th:each="val,status:${list}">
        <p th:if="${val} eq '太郎'" th:text="${val}"></p>
    </th:block>
</div>

<!-- 例：太郎のみを出力 -->
<!-- 実際に出力されるコード -->
 <div>
    <p>太郎</p>
</div>

開発情報・ナレッジ