【Spring修行】ビューの共通部分を✂️抜き出す方法

f:id:hira98:20190617084600p:plain

【結論】

  • ThymeleafとはSpring開発で使用するテンプレートエンジン。

  • Thymeleafで実装されたビューは、JSPと違いブラウザでファイルを直接開いても表示することができる。

  • これによって、エンジニアとデザイナーで作業を分担しやすくなった。

  • ブラウザで直接開いた時の表示結果が変わってくるが、Thymeleaf Layout Dialectを使うことでビューの共通部分を抜き出すこともできる。

【目次】

はじめに

Spring修行の途中経過を書きます。

hira98.hatenablog.com

今回は、ビューの<head>や<header>、<footer>など共通のする部分を抜き出してみました。

前提条件は以下です。

  • 開発環境：STS
  • 開発言語：Java
  • フレームワーク：Spring
  • プロジェクト管理ツール：Maven
  • テンプレートエンジン：Thymeleaf、Thymeleaf Layout Dialect

pomの設定

使用するライブラリを追加する必要があります。

Thymeleafに関してはプロジェクト作成時に追加することで、pom.xmlに反映されます。

f:id:hira98:20190617084618p:plain

ビューの共通化に使用するThymeleaf Layout Dialectに関しては自動反映されないため、以下の記述をpom.xmlに追加する必要があります。

<dependencies>
  <dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
  </dependency>
  <!-- ここから追加 -->
  <dependency>
    <groupId>nz.net.ultraq.thymeleaf</groupId>
    <artifactId>thymeleaf-layout-dialect</artifactId>
  </dependency>
  <!-- ここまで追加 -->
</dependencies>

イメージ

ビューを共通化しない場合は、下図のようになります。

f:id:hira98:20190617084633p:plain

ビューを共通化する場合は 、下図のようになります。

f:id:hira98:20190617084647p:plain

実装ソース

共通部分

htmlタグにxmlns:layout ="http://www.ultraq.net.nz/thymeleaf/layout"を追加することで共通部分のビューファイルであること表します。

カスタマイズしたい部分のタグにはlayout:fragment="content"属性を追加します。

<!-- ファイル名：Layout.html -->
<!DOCTYPE html>
<html xmlns           ="http://www.w3.org/1999/xhtml"
      xmlns:th        ="http://www.thymeleaf.org"
      xmlns:layout    ="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title th:text=#{app.title}>アプリタイトル</title>
  <script src="content-script.js"></script>
</head>
<body>
  <header>
   <p>タイトル</p>
   <hr>
  </header>

  <section layout:fragment="content">
    <p>section</p>
  </section>
</body>
</html>

カスタマイズ部分

htmlタグにlayout:decorator="共通定義のファイル名"を指定することでカスタマイズ部分のビューファイルであること表し、かつ使用する共通部分のビューファイルを指定します。

カスタマイズしたい部分のタグにはlayout:fragment="content"属性を追加します。

<!-- ファイル名：hello.html -->
<!DOCTYPE html>
<html xmlns           ="http://www.w3.org/1999/xhtml"
      xmlns:th        ="http://www.thymeleaf.org"
      xmlns:layout    ="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="Layout">
<body>
  <section layout:fragment="content">
    <h2>Hello World 1</h2>
    <p th:text="${name}">名前</p>
    <p th:text="${age}">年齢</p>
  </section>
</body>
</html>

生成されるビューファイル

実装ソースから生成されるビューファイルは以下になります。

layout:fragment="content"属性を指定した<section>タグだけがカスタマイズ部分い置き換わっていることが確認できます。

<!DOCTYPE html>
<html xmlns           ="http://www.w3.org/1999/xhtml">
<head>
  <title >タイトル</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <script src="content-script.js"></script>
</head>
<body>
  <header>
   <p>タイトル</p>
   <hr>
  </header>

  <section>
    <h2>Hello World 1</h2>
    <p>岩谷　尚文</p>
    <p>20</p>
  </section>
</body>
</html>

参考情報

www.seshop.com

さいごに

念の為書いておきますが、私の名前は岩谷尚文ではないですからね🤪