tech.chakapoko.com
Home / Java / Thymeleaf

[Java]Thymeleafの基本的な使い方

目次

基本的な使い方

Thymeleaf は Web フレームワークに組み込んで使われることが多いですが、まず単体での使い方を紹介します。

基本的な使い方は次の通りです。

  1. 用途に応じて TemplateResolver を選択し、設定します。
  2. TemplateEngine のインスタンスを作り TemplateResolver をセットします。
  3. Context オブジェクトにパラメータをセットし、TemplateEngine#process に渡します。

サンプルコード

pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.example</groupId>
    <artifactId>example</artifactId>
    <version>1.0.0-SNAPSHOT</version>
    <packaging>jar</packaging>
    <name>example</name>

    <dependencies>
        <dependency>
            <groupId>org.thymeleaf</groupId>
            <artifactId>thymeleaf</artifactId>
            <version>3.0.11.RELEASE</version>
        </dependency>
    </dependencies>

</project>

src/main/java/com/example/Example.java

package com.example;

import org.thymeleaf.TemplateEngine;
import org.thymeleaf.context.Context;
import org.thymeleaf.templateresolver.ClassLoaderTemplateResolver;

public class Example {

    public static void main(String[] args) {
        ClassLoaderTemplateResolver resolver = new ClassLoaderTemplateResolver();
        resolver.setPrefix("template/");
        resolver.setSuffix(".html");
        TemplateEngine engine = new TemplateEngine();
        engine.setTemplateResolver(resolver);

        Context context = new Context();
        context.setVariable("title", "ThymeleafExample");
        context.setVariable("text", "Hello");
        String html = engine.process("default", context);
        System.out.println(html);
    }

}

src/main/resources/template/default.html

<html>
  <head>
    <title th:text="${title}"></title>
  </head>
  <body>
    <p th:text="${text}"></p>
  </body>
</html>

実行結果

$ mvn -q compile exec:java -Dexec.mainClass=com.example.Example
SLF4J: Failed to load class "org.slf4j.impl.StaticLoggerBinder".
SLF4J: Defaulting to no-operation (NOP) logger implementation
SLF4J: See http://www.slf4j.org/codes.html#StaticLoggerBinder for further details.
<html>
<head>
    <title>ThymeleafExample</title>
</head>
<body>
<p>Hello</p>
</body>
</html>

属性

th:text

テキストを表示したい時は th:text を使います。

<span th:text="${title}"></span>

th:text は自動でエスケープをします。 なので例えば <h1>Hello</h1> をパラメータとして渡すと次のような HTML が出力されます。

<span>&lt;h1&gt;Hello&lt;/h1&gt;</span>

th:utext

自動エスケープをしたくなければ th:utext を使います。

<span th:utext="${html}"></span>

<h1>Hello</h1> をパラメータとして渡すと次の HTML が出力されます。

<span><h1>Hello</h1></span>

th:each

繰り返しには th:each を使います。

<ul>
  <li th:each="fruit: ${fruits}" th:text="${fruit}"></li>
</ul>

th:if and th:unless

条件分岐には th:if または th:unless を使います。

<ul>
  <li th:each="num: ${nums}" th:if="${num} % 2 == 0" th:text="${num}"></li>
</ul>
<ul>
  <li th:each="num: ${nums}" th:unless="${num} % 2 == 0" th:text="${num}"></li>
</ul>

1 から 5 までの配列をパラメータとして渡すと次の HTML が出力されます。

<ul>
  <li>2</li>

  <li>4</li>
</ul>
<ul>
  <li>1</li>

  <li>3</li>

  <li>5</li>
</ul>

th:switch

条件分岐には th:switch を使うこともできます。

<div th:switch="${num}">
  <p th:case="1" th:text="A"></p>
  <p th:case="2" th:text="B"></p>
  <p th:case="3" th:text="C"></p>
  <p th:case="*" th:text="D"></p>
</div>

パラメータとして 3 を渡すと次の HTML が出力されます。

<div>
  <p>C</p>
</div>

タグ

th:block

th:block は属性のコンテナとして使うタグです。

条件などを記述しているタグが出力時には消えてほしい場合に役立ちます。

<th:block th:if="${#strings.equals(env, 'prod')}">
  <span>only</span>
  <span>for</span>
  <span>production</span>
</th:block>

このテンプレートを env == "prod" で出力した場合次のように出力されます。

  <span>only</span>
  <span>for</span>
  <span>production</span>

演算子

算術演算子

<span th:text="1 + 2"></span>
<span th:text="1 - 2"></span>
<span th:text="1 * 2"></span>
<span th:text="1 / 2"></span>
<span th:text="1 % 2"></span>

比較演算子

<, > は HTML 中では使えないので &gt;, &lt; を使います。

<span th:text="1 &gt; 2"></span>
<span th:text="1 &lt; 2"></span>
<span th:text="1 &gt;= 2"></span>
<span th:text="1 &lt;= 2"></span>
<span th:text="1 == 2"></span>
<span th:text="1 != 2"></span>
Back to top