これまで、Java の ウェブアプリケーション開発おけるテンプレートエンジンには「JSP」がよく用いられてきました。現在、Spring などのフレームワークでは JSP は非推奨となり、別のテンプレート エンジンの使用が推奨されています。
この記事では、Spring フレームワークと相性がよく、デザイナーとの協業もしやすい「Thymeleaf」テンプレートエンジンについて解説します。
Thymeleaf とは
Thymeleaf は、Spring Boot 互換のテンプレートエンジンです。
サーバー側で動的に変わる部分を、JSP のような拡張タグではなく、HTML の属性値で記述するため、ブラウザでテンプレートを表示しても見た目かわ崩れず、実際の表示に近い形で表示される特徴があります。
Spring Boot で使用できるテンプレートエンジンは複数ありますが、Thymeleafの利用が推奨されています。 Thymeleaf は学習コストが低いことや、HTMLとの親和性が高いことから多くのシステム開発プログジェクトで採用されています。
Thymeleafを使用する
Spring Boot のブロジェエクであれば、Maven や Gradle の依存関係に Thymeleaf 追加するだけで簡単に使い始めることができます。
Thymeleafを依存関係に追加
パッケージ管理に Maven を使用している場合は pom.xml に以下の内容を追加します。
<!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-thymeleaf -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
<version>2.6.1</version>
</dependency>Gradle の場合は build.gradle に以下の内容を追加します。
// https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-thymeleaf
implementation group: 'org.springframework.boot', name: 'spring-boot-starter-thymeleaf', version: '2.6.1'テンプレートファイルの作成と表示
Thymeleaf のデフォルトの設定では、src/main/resources/templates の下にあるテンプレート ファイルが検索対象となります。設定で変更することも可能ですが、特に理由がないかぎりはデフォルトのディレクトリを使用した方がいいでしょう。
それでは、テンプレートを作成してみましょう。
以下のテンプレートは、Java 側で設定された 変数 message を表示するだけの簡単なテンプレートです。このファイルをsrc/main/resources/templates の下に hello.html という名前で保存します。
<!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>テンプレートを作成したら、次はコントローラー側の実装を行います。HelloController という名前でクラスを作成し、model.addAttribute で先ほど作成したテンプレートに値を渡す index メソッドを作成します。
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class HelloController {
@GetMapping("/")
public String index(Model model) {
model.addAttribute("message", "Hello Thymeleaf !!");
return "hello";
}
}テンプレートと Java コードの準備ができたら、実行して動きを確認します。
HTMLファイルとして表示した時の値を設定
前述したように、Thymeleaf で使用する th:text などの属性は、 HTMLファイルとして表示した時の表示に影響を与えません。さらに、次のように th:text 属性と、タグの中の値を両方設定すると、HTML ファイルしてテンプレート を表示した時は「Hello Message」が、Spring (Java) 経由で実行された時は message 変数の値が表示されます。
<body>
<h1 th:text="${message}">Hello Message</h1>
</body>このように、Thymeleaf では、デザイナーとHTMLを共有するようなケースでは、JSP などに比べると遥かに共有がやりやすくなりました。
インラインで表示
Thymeleaf では、th:text などの属性で書くことが多いですが、インライン形式でも、サーバー側の処理で設定された変数の値を表示できます。
インライン形式で HTML に値を出力する時は、[[変数または値]] の形式で指定します。
先ほど作成した HTML をインライン形式で書くと、次のようになります。
<!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>[[message]]</p>
</body>
</html>ただし、インライン形式で指定した場合、テンプレートを HTML として表示した時に、インラインの式がそのままブラウザ上に表示されます。
まとめ
Java の Web 開発で、JSP に変わる有力候補である Thymeleaf のインストール方法や簡単な使い方を紹介してきました。
冒頭でも述べましたが、Spring Boot アプリケーションにおいて JSP はすでに非推奨の位置付けに設定されており、別の新しいテンプレートエンジンの使用が推奨されています。その中でも Thymeleaf は Spring Boot 互換のテンプレートエンジンで、pom.xml などの パッケージ管理ツールの依存関係に追加するだけで簡単に使用できます。
次回は、もっと詳しく Thymeleaf の使用方法を解説していきます。
日本でも Spring Boot + Thymeleaf での開発が盛んに行われており、Thymeleaf に関する日本語の書籍や Webページが多数あり、現在では非常に学習しやすい環境にあります。