Thymeleafを使ってみた - エキサイト TechBlog.

こんにちは。エキサイト株式会社の三浦です。

今回は、Spring Bootでほぼ初めてThymeleafを使ってみたので、使ってみた所感について書いていきます。

Thymeleafとは
Thymeleafの使い方
使ってみた所感

Thymeleafとは

Thymeleafは、Javaで使用するHTMLのテンプレートエンジンです。

Thymeleaf is a modern server-side Java template engine for both web and standalone environments.

www.thymeleaf.org

PHPのLaravelで言うところのbladeのようなイメージとなります。

通常のHTMLファイルのように使うこともできる他、Javaコード側からデータを入れ込んだり、別HTMLファイルを部品のように使ったりできます。

Thymeleafの使い方

Thymeleafは、デフォルトの設定では resources/templates ディレクトリ配下にHTMLファイルを入れることで、そのファイルを認識してくれるようになります。

<!-- resources/templates/index.html -->

<!doctype html>
<html xmlns:th="http://www.thymeleaf.org" lang="ja">

    <head>
        <title>Sample Page</title>
    </head>

    <body>
        <div>hello world!</div>
    </body>
</html>

呼び出す際は、Controllerで resources/templates 以下からのパスを返り値として返します。

@Controller
@RequestMapping()
public class IndexController {

    @GetMapping
    public String index(Model model) {
            return "index"; // resources/templates/index.html を呼び出す場合
    }
}

また、Java側からデータを渡すことも可能です。

<!-- resources/templates/index.html -->

<!doctype html>
<html xmlns:th="http://www.thymeleaf.org" lang="ja">

    <head>
        <title>Sample Page</title>
    </head>

    <body>
        <div th:text="${message}"></div>
    </body>
</html>

@Controller
@RequestMapping()
public class IndexController {

    @GetMapping
    public String index(Model model) {
            model.addAttribute("message", "hello world by Java!");

            return "index"; // resources/templates/index.html を呼び出す場合
    }
}

以下のようにすれば、別HTMLファイルを呼び出すことも可能です。

<!-- resources/templates/layout.html -->
<!-- 共通レイアウト用ファイル -->

<!doctype html>
<!-- fragment機能を使って、本体側からtitleやbodyデータを取得 -->
<html xmlns:th="http://www.thymeleaf.org" lang="ja" th:fragment="layout(title, body)">

    <head>
        <meta charset="UTF-8" />

        <title th:replace="${title}"></title>
    </head>

    <body>
        <p>This is layout</p>

        <div th:insert="${body}"></div>
    </body>
</html>

<!-- resources/templates/index.html -->
<!-- ページ本体ファイル -->

<!doctype html>
<!-- レイアウト側にtitleやbodyデータを渡す -->
<html xmlns:th="http://www.thymeleaf.org"
      lang="ja"
      th:replace="~{layout::layout(~{::title}, ~{::body/content()})}"
>

    <head>
        <title>Sample Page</title>
    </head>

    <body>
        <p>This is page</p>

        <!-- 部品ファイルを呼び出す -->
        <th:block th:replace="~{element}"></th:block>
    </body>

</html>

<!-- resources/templates/element.html -->
<!-- 部品ファイル -->

<p>This is element</p>

@Controller
@RequestMapping()
public class IndexController {

    @GetMapping
    public String index(Model model) {
            return "index"; // 呼び出すのは本体ファイルである resources/templates/index.html
    }
}