【Spring Boot】「Thymeleaf(タイムリーフ)」でビューを作ろう。(Hello World)

Spring Bootでは、「Thymeleaf(タイムリーフ)」というテンプレートエンジンでビューを作るのが推奨されています。

JSPで作らないのか？

JavaでのWeb開発になれている方であれば、誰しもビューといえば、「JSP」というイメージがある方が多いと思います。

しかし、Spring Boot(特に、1.2以降）は、JSPの利用を推奨しておらず、「Thymeleaf」等のテンプレートエンジンを使うことが推奨されています。

「Thymeleaf(タイムリーフ)」でビューを作る。

それでは、実際に、「Thymeleaf」でビューを作っていきましょう。

「Thymeleaf(タイムリーフ)」のインストール

まずは、pom.xmlに対して、下記の記述を追加します。

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-thymeleaf</artifactId>

</dependency>

これが、「Thymeleaf」の「dependency」にあたります。

「Thymeleaf」でテンプレートファイルを作る。

それでは、ビューの元となるテンプレートファイルを作りましょう。

SpringController.java(コントローラ）

package com.example.demo;

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

@Controller
public class SpringController {

    @RequestMapping("/hello")
    public String hello(Model model) {
        model.addAttribute("helloworld", "Hello World");
        return "hello";
    }
}

package com.example.demo;

import org.springframework.stereotype.Controller;

import org.springframework.ui.Model;

import org.springframework.web.bind.annotation.RequestMapping;

@Controller

public class SpringController {

@RequestMapping("/hello")

public String hello(Model model) {

model.addAttribute("helloworld", "Hello World");

return "hello";

}

引数のModel

Modelは、コントローラと、ビューの間で値を共有するためのクラスです。

役割としては、JSP/Servletで言えば、セッションと同じですね。

下記のようにモデルに値を設定することで、ビューでその変数を使うことができるようになります。

モデルのインスタンス.addAttribute("変数名", "値");

1	モデルのインスタンス.addAttribute("変数名", "値");

また、メソッドの戻り値でStringの文字列を返していますが、この文字列を「main/resources/templates/(文字列).html」という形で検索します。

hello.html(テンプレート）

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Hello World!</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
    <p th:text="${helloworld}" />
</body>
</html>

<!DOCTYPE HTML>

<head>

<title>Hello World!</title>

</head>

<body>

</body>

</html>

これがテンプレートファイルになります。JSPではなく、HTMLファイルになりましたね。

「main/resources/templates」の下に配置します。

th:text

これは、「Thymeleaf(タイムリーフ)」用の属性です。

pタグに以下のように記述することで、下記の変換が行われます。

<p th:text="${helloworld}" />

1	<p th:text="${helloworld}" />

↓↓↓

<p>コントローラから受ける変数</p>

1	<p>コントローラから受ける変数</p>

実行結果

ModelAndViewでソースを書き直す。

先ほどのサンプルでは、Modelを使って、コントローラとビューで値を共有しました。

今度は、ModelAndViewというクラスを使っても同じように実装できるのでご紹介します。

HTMLテンプレート部分は同じで、コントローラだけ下記のように書き換えます。

package com.example.demo;

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

@Controller
public class SpringController {

    @RequestMapping("/hello")
    public ModelAndView hello(ModelAndView mav) {
    	mav.setViewName("hello");
    	mav.addObject("helloworld", "Hello World!(ModelAndViewより)");
        return mav;
    }
}