PS: 私たちの熱意が三分間の熱意だけであれば、信仰の試練を完了することはできません。混乱が訪れたとき、最初にすることはしばしば逃げることです。どんなスキルも短時間で習得することはできませんが、十分に続ければ、時間があなたに答えを与えてくれるでしょう。
上篇文章では、Thymeleaf テンプレートの依存関係、基本属性、および使用方法について簡単に紹介しました。以下では、Thymeleaf における一般的な構文について以下のいくつかの側面から紹介します：
- 表現
- 文字列の結合
- 条件比較
- switch 多分岐
- ループ
- その他の演算子
- インライン
- テスト効果
以下に関連するパラメータまたは変数の具体的な値は次のとおりです：
// テスト用の値の設定
model.addAttribute("name", "jzman");
model.addAttribute("gzh", "<b>躬行之</b>");
model.addAttribute("user", new User("manu"));
model.addAttribute("id", "123456");
model.addAttribute("flag", false);
model.addAttribute("value", 10);
// ループ文のテスト用
model.addAttribute("list", mUserList);
// spanタグのid,cssインラインテスト用
model.addAttribute("idName", "css");
// cssスタイルで使用する色の値,cssインラインテスト用
model.addAttribute("color", "#FF0000");
表現#
Thymeleaf で一般的に使用される表現には以下のいくつかがあります：
- メッセージ表現：
#{}を使用して、対応するプロパティファイルから値を取得します； - 変数表現：
${}を使用して変数の値を取得します。これらの変数の値は一般的にバックエンドから渡されます； - 選択変数表現：
th:object属性と組み合わせて、*{}を使用してth:objectで指定されたオブジェクトの属性値を取得します； - リンク URL 表現：
@{}を使用してリンクアドレスを示し、パラメータを簡単にそのリンクアドレスに渡すことができます。
上記のいくつかの表現の使用方法は以下の通りです：
<ul th:object="${user}">
<!--メッセージ表現-->
<li>メッセージ表現：<span th:text="#{home.title}">Hello World!</span></li>
<!--変数表現-->
<li>変数表現：<span th:text="${name}">Hello World!</span></li>
<!--選択変数表現-->
<li>選択変数表現：<span th:text="*{username}">Hello World!</span></li>
<li>選択変数表現：<span th:text="${user.username}">Hello World!</span></li>
<!--リンク表現-->
<li>リンク表現：<a href="default.html" th:href="@{default.html}">Default Page.</a></li>
<li>リンク表現：<a href="default.html" th:href="@{http://localhost:8080/{path}/i18n}">I18n Page.</a></li>
<li>リンク表現：<a href="default.html" th:href="@{http://localhost:8080/message(id=${id})}">Message.</a></li>
</ul>
上記のコード内の th 属性はすべて Thymeleaf に対応する Html 属性で定義された属性であり、メッセージ表現の例では、resources フォルダ内の home.properties ファイルに定義された home.title の値を取得しています。
変数表現の例では、バックエンドから渡されたnameという名前の変数の値を取得しています。
選択変数表現の例では、th:object属性で指定されたオブジェクトuserのusernameの値を取得しています。th:object属性を設定しない場合、${}と*{}には違いがなく、*{}を使用してもオブジェクト.属性でオブジェクトの特定の属性値にアクセスできます。
リンク表現の例では、<a>タグにリンクアドレスを指定し、リンクに必要なパラメータを簡単に指定できます。
バックエンドがどのように変数nameとオブジェクトuserをページに渡すかを見てみましょう。コードは以下の通りです：
文字列の結合#
文字列の結合は一般的に+を使用して文字列間の結合を行います。また、二重パイプで文字列内容を囲むことによっても結合が可能です。使用方法は以下の通りです：
<!--文字列の結合-->
<!--1. +を使用-->
<li><span>+を使用: </span><span th:text="'My name is '+${name}+'!'">Default</span></li>
<!--2. |を使用-->
<li><span>|を使用: </span><span th:text="|My name is ${name}!|"></span></li>
テスト結果は以下の通りです：
1. +を使用: My name is jzman!
2. |を使用: My name is jzman!
条件比較#
Thymeleaf の条件判断文はth:ifとth:unlessです。th:ifは条件が満たされたときに実行され、th:unlessは条件が満たされないときに実行されます。また、Thymeleaf で一般的に使用される比較演算子は以下の通りです：
- gt (>)：greater than (大きい)
- lt (<)：less than (小さい)
- ge (>=)：greater equal (大きいか等しい)
- le (<=)：less equal (小さいか等しい)
- not (!)：not (否定)
- eq (==)：equal (等しい)
- neq/ne (!=)：not equal (等しくない)
上記の比較演算子の対応する文字列は各比較演算子のエイリアスです。例えば、大なり記号は gt で表すことができます。これは、Thymeleaf テンプレートが XML 文書内で使用できるため、XML 文書の属性値では<と>タグを使用できないためです。もちろん、ここではプロジェクト開発のためにどの方法を選択するかは自由です。使用方法は以下の通りです：
<!--条件比較--value=10-->
<li th:if="${value} gt 9"><span>gt(>) </span><span th:text="|${value}|+'>9'">Default</span></li>
<li th:if="${user} ne null"><span>ne(!=) </span><span th:text="'User object is not null!'">Default</span></li>
<!--if/unless-->
<li th:if="${value} gt 9"><span>if </span><span th:text="|${value}|+'>9のときだけ実行'">Default</span></li>
<li th:unless="${value} gt 11"><span>unless </span><span th:text="|${value}|+'>11のときだけ実行しない'">Default</span></li>
テスト結果は以下の通りです：
gt(>) 10>9
ne(!=) User object is not null!
if 10>9のときだけ実行
unless 10>11のときだけ実行しない
switch 多分岐#
switch...case文も条件文に属し、th:case="*"はデフォルトの選択項目を示します。使用方法は以下の通りです：
<li th:switch="${name}">
<p th:case="jzman">彼の名前はjzmanです。</p>
<p th:case="manu">彼の名前はmanuです。</p>
<!--default-->
<p th:case="*">その他</p>
</li>
テスト結果は以下の通りです：
これはjzmanです
ループ#
テンプレートコードでforループを使用する方法は以下の通りです：
<li><span>インデックスなし</span>
<table>
<tr th:each="user:${list}">
<td th:text="${user.userId}"></td>
<td th:text="${user.username}"></td>
</tr>
</table>
</li>
<li><span>インデックスあり</span>
<table>
<tr th:each="user,start:${list}">
<td th:text="${start.index}"></td>
<td th:text="${user.userId}"></td>
<td th:text="${user.username}"></td>
</tr>
</table>
</li>
上記のコードでは、startを使用してループ内の情報を取得できます：
- index: 現在の反復オブジェクトのインデックス、0 から計算されます；
- count: 現在の反復オブジェクトのインデックス、1 から計算されます；
- size: 反復対象の大きさ；
- current: 現在の反復変数；
- even/odd: ブール値、現在のループが偶数か奇数かを示し、0 から計算されます；
- first: ブール値、現在のループが最初のものであるかどうか；
- last: ブール値、現在のループが最後のものであるかどうか。
テスト結果は以下の通りです：
インデックスなし
1 jzman
2 躬行之
3 Tom
インデックスあり
0 1 jzman
1 2 躬行之
2 3 Tom
その他の演算子#
?:演算子は、前の表現が null かどうかを最初に判断し、null であれば後の表現の値を使用し、そうでなければ前の表現の値を使用します。使用方法は以下の通りです：
<!--?:演算子：前の表現がnullかどうかを最初に判断し、nullであれば後の表現の値を使用し、そうでなければ前の表現の値を使用-->
<li><span>?:演算子：</span><span th:text="${name} ?: 'default'">Default</span></li>
<!--三項演算子も表現できます-->
<li><span>三項演算子：</span><span th:text="${name} ne null ? ${name}:'default'">Default</span></li>
テスト結果は以下の通りです：
?:演算子：jzman
三項演算子：jzman
_演算子は何の操作も行わないことを示します。以下の変数testは null であるため、_演算子に到達したときに何の操作も行い、<span>タグ内の値はDefaultです：
<!--_演算子：何の操作も行わないことを示す-->
<li><span>_演算子：</span><span th:text="${test} ?: _">Default</span></li>
テスト結果は以下の通りです：
_演算子：Default
インライン#
Thymeleaf では、表現のインライン、JavaScript のインライン、CSS のインライン、およびテキストのインラインをサポートしています。以下では、最も一般的な 3 つのインライン方法を紹介します：
- 表現のインライン
- JavaScript のインライン
- CSS のインライン
表現のインライン#
[[..]]と[(...)]の間の表現は Thymeleaf テンプレート内でインライン表現と呼ばれ、これは HTML タグ内でそれぞれth:textとth:utextを使用して対応する要素のテキスト値を設定することに相当します。使用方法は以下の通りです：
<!--表現のインライン-->
<!--対応する表現の値はテキストとして処理され、HTMLタグの効果は処理されません-->
<li><span>表現のインライン：</span>公式アカウント名は[[${gzh}]]</li>
<!--対応する表現の値はテキストとして処理されず、HTMLタグの効果が処理されます-->
<li><span>表現のインライン：</span>公式アカウント名は[(${gzh})]</li>
両者の最大の違いは、テキストの処理の有無です。[[..]]は指定されたテキストをそのまま出力し、[(...)]はフォーマットされたテキストをレンダリングして出力します。テスト結果は以下の通りです：
表現のインライン：公式アカウント名は<b>躬行之</b>
表現のインライン：公式アカウント名は躬行之
上記の第二行の<b>タグ内の内容躬行之は太字になっています。具体的な実行効果は文末の画像を参照してください。
JavaScript のインライン#
JavaScript のインラインでは、js コード内で直接[[${...}]]を使用してその中の表現の値を取得できます。使用する際は、<script>モジュール内でth:inline="javascript"を使用して JavaScript のインラインサポートを有効にする必要があります。使用方法は以下の通りです：
<script th:inline="javascript">
function gzhName() {
// エスケープされていない文字を出力
// let gzh = [(${gzh})];
// jsでバックエンドから渡されたgzhの値を取得
let gzh = [[${gzh}]];
console.log("gzhName：" + gzh);
let span = document.getElementsByClassName("jsInline");
span[0].innerHTML = gzh.toString();
}
</script>
<!--...-->
<!--JavaScriptのインライン-->
<li><span>JavaScriptのインライン：</span><button onclick="gzhName()">jsから変数値を取得</button><span class="jsInline"></span></li>
プログラムを実行した後、buttonをクリックすると変数gzhの値を取得できます。JavaScript の自然テンプレートを見てみましょう。表現をコメントで囲むと、動的実行時にはコメントの前後のファイルを無視して表現の値だけを出力します。静的ページの場合はその表現の値を無視します。使用方法は以下の通りです：
// JavaScriptの自然テンプレート
let name = /*[[${name}]]*/ "テスト";
console.log("name：" + name);
また、エスケープされていない文字列が必要な場合は、[(${...})]を使用して取得できます。
CSS のインライン#
CSS のインラインでは、<style>内で直接[[${...}]]を使用してその中の表現の値を取得できます。使用する際は、<style>内でth:inline="css"を使用して CSS のインラインサポートを有効にする必要があります。使用方法は以下の通りです：
<!--CSSのインラインを有効にする-->
<style th:inline="css">
/*idNameに対応するidの要素内のフォントの色を設定*/
#[[${idName}]]{
/*CSSの自然テンプレート*/
color:/*[(${color})]*/ #0000FF;
}
</style>
<!--CSSのインライン-->
<li><span>CSSのインライン：</span><span id="css">CSSのインラインテスト</span></li>
上記のコードでは、バックエンドからidNameの値とcolorの値が渡され、CSS のスタイルを動的に設定できます。
テスト効果#
具体的なコードは原文をクリックして対応するソースコードを確認できます。