[Java] Spring BootでThymeleafを使ってみよう！（基本編）｜スタッフブログ｜株式会社インソースマーケティングデザイン

インソースマーケティングデザイン

2017.08.22 システム

[Java] Spring BootでThymeleafを使ってみよう！（基本編）

こんにちは。エンジニアの高田です。
お盆休みあいにくの雨続きで、楽しみが半減しました。。。

前回、Javaのフレームワーク「Spring Boot」の入門編ということで、「Hello World!」を表示させてみました。
今回は、Spring Bootで使用するテンプレートエンジン「Thymeleaf」について紹介します。

利用可能なテンプレートエンジン
Thymeleafとは
Thymeleafを使ってみよう
実行＆確認

利用可能なテンプレートエンジン

Spring Bootで利用可能なテンプレートエンジンはいくつかあります。

▽利用可能なテンプレートエンジン
・FreeMarker
　　　　表示する場所に${○○}を埋め込みます。制御は<#○○>。
　　　　HTMLファイルを表示すると、これらのタグはHTMLに影響を与えてしまいます。

・Groovy
　　　　Java仮想マシン上で動作するスクリプトです。
　　　　HTMLとはまったく異なるコード体系なので、学習コストが高いと思われます。

★Thymeleaf
　　　　th:○○という属性をHTMLタグに追加します。独自タグを使用しないため、
　　　　HTMLファイルを表示しても、HTMLを崩さず表示できます。

・Mustache
　　　　幅広い言語に対応するテンプレートエンジン（PHP,Ruby…）です。
　　　　{{}}記号を使い、変数などをHTMLに埋め込みます。

※JSPは避けるべきと書かれています。
　Jar,WarファイルにしてJavaサーバにデプロイしなくてはいけないためです。

Thymeleafとは

「Thymeleaf（タイムリーフ）」とはJavaテンプレートエンジンです。
MVCモデルでいう「V（ビュー）」にあたる部分です。
Spring Bootでは、上記のように利用可能なテンプレートエンジンがいくつかありますが、Thymeleafが推奨されているようです。
学習コストやHTMLとの親和性などがThymeleafが多く選ばれる理由でしょうか。
ドキュメントも充実しています。
▽Thymeleafチュートリアル（日本語）

Thymeleafを使ってみよう

前回使用したプロジェクトをカスタマイズしてみます。
ビルドツールは「Gradle」を使用しています。
「build.gradle」ファイルに「Thymeleaf」を使うよ～という定義がされていることを確認します。（// (1)「Thymeleaf」の定義）
前回、後で使うと思ってプロジェクト作成時、「Thymeleaf」を追加しておきました。
定義がない場合は下記の定義を追加すれば大丈夫です。

/BLG_SpringBoot/build.gradle

	buildscript {
	ext {
	springBootVersion = '1.5.4.RELEASE'
	}
	repositories {
	mavenCentral()
	}
	dependencies {
	classpath("org.springframework.boot:spring-boot-gradle-plugin:${springBootVersion}")
	}
	}

	apply plugin: 'java'
	apply plugin: 'eclipse'
	apply plugin: 'org.springframework.boot'

	version = '0.0.1-SNAPSHOT'
	sourceCompatibility = 1.8

	repositories {
	mavenCentral()
	}


	dependencies {
	compile('org.springframework.boot:spring-boot-starter-thymeleaf') // (1)「Thymeleaf」の定義
	compile('org.springframework.boot:spring-boot-starter-web')
	runtime('org.springframework.boot:spring-boot-devtools')
	testCompile('org.springframework.boot:spring-boot-starter-test')
	}

view raw build.gradle hosted with ❤ by GitHub

今回は「ThymeleafController」を作ってみます。
/BLG_SpringBoot/src/main/java/com/marineroad/springboot/ThymeleafController.java

	package com.marineroad.springboot;

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

	@Controller // (1)
	public class ThymeleafController {

	/**
	* Thymeleaf 基本編
	*
	* @param mav
	* ModelAndViewクラステンプレートで利用するデータ類とビューに関する情報をまとめて管理するクラス
	* @return
	*/
	@RequestMapping("/thdemo")
	public ModelAndView index(ModelAndView mav) {

	// 変数式
	// ・コントローラーからテンプレートに値を渡す
	// ・変数「msg」に値を設定
	mav.addObject("msg", "コントローラーからテンプレートに値を渡す"); // (2)

	// 使用するビューを設定
	mav.setViewName("thdemo"); // (3)

	return mav;
	}

	}

view raw ThymeleafController.java hosted with ❤ by GitHub

(1) 前回は「@RestController」でしたが、今回はビューを使用するので
　　「@Controller」アノテーションをつけました。
　　「@Controller」はWebページ用のコントローラーで使用します。
　　MVCモデルでいう「C（コントローラー）」にあたります。

(2) コントローラーからテンプレートへ値を渡す方法はいくつかありますが、
　　今回は「ModelAndViewクラス」を使用しています。
　　このモデルに変数「msg」に値を設定して、テンプレートに渡しています。

(3) 使用するビューを設定しています。設定した名称のテンプレートファイルを
　　「/src/main/resources/templates」に準備します。

上記コントローラーで指定したビューを作成します。
/BLG_SpringBoot/src/main/resources/templates/thdemo.html

	<!DOCTYPE html>
	<html xmlns:th="http://www.thymeleaf.org">
	<head>
	<meta http-equiv="Content-Type" content="text/html" charset="UTF-8" />
	<title>Thymeleaf 基本編</title>
	<style>
	h1 {font-size: 2rem; border-bottom: solid 3px #4caf93;}
	h2 {font-size: 1.6rem; border-bottom: solid 1px #4caf93;}
	p {padding-left: 30px;}
	table {padding-left: 30px; border-spacing: 0;}
	table th {background-color: rgba(76, 175, 147, 0.175);}
	table th, td {padding: 5px;}
	</style>
	</head>
	<body>
	<h1>Thymeleaf 基本編</h1>
	<h2>1.記述方法</h2>
	<h3>(1)変数式（${...}）</h3>
	<p th:text="${msg}"></p> <!-- (1) -->
	</body>
	</html>