画面

# ヘッダ、フッタなどの共通化

common.htmlなど共通部品用のHTMLファイルを用意します。

```demo\src\main\resources\templates\common.html
<html xmlns:th="http://www.thymeleaf.org">
    <header th:fragment="header()">
        ヘッダー
    </header>
</html>
```
画面固有のHTMLでcommon.htmlで定義したHTMLを読み込むように指定します。

```demo\src\main\resources\templates\templateTest\index.html
<html xmlns:th="http://www.thymeleaf.org">
	<header th:replace="common :: header()"></header>
</body>
```

# 解説
index.htmlの
```<header th:replace="common :: header()"></header>
```
をcommon.htmlで定義した
```<header th:fragment="header()">
```
に差し替えています。

# その他最低限必要な知識
- controllerが渡した値の出力
```th:text="${変数名}"```
または
```[[${変数名}]]```


- IF文
```th:if="${条件式}"```

- 変数の定義
```th:with="変数名 = '設定する値'"```

- switch
```
<th:block th:switch="${検査対象の値}">
	<th:block th:case=値1>
		検査対象の値 = 値1 の場合の処理
	</th:block>
	<th:block th:case=値2>
		検査対象の値 = 値2 の場合の処理
	</th:block>
</th:block>
```

- リストの繰り返し処理
```th:each="{繰り返し中の変数名} , ${繰り返し処理中のステータス変数名} : ${繰り返し対象の変数名}"```
「繰り返し処理中のステータス変数名」について、下記の情報を得ることができます。


|プロパティ  |説明 |
|---|---|
|index  |ループ中のインデックス番号（0～の値）  |
|count |ループ中のカウント（1～の値）  |
|size |ループ対象のリストサイズ  |
|current |ループ中の要素  |
|even |偶数行であるか否か（boolean）  |
|odd |奇数行であるか否か（boolean）  |
|first |先頭行であるか否か（boolean）  |
|last |最終行であるか否か（boolean）  |

# 各機能を使用した実装サンプル
```demo\src\main\resources\templates\templateTest\index.html
<html xmlns:th="http://www.thymeleaf.org">

<head th:replace="common :: head('テンプレートテスト',~{::link},~{::script})">
	<!-- 画面固有のCSS、JS -->
	<link rel="stylesheet" th:href="@{/css/index.css}" />
	<script type="text/javascript" th:src="@{/js/index.js}"></script>
	<script>
		console.log("画面固有のJS");
	</script>
</head>

<body>

	<header th:replace="common :: header()"></header>

	<section>
		<h1>controllerValueの値を出力</h1>
		th:text使用：<span th:text="${controllerValue}"></span>
		<br>
		th:text使用しない：[[${controllerValue}]]
	</section>

	<br>

	<section>
		<h1>ＩＦ</h1>
		<th:block th:if="${conditionVal == 1}">
			true
		</th:block>
	</section>
	<br>

	<section>
		<h1>変数</h1>
		<th:block th:with="hensu = 'hensuの値'">
			hensu = [[${hensu}]]
		</th:block>
	</section>

	<br>

	<section>
		<th:block th:switch="${conditionVal}">
			<th:block th:case=1>
				conditionVal=1 の場合に出力
			</th:block>
			<th:block th:case=2>
				conditionVal=2 の場合に出力
			</th:block>
		</th:block>
	</section>

	<br>

	<section>
		<h1>リストの繰り返し処理</h1>
		<table border="1">
			<thead>
				<tr>
					<th>ID</th>
					<th>name</th>
					<th>ループの情報</th>
				</tr>
			</thead>
			<tbody>
				<tr th:each="company , status : ${companyList}">
					<td th:text="${company.id}"></td>
					<td th:text="${company.name}"></td>
					<td>
						index：[[${status.index}]]<br>
						count：[[${status.count}]]<br>
						size：[[${status.size}]]<br>
						current：[[${status.current}]]<br>
						even：[[${status.even}]]<br>
						odd：[[${status.odd}]]<br>
						first：[[${status.first}]]<br>
						last：[[${status.last}]]<br>
					</td>
				</tr>
			</tbody>
		</table>
	</section>

	<footer th:replace="common :: footer()"></footer>

</body>
</html>
```


```demo\src\main\resources\templates\common.html
<html xmlns:th="http://www.thymeleaf.org">
    <head th:fragment="head(title , links , scripts)">
        <meta charset="utf-8">

        <!-- 画面固有のタイトルを設定 -->
        <title th:text="${title}"></title>

        <!-- 画面共通のCSS、JS -->
        <link rel="stylesheet" th:href="@{/css/common.css}" />
        <script type="text/javascript" th:src="@{/js/common.js}"></script>

        <!-- 画面固有のCSS、JSで置き換え用 -->
        <th:block th:replace="${links} ?: _" />
        <th:block th:replace="${scripts} ?: _" />
    </head>

    <header th:fragment="header()">
        ヘッダー
    </header>
    
    <footer th:fragment="footer()">
        フッター
    </footer>
</html>
```

```demo\src\main\java\com\example\demo\TemplateTestConttoller.java
package com.example.demo;

import java.util.ArrayList;
import java.util.List;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller
@RequestMapping("templateTest")
public class TemplateTestConttoller {

    @RequestMapping(value = "/index", method = RequestMethod.GET)
    public Model index(Model model) throws Exception {
        // 繰り返し処理用
        List<Company> companyList = new ArrayList<>();
        companyList.add(new Company(1, "会社A"));
        companyList.add(new Company(2, "会社B"));
        model.addAttribute("companyList", companyList);

        model.addAttribute("controllerValue", "コントローラから渡された文字列");

        model.addAttribute("conditionVal", 1);

        return model;
    }

    public class Company{
        public Integer id;
        public String name;

        public Company(Integer id, String name) {
            this.id = id;
            this.name = name;
        }
    }
}

```