Thymeleafとは
Thymeleaf(タイムリーフ)はJavaの代表的なテンプレートエンジンで，SpringBootアプリケーションを開発する際によく利用される．基本的に通常のHTMLファイルに少しだけ記述を加えるだけで利用することができる．
テンプレートエンジンとは
そもそもテンプレートエンジンとは何かというと，Webアプリケーション開発などにおいて使用されるソフトウェアである．Thymeleafは，テンプレートと呼ばれる雛形と動的に生成されたデータを合成し，成果ドキュメント(ビュー)を生成することが基本的な機能である．
●イメージ
テンプレート：HTMLやXMLで記述するようなまだデータが空欄のビュー
データ：コントローラが処理して送られるデータ
Thymeleafの特徴
１．動的コンテンツの生成
Webサーバから受けとったデータをテンプレートに埋め込むことができ，これによって動的なコンテンツを生成することができる．また，テンプレート内で，繰り返し処理や条件分岐を実装することができる．
２．XMLタグや属性の形式で記述可能
HTMLなどのテンプレートのタグや属性と同じ形式で記述することができる．たとえば，条件分岐やループ処理，変数の表示などに特別な記述方法は用いず，HTMLの記述と同じように，タグや属性としてテンプレート内に記述できる．
Thymeleafの準備
SpringBoot上でThymeleafを利用するためには，以下の２つを行う必要がある．
１．プロジェクト構成ファイルに依存関係を追加
ビルドツールとしてMavenまたはGradleのどちらを利用するかによって記述方法は異なる．
<Mavenの場合：pom.xml>
<dependencies>
<!-- dependenciesに以下を追加 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
</dependencies>
<Gradleの場合：gradle.build>
dependencies{
//dependenciesに以下を追加
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
}
２．HTMLファイルに適用
テンプレートとなるHTMLファイルのhtmlタグに以下を入れる．
<html xmlns:th="http://www.thymeleaf.org">
基本的な記述方法
Thymeleafの基本構文は以下の基本形をHTMLタグの属性として記述する．
th:属性名="スタンダード式"
代表的な属性名
| 属性名 | 機能 |
|---|---|
| text | 画面へ文字列を出力する(エスケープ処理あり) |
| utext | 画面へ文字列を出力する(エスケープ処理なし) |
| value | テキストボックスに値をセットする |
| if | if文の式がtrueとなる場合のみ出力する |
| each | 配列・リストをループで出力する |
| action | フォームの送信先を指定する |
| object | form要素にバインドするJavaオブジェクトを設定する |
| field | 要素のid属性やid属性の役割を持つ |
スタンダード式
Thymeleafに使われるスタンダード式は４つのタイプがある．
| タイプ名 | 記述方法 | |
|---|---|---|
| 変数式 | ${...} | 変数やプロパティの値を表示する |
| 選択変数式 | *{...} | オブジェクトの中にあるプロパティを取得する |
| メッセージ式 | #{...} | 予めプロパティファイルに記述したメッセージを表示する |
| リンクURL式 | @{...} | リンクやリダイレクトのURLを生成する |
Thymeleafの使用例
上記に紹介した代表的な属性の使用例を紹介する．
使用例１：text / utext
<p th:text="${<h1>textの表示</h1>}"></p>
<p th:utext="${<h1>utextの表示</h1>}"></p>
↓結果
textはエスケープ処理を行うので，h1タグがそのままの文字列として表示される．
utextはエスケープ処理を行わないため，h1がHTMLのタグとして認識されて表示される．
使用例２：value
<input type="text" th:value="${設定値}">
↓結果
上記の例では設定値が入力ボックスのvalue属性として設定される．コントローラーから受け取った変数を入れれば，動的に値を設定することができる．
使用例３：if
<!-- num = ４-->
<p th:if="${num} % 2 == 0">正解</p>
<p th:if="${num} % 3 == 0">不正解</p>
↓結果
if文の内容がtrueの場合，その要素を表示する．他のプログラミング言語と同様に，等価演算子と比較演算子，論理演算子を利用することができる．
使用例４：each
<div th:each="user : ${users_list}">
<p th:text="${user}"></p>
</div>
リストや配列を拡張for文と似た機能を提供する．上記の例では，users_listから１つずつ取り出しuserに格納したあとに表示している．
使用例５：action / object / field
<form method="post" th:action="@{/example}" th:object="${User}">
<input type="text" th:field="*{name}"/>
<input type="text" th:field="*{age}"/>
<input type="submit" value="submit"/>
</form>
th:actionでフォームの送信方法を指定する．th:objectでバインディングするオブジェクトを指定し，th:fieldでバインディングしたオブジェクトのフィールドにマッピングする．
このようにth:objectとth:fieldは一般的にセットで利用する．
まとめ
ここでは基本的な記述方法をまとめた．紹介したものはほんの一部に過ぎず，まだまだたくさんの属性や記述方法がある．