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
    }
}

使ってみた所感

とりあえず、Javaでテンプレートエンジンとして使う分には十分な機能が備わっていると感じました。

もちろんReactやVueなどと比べるとできることは少ないので、完全にそれらの代替となるというわけではありませんが、あまり動的に何かをしたかったりがない場合は十分ではないでしょうか。

上記はまだ簡単に触ってみただけなので、まだまだ様々な機能があると思います。

是非一度使ってみてはいかがでしょうか？