見出し画像

ThymeleafでHTMLをパーツに分解して利用する方法 フラグメント

ymzkjpx blog

■ 何をするのか

いくつかのHTMLファイルをパーツの様に組み合わせて扱う方法をThymeleafを使って実現する。Thymleafにはフラグメントと呼ばれる機能があり、フラグメントを利用することでHTMLを分割して作成し、パーツのように呼び出すことができる。この機能を使えばHTMLファイルを分業的に作成できることや、見た目が近しいHTMLファイルを量産するときなどに役立つ。
以下は完成予想図である。非常に簡素なHTMLだが、フラグメント機能を説明することに絞っているためあえて簡素にしている。

画像1


■ 前提

動作環境を掲示する。

環境
OS : macOS Mojave 10.14
JDK : jdk1.8.0_231.jdk
IDE : IntelliJ IDEA
ビルドツール : Gradle 6.4.1
Spring Boot バージョン : 2.3.2
Thymeleaf : 3.0
main
.
├── java
│   └── com
│       └── example
│           └── hellospringboot
│               ├── HelloSpring.java
│               └── HelloSpringBootApplication.java
└── resources
   ├── application.properties
   ├── messages.properties
   ├── static
   └── templates
       ├── test1.html
       └── header.html

今回は「test1.html」が「header.html」を呼び出す処理を想定する。


■ 要約

フラグメント機能を利用する際には、呼び出すHTMLファイルと呼び出されるHTMLファイルそれぞれに目印となる記述を加筆する必要がある。以下はポイントだけ絞ったようやくである。

・パーツ側（呼び出される側）

構文
<タグ名 th:fragment="フラグメント名">

実例
<div th:fragment="frag_body">


・本体側（呼び出す側）

構文
<タグ名 th:include="HTMLファイル名 :: フラグメント名">

実例
<div th:include="header :: frag_body">

この呼び出し方は「<style>」タグに置いても有効である。



■ 全体の流れ

1. test1.htmlの実装（呼び出す側）
2. header.htmlの実装（呼び出される側）
3. コントローラーの実装
4. 実行



■ 実装

1. test1.htmlの実装（呼び出す側）
test1.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style th:include="header :: frag_style"></style>
</head>
<body>
<div th:include="header :: frag_body"></div>
<div>
   <h1>Main contents</h1>
</div>
</body>
</html>


ポイントは次の箇所である。headerという名前のHTMLをtemplatesディレクトリ配下から探し出し、header.html内のfrag_styleという名前のフラグメントを見つけ、適用させている。

<style th:include="header :: frag_style"></style>


また下部の「frag_body」についても同様の処理が行われている。

<div th:include="header :: frag_body"></div>


2. header.htmlの実装（呼び出される側）
header.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style th:fragment="frag_style">
       .fragment_title {
           padding: 0rem 1rem;
           top: 0px;
           margin: 0rem;
       }
       .fragment_hr {
           border: solid 3px lightgray;
           margin-bottom: 4rem;
       }
   </style>
</head>
<body>
<div th:fragment="frag_body">
   <h1 class="fragment_title">This is sample page from src/main/resources/messages.properties.</h1>
   <hr class="fragment_hr">
</div>
</body>
</html>


ポイントは次の箇所である。styleタグを「frag_style」の名前でThymeleafに渡している。この処理ではThymeleafに「frag_style」のフラグメントを記憶させる処理に相当する。
もし、呼び出す際は、「ファイル名」と「frag_style」の2つを指定して呼び出される。

<style th:fragment="frag_style">


また、下部の「frag_body」についても同様の処理が行われている。

<div th:fragment="frag_body">



3. コントローラーの実装
HelloSpring.java

package com.example.hellospringboot;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.servlet.ModelAndView;

@Controller
public class HelloSpring {
   @RequestMapping(value = "/", method = RequestMethod.GET)
   public ModelAndView getTest1(ModelAndView mav) {
       mav.setViewName("test1");
       return mav;
   }
}

このコントローラに関して特筆することはないが一応説明しておくと、このコントローラではtest1.htmlを返却する処理が記述されている。
具体的には「localhost:8080」宛にHTTP.GETリクエストが行われた際にtest1.htmlを返却する処理を行っている。


4. 実行
以下は実行結果である。上部がheader.htmlから取り出したパーツ部（赤枠）であり、下部がtest1.htmlにあったパーツ部（青枠）である。

画像2

それぞれのHTMLが合成され、１つのHTMLファイルが生成されていることが分かる。またCSSもフラグメント化可能であり、結合出来ていることが分かる。


■ まとめ

Spring Boot 上でThymeleafを使ってHTMLファイルを結合する方法について紹介した。フラグメント機能はWebアプリケーション開発において非常に役立つ機能なのでぜひマスターしたい。


この記事が気に入ったらサポートをしてみませんか？