メモ > 技術 > フレームワーク: SpringBoot > テンプレート（Thymeleaf）
■テンプレート（Thymeleaf）
Thymeleaf（タイムリーフ）について
Thymeleafとは？基本構文・Spring Bootでの使い方を解説 | プログラミングを学ぶならトレノキャンプ（TRAINOCAMP）
https://camp.trainocate.co.jp/magazine/about-thymeleaf/
Thymeleaf if文 条件分岐を行うサンプル | ITSakura
https://itsakura.com/thymeleaf-if-loop
Spring Boot + Thymeleafで詳細画面を作成する - ITを分かりやすく解説
https://medium-company.com/spring-boot-thymeleaf%E3%81%A7%E8%A9%B3%E7%B4%B0%E7%94%BB%E9%9D%A2%E3%82%...
■インラインテキスト
一例だが、以下のようにして変数の内容を出力すると、
<p>現在時刻は<span th:text="${time}"></span>です。</p>
以下のように出力される
<p>現在時刻は<span>19:17:45</span>です。</p>
余計なspanが残されているため、多くの情報を埋め込むと出力HTMLがspanだらけになりそうだが、回避する方法はいくつか用意されている
以下のコードは、いずれもspanを出力しない
<p>現在時刻は<span th:text="${time}" th:remove="tag"></span>です。</p>
<p>現在時刻は<th:block th:text="${time}"></th:block>です。</p>
<p>現在時刻は[[${time}]]です。</p>
上から順に
・「th:remove="tag"」を指定する
・「th:block」という疑似的なタグを使用する
・「[[〜]]」という形式で指定する
という方法になっている
[thymeleaf]spanタグ等で囲まないとテキストが表示できない？
https://teratail.com/questions/2558
Tutorial: Using Thymeleaf (ja)
https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf_ja.html#%E6%93%AC%E4%BC%BC%E7%9A%84%E3%81...
Thymeleafとは？基本構文・Spring Bootでの使い方を解説 | プログラミングを学ぶならトレノキャンプ（TRAINOCAMP）
https://camp.trainocate.co.jp/magazine/about-thymeleaf/
Thymeleafチートシート - Qiita
https://qiita.com/NagaokaKenichi/items/c6d1b76090ef5ef39482
また以下のようにすると、値を直接指定して出力できる
<p>現在時刻は<span th:text="'正午'" th:remove="tag"></span>です。</p>
<p>現在時刻は[['正午']]です。</p>
値部分には、以下のようにプログラムを埋め込むことができる
<p>現在時刻は<span th:text="${new java.util.Date().toString()}" th:remove="tag"></span>です。</p>
<p>現在時刻は[[${new java.util.Date().toString()}]]です。</p>
■オブジェクトの値参照
Getterメソッドを用意しておけば、オブジェクトのフィールドを直接扱うことができる
【Spring Boot】「Thymeleaf(タイムリーフ)」で画面にまとまった値を渡そう。 | プログラミングマガジン
http://www.code-magagine.com/?p=2935
■共通化
replaceを使うことで、ヘッダやフッタを共通化して読み込ませることができる
Thymeleafを使ってheaderとheadとfooterの共通化 - エキサイト TechBlog.
https://tech.excite.co.jp/entry/2022/08/08/162241
例えば templates/common/frontend.html として以下を作成すると、
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<header th:fragment="header">
<h1>Demo</h1>
</header>
<footer th:fragment="footer">
<p><small>This is demo site.</small></p>
</footer>
</html>
templates/home/index.html として以下のように呼び出すことができる
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Demo</title>
</head>
<body>
<th:block th:replace="~{common/frontend::header}"></th:block>
<main>
<p>これはトップページです。</p>
</main>
<th:block th:replace="~{common/frontend::footer}"></th:block>
</body>
</html>
「{common/frontend::header}」で指定した部分にはheaderタグの部分が、
「{common/frontend::footer}」で指定した部分にはfooterタグの部分が、それぞれ表示される
■レイアウト
layoutを使うことで、基本のレイアウトを作ることができる
ただしthymeleafの標準機能では対応していないので、追加でthymeleaf-layout-dialectを導入する必要がある
<dependency>
<groupId>nz.net.ultraq.thymeleaf</groupId>
<artifactId>thymeleaf-layout-dialect</artifactId>
</dependency>
共通のレイアウトとして、templates/layout/frontend.html を作成するものとする
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<meta charset="UTF-8">
<title>Demo</title>
</head>
<body>
<header th:fragment="header">
<h1>Demo</h1>
</header>
<th:block layout:fragment="content"></th:block>
<footer th:fragment="footer">
<p><small>This is demo site.</small></p>
</footer>
</body>
</html>
以下のようにして呼び出すと、「layout:fragment="content"」で指定した部分に組み込まれて表示される
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout/frontend}">
<body>
<th:block layout:fragment="content">
<main>
<p>これはトップページです。</p>
</main>
</th:block>
</body>
</html>
以下のようにタイトルを定義すると、それが優先して使用される（ただし「 | Demo」をレイアウト側で管理するなど、もっと効率的な方法がありそうな）
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout/frontend}">
<head>
<title>概要 | Demo</title>
</head>
<body>
<th:block layout:fragment="content">
<main>
<p>これは概要です。</p>
</main>
</th:block>
</body>
</html>
Spring BootとThymeleafでLayoutを共通化する方法 | ホームページ制作のサカエン Developer's Blog
https://www.saka-en.com/java/spring-boot-thymeleaf-layout/
SpringBoot 共通レイアウトを作成(Thymeleaf) | ITSakura
https://itsakura.com/springboot-layout
『Spring Framework 超入門』のレイアウト化の作成がうまく出てこないときの対処法 - yucatio@システムエンジニア
https://yucatio.hatenablog.com/entry/2022/02/09/225705
■静的コンテンツ
src/main/resources 内に static か public ディレクトリを作成て、静的コンテンツを配置できる
Thymeleafで外部のCSSファイルを読み込む方法 - ミルラク
https://miruraku.com/java/thymeleaf/css/
SpringBoot 静的コンテンツを返す方法（html, js, css など） - Web系開発メモ
https://web-dev.hatenablog.com/entry/spring-boot/intro/response-static-content