Thymeleafの基本

# Thymeleafとは
Thymeleaf(タイムリーフ)はJavaの代表的な<ins>テンプレートエンジン</ins>で，SpringBootアプリケーションを開発する際によく利用される．基本的に通常のHTMLファイルに少しだけ記述を加えるだけで利用することができる．

# テンプレートエンジンとは
そもそもテンプレートエンジンとは何かというと，Webアプリケーション開発などにおいて使用されるソフトウェアである．Thymeleafは，**テンプレートと呼ばれる雛形**と**動的に生成されたデータ**を合成し，成果ドキュメント(ビュー)を生成することが基本的な機能である．

●イメージ
![templateengine.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3133563/af359f64-770f-4092-0bce-4109d7ba4ea4.png)
テンプレート：HTMLやXMLで記述するようなまだデータが空欄のビュー
データ：コントローラが処理して送られるデータ

# Thymeleafの特徴
**１．動的コンテンツの生成**
Webサーバから受けとったデータをテンプレートに埋め込むことができ，これによって動的なコンテンツを生成することができる．また，テンプレート内で，繰り返し処理や条件分岐を実装することができる．

**２．XMLタグや属性の形式で記述可能**
HTMLなどのテンプレートのタグや属性と同じ形式で記述することができる．たとえば，条件分岐やループ処理，変数の表示などに特別な記述方法は用いず，HTMLの記述と同じように，タグや属性としてテンプレート内に記述できる．

# Thymeleafの準備
SpringBoot上でThymeleafを利用するためには，以下の２つを行う必要がある．
**１．プロジェクト構成ファイルに依存関係を追加**
ビルドツールとして<font color="red">Maven</font>または<font color="Blue">Gradle</font>のどちらを利用するかによって記述方法は異なる．
\<<font color="red">Maven</font>の場合：pom.xml>
```xml
<dependencies>
    <!-- dependenciesに以下を追加 -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
</dependencies>
```

\<<font color="Blue">Gradle</font>の場合：gradle.build>
```gradle
dependencies{
    //dependenciesに以下を追加
    implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
}
```

２．HTMLファイルに適用
テンプレートとなる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
```html
<p th:text="${<h1>textの表示</h1>}"></p>
<p th:utext="${<h1>utextの表示</h1>}"></p>
```
↓結果
![text:utext.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3133563/6ec3c5cf-29bb-a174-58e9-7c63137c5576.png)
textはエスケープ処理を行うので，`h1`タグが<ins>そのままの文字列</ins>として表示される．
utextはエスケープ処理を行わないため，`h1`が<ins>HTMLのタグ</ins>として認識されて表示される．

### 使用例２：value
```html
<input type="text" th:value="${設定値}">
```
↓結果
![value.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3133563/14777e37-aafe-f57e-3787-94cc37aa3b45.png)
上記の例では設定値が入力ボックスのvalue属性として設定される．コントローラーから受け取った変数を入れれば，動的に値を設定することができる．

### 使用例３：if
```html
<!-- num = ４-->
<p th:if="${num} % 2 == 0">正解</p>
<p th:if="${num} % 3 == 0">不正解</p>
```
↓結果
![if.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3133563/211a9019-807f-0e4b-3cf8-c4d3d8ed6e9e.png)
if文の内容がtrueの場合，その要素を表示する．他のプログラミング言語と同様に，等価演算子と比較演算子，論理演算子を利用することができる．

### 使用例４：each
```html
<div th:each="user : ${users_list}">
    <p th:text="${user}"></p>
</div>
```
リストや配列を拡張for文と似た機能を提供する．上記の例では，`users_list`から１つずつ取り出し`user`に格納したあとに表示している．

### 使用例５：action / object / field
```html
<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`は一般的にセットで利用する．

# まとめ
ここでは基本的な記述方法をまとめた．紹介したものはほんの一部に過ぎず，まだまだたくさんの属性や記述方法がある．