Thymeleaf（タイムリーフ）入門！初心者でもわかるSpring Bootとテンプレートエンジンの使い方
生徒
「Spring BootでThymeleafを使う理由って何ですか？」
先生
「Thymeleafは、テンプレートエンジンとしてHTMLファイルとJavaコードを効率的に連携させるためによく使われます。フロントエンドとバックエンドを分けず、簡単にHTMLを動的に生成できるんですよ。」
生徒
「なるほど、具体的にはどう使うんですか？」
先生
「それでは、基本の使い方を説明していきましょう。」
1. テンプレートエンジンとは？
テンプレートエンジンとは、あらかじめ用意したHTMLの「雛形（テンプレート）」に、アプリケーションで用意したデータを差し込んで、最終的なWebページを作る仕組みです。Spring Bootでは、この役割を担う代表的なライブラリとしてThymeleafが使われます。テンプレート側は見た目（HTML）、コード側はデータや処理（Java）と役割を分けつつ、必要な箇所だけを置き換えて表示できます。
Thymeleafの特長は、テンプレートがそのまま通常のHTMLとしても開ける点です。デザイナーはブラウザで見た目を確認し、エンジニアはJavaから値を渡して動的表示を実現できます。学習の最初は「静的なHTMLに、必要な場所だけ差し込みポイントを作る」というイメージで十分です。難しい設定よりも、HTMLに小さな印（属性）を書く感覚で始められます。
次のように、HTMLの表示位置に「ここへデータを入れてね」という印を付けます。ここではメッセージの表示欄を用意しています。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head><title>Hello Thymeleaf</title></head>
<body>
<h1 th:text="${message}">ここにメッセージが入ります</h1>
</body>
</html>
コントローラ側でmessageという名前で文字列を渡すと、上のh1にその内容が差し込まれて表示されます。テンプレートは「雛形」、th:textは「差し込み口」という感覚で捉えると、初心者でも迷わず使い始められます。まずは静的HTMLに差し込みポイントを1つ作るところから練習すると、Spring BootとThymeleafの連携がスムーズに理解できます。
2. なぜThymeleafを使うのか
Thymeleafを選ぶ一番の理由は、「ふつうのHTMLとしてそのまま開ける自然なテンプレート」であることです。デザイナーはブラウザで見た目を崩さず確認でき、エンジニアはテンプレートに最小限の属性だけを足して動的表示へ拡張できます。学習の入り口がやさしく、既存のHTMLを流用しやすい点が大きな利点です。
- 自然テンプレート：テンプレートが通常のHTMLとして閲覧可能。プレビューが簡単で、共同作業が進めやすい。
- Spring MVCとの親和性：
Modelに入れたデータ（キー名）をそのままテンプレートで参照でき、ビュー名＝HTMLファイル名の対応も直感的。 - 属性ベースで分かりやすい：
th:textやth:ifなどの属性をHTMLに付けるだけで、表示・条件分岐などを記述可能。 - 保守性と可読性：見た目（HTML）と処理（Java）を分離しつつ、テンプレートはHTMLらしさを維持。レビューや差分比較がしやすい。
- 拡張しやすい設計：レイアウト、繰り返し、国際化などWeb画面で頻出の要件に段階的に対応できる設計。
特にSpring Bootでは、src/main/resources/templates配下のHTMLを「ビュー名」として自動的に解決します。コントローラで"greeting"を返せばgreeting.htmlが表示される、といった対応がそのまま使えるため、画面追加の流れが理解しやすく、小さく作ってすぐ確認という開発サイクルを回しやすくなります。
コントローラでmessageという名前の値を用意し、テンプレート側ではその値を表示するだけ。まずはこの往復を体験すると、Thymeleafの「シンプルさ」がつかめます。
// コントローラ（イメージ）
model.addAttribute("message", "ようこそThymeleaf");
return "greeting";
// greeting.html（イメージ）
<h1 th:text="${message}">プレースホルダ</h1>
このように、「ビュー名」→「HTML」→「差し込み属性」という一直線の流れで画面を作れるのがThymeleafの強みです。まずは小さな表示から始めて、必要になったら少しずつ属性を追加していくと、初学者でも迷わずステップアップできます。
3. th:textの使い方
th:textは、HTMLの要素内にJavaのデータを挿入するためのThymeleafの属性です。以下の例では、HTMLの中でth:textを使い、コントローラから渡されたデータを表示しています。
package com.example.demo.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class GreetingController {
@GetMapping("/greeting")
public String greeting(Model model) {
model.addAttribute("message", "こんにちは、Thymeleafの世界へようこそ！");
return "greeting";
}
}
このコントローラでは、model.addAttributeメソッドを使ってmessageというデータをgreetingページに渡しています。HTMLの中でth:textを使うと、以下のように表示されます。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Greeting Page</title>
</head>
<body>
<h1 th:text="${message}">ここにメッセージが表示されます</h1>
</body>
</html>
th:textは、HTML要素内にmodel.addAttributeで渡されたデータを表示します。例えば、上記の例では、「こんにちは、Thymeleafの世界へようこそ！」と表示されます。
4. th:ifの使い方
Thymeleafには条件分岐を実現するためのth:ifという属性もあります。th:ifを使うことで、条件に応じてHTML要素を表示したり非表示にしたりすることが可能です。
例えば、以下のようにth:ifを使って特定のメッセージがある場合のみ要素を表示させるコードを見てみましょう。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Conditional Page</title>
</head>
<body>
<p th:if="${message != null}" th:text="${message}">メッセージがここに表示されます</p>
<p th:if="${message == null}">メッセージはありません</p>
</body>
</html>
上記の例では、messageが存在する場合、th:if="${message != null}"で条件が満たされ、messageの内容が表示されます。反対に、messageがnullの場合は、「メッセージはありません」というテキストが表示されます。
5. 実際に表示を確認する
Thymeleafテンプレートの動作を確認するには、Spring Bootアプリケーションを起動し、ブラウザでページにアクセスします。例えば、http://localhost:8080/greetingにアクセスすると、コントローラで設定したメッセージがgreeting.htmlで表示されます。
6. まとめ
この記事では、Spring BootにおけるThymeleafテンプレートエンジンの基本的な使い方について詳しく解説しました。Thymeleafを使えば、HTMLファイルにJavaのデータを埋め込み、動的なウェブページを簡単に構築できます。特に、th:textやth:ifといった便利な属性を使用することで、データの表示や条件分岐をHTML上で実現できます。
また、テンプレートファイルの配置場所やコントローラからのデータの渡し方についても説明しました。src/main/resources/templatesにHTMLを保存し、Modelオブジェクトを使ってデータを渡す方法は、初心者でも簡単に理解できる手順となっています。
以下に、今回の内容を基にしたサンプルコードを再掲します。このコードを参考にして、自分のSpring BootプロジェクトでThymeleafを試してみましょう。
package com.example.demo.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class GreetingController {
@GetMapping("/greeting")
public String greeting(Model model) {
model.addAttribute("message", "Thymeleafで動的なページを作成！");
return "greeting";
}
}
上記のコントローラに対応するHTMLは次の通りです。Thymeleafの属性を使ってデータを表示しています。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Greeting Page</title>
</head>
<body>
<h1 th:text="${message}">ここにメッセージが表示されます</h1>
</body>
</html>
このコードを実行すると、ブラウザでhttp://localhost:8080/greetingにアクセスした際に、「Thymeleafで動的なページを作成！」というメッセージが表示されます。
Thymeleafを活用することで、バックエンドで処理したデータをフロントエンドに簡単に渡すことができ、効率的なウェブアプリケーション開発が可能になります。ぜひこの記事を参考に、独自のプロジェクトを構築してみてください。
生徒
「Thymeleafを使うと、Javaのデータを簡単にHTMLに表示できるんですね！」
先生
「その通りです。特にth:textやth:ifのような属性は、動的な表示や条件分岐に非常に便利ですよ。」
生徒
「テンプレートのフォルダ構成も分かりやすいので、ファイルを管理しやすいですね。」
先生
「その通りです。Spring BootとThymeleafの組み合わせは、初心者にも最適な開発環境です。」
生徒
「次はth:eachを使ってリストデータを表示する方法を試してみたいです！」
先生
「良いですね。リストやテーブルの表示にもThymeleafは最適です。次回はその方法について詳しく説明しましょう！」
この記事を読んだ人からの質問
