ホーム>技術

Thymeleafでテンプレートを共通化（フラグメント）する方法

当サイトはアフィリエイト広告を利用しています。

目次

効率的なJava学習サービスの探し方をご存知ですか？

Javaを学習したいけれどどの学習サービスを選べば良いか分からないという悩みを抱えていませんか？
Javaは市場価値が高い為、学習サービスを提供しているものも多く、条件に合うものを見つけるのに苦労しますよね。
以下の記事ではJavaを入門レベルから勉強できるおすすめ学習サービスをご紹介しています。
Spring FrameworkやThymeleafがカリキュラムに含まれているものがあるので、ぜひ参考にしてください！

Javaを入門レベルから勉強できるおすすめ学習サービス7選

実行環境

OSmacOS Catalina 10.15.1
EclipsePhoton 2018-09
Java8
Spring Tool Suit3.9.6
Spring Boot2.1.13
Thymeleaf2.1.2

開発および実行環境がない人は、以下の記事を参考に構築してください。

Spring BootとThymeleafを導入してHello worldを表示する方法

Thymeleafでテンプレートを共通化（フラグメント）する方法

今回は、Thymeleafでテンプレートを共通化（フラグメント）する方法をご紹介します。

また、サンプルとして以下のようなプログラムを作成します。ぜひ参考にしてください。

サンプルのキャプチャ

テンプレートを共通化（フラグメント）する

Thymeleafでテンプレートを共通化（フラグメント）する方法は以下のとおりです。

  1. th:fragment でテンプレートを共通化（フラグメント）する
  2. テンプレートファイルに th:insert または th:replace または th:include で取り込む

th:fragmentでテンプレートを共通化（フラグメント）する

はじめに、th:fragment="copy" でテンプレートを共通化（フラグメント）します。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
  <footer th:fragment="copy">
    <span>© 2020 ミルラク</span>
  </footer>
</body>
</html>

テンプレートファイルに th:insert または th:replace または th:include で取り込む

テンプレートの共通化（フラグメント）が完了したら、テンプレートファイルでフラグメントを読み込みます。
フラグメントを読み込むには、th:insert または th:replace または th:include を使用します。footer :: copy で「footer.html」で共通化したcopyというテンプレートを呼び出しています。それぞれ出力結果が異なるので使用する際の参考にしてください。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Thymeleafでテンプレートを共通化（フラグメント）する方法</title>
</head>
<body>
  <!-- th:insertで読み込む -->
  <div th:insert="footer :: copy"></div>
  <!-- th:replaceで読み込む -->
  <div th:replace="footer :: copy"></div>
  <!-- th:includeで読み込む -->
  <div th:include="footer :: copy"></div>
</body>
</html>
<!-- th:insertで読み込む -->
<div><footer>
  <span>© 2020 ミルラク</span>
</footer></div>
<!-- th:replaceで読み込む -->
<footer>
  <span>© 2020 ミルラク</span>
</footer>
<!-- th:includeで読み込む -->
<div>
  <span>© 2020 ミルラク</span>
</div>

テンプレートを共通化（フラグメント）するプログラムを実装する

テンプレートを共通化（フラグメント）するプログラムを実装する手順は以下のとおりです。

  1. Controllerクラスを作成する
  2. 共通化（フラグメント）するテンプレートファイルを作成する
  3. テンプレートファイルを作成する
  4. 動作を確認する

また、フォルダ構成は以下のとおりです。

src/main/java/com.example.controller
 ├─ FragmentController.java
src/main/resources/templates
 ├─ footer.html
 └─ fragment.html

Controllerクラスを作成する

はじめに、Controllerクラスを作成します。
今回は「FragmentController」という名前で作成します。

URLは「/fragment」、テンプレートファイル名は「fragment」を指定します。

package com.example.controller;

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

@Controller
public class FragmentController {

	@RequestMapping("/fragment")
	public String sample(Model model) {
		
		return "fragment";
	}
}

共通化（フラグメント）するテンプレートファイルを作成する

次に、共通化（フラグメント）するテンプレートファイルを作成します。
今回は「footer」という名前で作成します。

th:fragment="copy" と th:fragment="copy-argument(text)" でテンプレートを共通化（フラグメント）しています。copy-argumentでは、変数としてtextを受け取り、th:text="${text}" で出力しています。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
  <footer th:fragment="copy">
    <span>© 2020 ミルラク</span>
  </footer>
  <footer th:fragment="copy-argument(text)">
    <span>© 2020 ミルラク</span>
    <span th:text="${text}"></span>
  </footer>
</body>
</html>

テンプレートファイルを作成する

共通化（フラグメント）するテンプレートファイルの作成が完了したら、テンプレートファイルを作成します。
今回は「fragment」という名前で作成します。

th:insert または th:replace または th:include でフラグメントを読み込んでいます。それぞれ footer :: copy で「footer.html」で共通化したcopyというテンプレートを呼び出しています。footer :: copy-argument では、引数に表示するテキストを指定しています。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Thymeleafでテンプレートを共通化（フラグメント）する方法</title>
<style>
  body {
    background-color: whitesmoke;
    color: #333;
  }
  .main {
    margin: 45px 0 0 45px;
  }
</style>
</head>
<body>
  <div class="main">
    <!-- th:insertで読み込む -->
    <div th:insert="footer :: copy"></div>
    <!-- th:replaceで読み込む -->
    <div th:replace="footer :: copy"></div>
    <!-- th:includeで読み込む -->
    <div th:include="footer :: copy"></div>
    <!-- 引数あり -->
    <div th:replace="footer :: copy-argument('ここにテキストが入ります')"></div>
  </div>
</body>
</html>

動作を確認する

最後に、ブラウザで「http://localhost:8080/fragment」にアクセスして動作を確認します。
以下のように表示されていたら、動作の確認は完了です。

サンプルのキャプチャ
<div class="main">
  <!-- th:insertで読み込む -->
  <div><footer>
    <span>© 2020 ミルラク</span>
  </footer></div>
  <!-- th:replaceで読み込む -->
  <footer>
    <span>© 2020 ミルラク</span>
  </footer>
  <!-- th:includeで読み込む -->
  <div>
    <span>© 2020 ミルラク</span>
  </div>
  <!-- 引数あり -->
  <footer>
    <span>© 2020 ミルラク</span>
    <span>ここにテキストが入ります</span>
  </footer>
</div>

お疲れさまでした

Thymeleafでテンプレートを共通化（フラグメント）する方法をご紹介しました。
少しでも参考になれば幸いです。

ThymeleafとSpringを一度に学びたくありませんか？

以下の書籍は、Thymeleafを書籍で学びたい人やThymeleafと併せてSpring Frameworkを学習したい人におすすめしている書籍です。
Springについての書籍ですが、Thymeleafの基礎や基本構文から他システムとの連携等30ページほど取り上げられており、ThymeleafとSpringを一度に学べる書籍になっています。
ぜひ一度手に取ってみてください。

Spring徹底入門 Spring FrameworkによるJavaアプリケーション開発
翔泳社
¥1,980 （2022/07/18 00:00時点 | Amazon調べ）
Amazonで見る
Kindleで見る

どんな記事が読みたいですか？

現在、ミルラクでは記事に関するアンケートを実施しています。
ご回答いただいた内容は今後の記事の役立てていきますので、ぜひご回答ください！