Memo

メモ > 技術 > フレームワーク: 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
Memo

Advertisement
