Spring boot + Thymeleaf 超入門 - 山崎屋の技術メモ

過去の記事で Spring boot を使用した、簡単な Web アプリケーションを作りました。

Eclipse + Spring boot で簡単な WEB アプリの作成 - 山崎屋の技術メモwww.shookuro.com

このときは JSP やテンプレートエンジンなどを使用せず、 "Hello! Spring Boot!!" という文字列をテキストとして返すアプリケーションでした。

今回はテンプレートエンジン Thymeleaf を使用した最小限の Web アプリケーションを作りたいと思います。

Spring boot の入門としてお読みいただければうれしいです。

Thymeleaf とは

読み方は「タイムリーフ」。

Thymeleaf とは HTML の中に Thymeleaf のタグを埋め込むことにより Web ページ（ view ）を作成するテンプレートエンジンです。

アプリケーションサーバに組み込んで動的な画面として表示するだけでなく、単体の HTML としてブラウザに表示もできます。（ Tymeleaf のルールに従って作った HTML テンプレートは HTML の構文としても正しいです。）

なので都度ブラウザで確認しながら画面をデザインすることができます。

厳密ではないですが、簡単で作りやすい JSP くらいに考えていいのではないでしょうか。

開発環境には STS ( Spring Tool Suite ) を使用しています。

Spring Tool Suite （ STS ）インストール - 山崎屋の技術メモ

プロジェクトの作成

Package Explorer の何もない部分を選択し、右クリック → New → Spring Stater Project を選択します。

New Spring Starter Project のダイアログが開くので、適当に入力して Next をクリックします。

依存関係を指定する画面に遷移します。Template Engines に Thymeleaf を選択。また、Web に Web を選択します。文字で説明するとわけ分かりませんが、下の赤枠のように選択すればOKです。そして Finish をクリックします。

少し待つと demo プロジェクトが作成されます。ファイル構成は次のとおりです。

コントローラとThymeleaf テンプレートの追加

まず、コントローラを追加します。org.yyama パッケージ配下に以下のクラス（DemoController）を作りました。

package org.yyama;

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

@Controller
public class DemoController {

	@RequestMapping("/")
	public String index(Model model) {
		model.addAttribute("msg", "Hello! Thymleaf!!");
		return "index";
	}
	
}

　
コントローラは main メソッドを持つ起動クラス（今回は DemoApplication クラス）と同じパッケージ、もしくはその子孫パッケージに配置する必要があります。
　

そして、resources の templates に以下のような index.html を格納します。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8" />
    <title>demo</title>
</head>
<body>
<p th:text="${msg}">ここの文字列は、実行時に ${msg} で置換されます。</p>
</body>
</html>