Spring フレームワークのテンプレートエンジンはいくつかありますが、その中でも Thymeleaf は Spring 公式ページでも推奨され、使いやすいと人気です。
これまで Java の Web アプリのテンプレートエンジといえば、 JSP が採用されてきましたが、JSP 独自のタグは学習コストも高く、デザイナとの HTML の共有も難しい状況でしたが、Thymeleaf の登場によりこれらの問題は大きく改善ました。
この記事では、Spring フレームワークで用いられるテンプレートエンジンの Thymeleaf の使い方を解説します。Thymeleaf の設定手順や、簡単な使用方法は以下の記事で解説していますので、こちらもご覧ください。
【関連記事】
▶[Java]テンプレートエンジンのThymeleafとは？インストール方法から使用方法を解説
テキストの表示
簡単なメッセージを表示するサンプルコードを見てみましょう。
まず、次のようなコントローラークラスを作成します。テンプレート（HTML）に渡す変数は model.addAttribute で登録します。
@Controller
public class HelloController {
@GetMapping("/")
public String index(Model model) {
model.addAttribute("message", "メッセージ");
return "hello";
}
}次に Thymeleaf のテンプレートファイルを用意します。
Thymeleaf のテンプレートは、<html> タグに xmlns:th=”http://www.thymeleaf.org”を付けます。また、サーバー側（Java）側で登録した変数は、th:属性名=””${変数名}” の形式で参照できます。
<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Thymeleaf Sample</title>
</head>
<body>
<p th:text="${message}"></p>
</body>
</html>条件分岐
ある条件によって、HTML の出力を切り替える時は th:if または th:unless を使用します。
th:if は指定された条件式が true の時、対象のタグと子要素が出力され、 th:unless はその逆で、条件式が false の時にタグが出力されます。
具体的なサンプルコードを見てみましょう。
次のコードは、年齢（age）が 20以上かそれ未満か出力を切り替える例です。
<body>
<span th:if="${age >= 20}">20歳以上です</span>
<span th:unless="${age >= 20}">20歳未満です</span>
</body>繰り返し
配列・リストなどのコレクションを繰り返す時は、th:each を使用します。
コントローラー側で次のようなリストを作成します。
@Controller
public class HelloController {
@GetMapping("/")
public String index(Model model) {
List<String> list1 = new ArrayList<>();
list1.add("Java");
list1.add("Python");
list1.add("Ruby");
list1.add("PHP");
model.addAttribute("list1", list1);
return "hello";
}
}上で作成したリストを、テンプレート側の HTML で繰り返す場合は、次のように書きます。
<th:block th:each="lang : ${list1}">
<p th:text="${lang}"></p>
</th:block>オブジェクトの繰り返し
クラスなどのオブジェクトのリストを繰り返す場合についても解説します。
コントローラー側で、ID（id）、氏名（name）、メールアドレス（email）の３のプロパティを持つオブジェクトのリストを作成します。
@Controller
public class HelloController {
@GetMapping("/")
public String index(Model model) {
List<User> usres = new ArrayList<>();
// User(id, name, email)
usres.add(new User(1, "Yamada", "yamada@sample.com"));
usres.add(new User(2, "Suzuki", "suzuki@sample.com"));
usres.add(new User(3, "Sato", "sato@sample.com"));
model.addAttribute("users", usres);
return "hello";
}
}オブジェクトの場合、繰り返しの変数名.プロパティ名で、対象の値を出力できます。
<table>
<tr>
<th>ID</th>
<th>Name</th>
<th>EMail</th>
</tr>
<tr th:each="user : ${user}">
<td th:text="${user.id}"></td>
<td th:text="${user.name}"></td>
<td th:text="${user.email}"></td>
</tr>
</table>まとめ
Spring Boot アプリケーションで推奨しているテンプレートエンジンである、Thymeleaf の使用方法について解説してきました。
Thymeleaf は Spring Boot と互換性が高く、pom.xml などの パッケージ管理ツールの依存関係に追加するだけで簡単に使用できます。
構文も、angular や vue.js などの人気 JS フレームワークでよく使われている属性ベースのものであるため、これらの JS フレームワークを体験したことがあれば、Thymeleaf も容易に習得することもできるでしょう。
条件に一致した時と、それ以外の時で処理を行う場合、Java では if ~ else 構文を用いますが、Thymeleaf には else 式はないため、そのような時は th:if および th:unless を組み合わせて使用します。