フラグメント
HTML要素を部品化して使い回す方法
背景
- Webアプリケーションでは、ページ横断で共通の部品であることがほとんど
- コードに重複があるとメンテナンスが難しい
- フラグメントを使うとメンテナンスしやすいコードがかける
使用法
- フラグメントの定義
th:fragment - フラグメントのインクルード
th:insert フラグメントの挿入
th:replace フラグメントの置換
参考サイト：thymeleaf公式
https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf_ja.html#%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%83%95%E3%83%A9%E3%82%B0%E3%83%A1%E3%83%B3%E3%83%88%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%AF%E3%83%AB%E3%83%BC%E3%83%89
使用例
- フラグメントを利用した共通HTMLを用意する。
今回は、resources/fragmentsにlayout.htmlを用意。
layout.html
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org" th:fragment="layout(title,content)">
<head>
<meta charset="UTF-8">
<title th:replace="${title}">(dafault)</title>
</head>
<body>
<div th:insert="${content}"></div>
</body>
</html>
th:fragment="layout(title,content)"
にて、layoutを元に各HTMLで動的にtitle,contentを指定できるようにする。
反映（インクルード）箇所は、th:replace="${title}"、th:insert="${content}"で表記。
2. 実HTMLにて、フラグメントを使用し１で定義したtitle、contentを指定する。
index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org" th:replace="~{fragments/layout :: layout(~{::title}, ~{::body})}">
<head>
<title>トップページ 課題管理アプリケーション</title>
</head>
<body>
<h1 class="mt-3">課題管理アプリケーション</h1>
<ul>
<li>
<a href="./issues/list.html" th:href="@{/issues}">課題一覧</a>
</li>
</ul>
</body>
</html>
th:replace="~{fragments/layout :: layout(~{::title}, ~{::body})}"
宣言により、fragments/layout(.html)で作成したフラグメント定義が、index.html内のtitleタグ・bodyタグの内容に置き換えられて使用される。