ThymeleafでHTMLのレイアウトを共有する方法（thymeleaf-layout-dialect）

Spring Bootを学習中、thymeleafでHTMLファイルで共通するレイアウト部分を共有する方法を学んだので、アウトプットも兼ねて投稿します！

## thymeleaf-layout-dialectとは？

thymeleafのライブラリの一つで、レイアウトを共通化させたい時にとても便利です。
イメージとしては大枠となるレイアウトをベースとして固定し、後から必要な要素だけ足して反映させていくような形です。

手順は下記の通りで行います。


## 手順

#### ①「thymeleaf-layout-dialect」ライブラリを取得

#### ②実際にHTMLファイルに記載🔥🔥

## 「thymeleaf-layout-dialect」ライブラリを取得

Spring bootのプロジェクトを作成後、pom.xmlに下記を追記し、
thymeleaf-layout-dialectライブラリを追加します。

![スクリーンショット 2022-04-09 0.49.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/754263/dc7e60bb-97fd-97fb-8b51-6078723a7b6f.png)

記載が完了したら
プロジェクトを右クリック　→　Maven　→　プロジェクトの更新
で反映させます。


## 実際にHTMLファイルに記載🔥🔥

それでは実際にHTMLファイルにthymeleafを記載していきます。
プロジェクト内は下記のようなディレクトリ構成にします。
![スクリーンショット 2022-04-09 1.02.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/754263/af24b5b2-528d-6dd9-f024-e37e30cf6b26.png)

各htmlファイルの役割は下記の通り。


◆index.html　→　layout.htmlからレイアウトを反映させ、必要な要素だけ記載。
◆layout.html　→　共通のレイアウトをここで作成。



まずlayout.htmlの中身を記載します。
### コード
```html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Layout</title>
</head>
<body style="background-color: yellow">

	<header style="width: 100%; height: 70px; background-color: black;">
		<p style="color: white; text-align: center; line-height: 70px;">header</p>
	</header>
	
	<main>
		<h1 style="font-size: 100px; text-align: center; width: 600px; border: 6px solid black; margin: 100px‹ auto;">MAIN</h1>
	</main>


	<!-- コンテンツの配置 -->
	<div layout:fragment="content"></div>
</body>
</html>
```

### レイアウト完成図
![スクリーンショット 2022-04-09 3.01.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/754263/38719d16-8d55-c3c0-3741-1a18cfdf2406.png)

## 解説

```html
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
```
<font color="red">xmlns:th</font> でthymeleafを、
<font color="red">xmlns:layout</font>　でthymeleaf-layout-dialectを読み込んでいます。

```html
<!-- コンテンツの配置 -->
<div layout:fragment="content"></div>
```
上記コードを共通化させたいコードの最後に記載します。
これを記載することにより、このコードより上に記載した内容を共通化させることができます。
<font color="red">laytout:fragment = "名前" </font>　
という構文で記載することがポイントです。


次にindex.htmlの中身を作成します。
### コード
```html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
	layout:decorate="~{layout/layout}">
<head>

<meta charset="UTF-8" th:remove="tag">
</head>
<body>
	<div layout:fragment="content">
		<table style="border: 5px solid black; margin: 0 auto; width: 50%;">
			<thead style="background-color: black; color: white;">
				<tr>
					<th colspan="2">Table header</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td style="border: 2px solid black;">Table Body1</td>
					<td style="border: 2px solid black;">Table Body2</td>
				</tr>
				
			</tbody>
		</table>
	</div>
</body>
</html>
```

### 完成図
![スクリーンショット 2022-04-09 3.18.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/754263/6fa2d8a8-1c35-6d77-c435-cc3356eb44b5.png)

## 解説
```html
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
	layout:decorate="~{layout/layout}">
```
ポイントなのは、<font color="red">layout:decorate="~{layout/layout}"></font>の箇所。

この記載により、どのレイアウトを採用するのかを指定しています。
<font color="red">~{layout/layout}"</font>は、layoutディレクトリのlayout（.html)を参照していることを意味しています。


```html
<div layout:fragment="content">
		~
</div>
```
layout.htmlで記載した<font color="red">上記タグ内</font>と同じdivタグをindex.htmlに記載し、タグ内に追加したい要素を記載します。
これにより、レイアウトの記載はindex.html内にする必要はなく、追加したい内容を書くだけでいいのでかなり手間が省けます！！！

## 参考文献
Spring boot 2入門　基礎から実演まで
https://www.amazon.co.jp/Spring-Boot-2-%E5%85%A5%E9%96%80-%E5%9F%BA%E7%A4%8E%E3%81%8B%E3%82%89%E5%AE%9F%E6%BC%94%E3%81%BE%E3%81%A7-ebook/dp/B0893LQ5KY