Spring BootのThymeleaf（タイムリーフ）入門 – テンプレートエンジンの基礎を学ぼう！

2025年2月21日 2025年2月21日山崎講師

山崎講師

こんにちは。ゆうせいです。
今回は Spring Boot（スプリングブート）のThymeleaf（タイムリーフ） について、初心者向けにわかりやすく解説します！

Spring Bootを使うと、バックエンドの開発がスムーズになりますが、フロントエンド（HTML部分）と組み合わせるにはどうすればいいのでしょうか？
そこで登場するのが Thymeleaf（タイムリーフ） というテンプレートエンジンです。

1. Thymeleafとは？

テンプレートエンジンとは？

Thymeleafは テンプレートエンジン と呼ばれるものの一種です。
テンプレートエンジンとは、 HTMLの中に変数や条件分岐などの動的な処理を埋め込める仕組み です。

例えば、以下のようなHTMLファイルがあったとします。

<p>こんにちは、{{ user.name }} さん！</p>

これは、変数 user.name に「太郎」が入っていた場合、以下のように変換されます。

<p>こんにちは、太郎 さん！</p>

このように、データを埋め込んだHTMLを作成できるのがテンプレートエンジンです。

Thymeleafの特徴

Thymeleafは、以下の特徴を持っています。

✅ Spring Bootとの相性が良い → 設定不要ですぐに使える
✅ HTMLとしてそのまま開ける → 開発中もブラウザで確認しやすい
✅ 直感的な記述ができる → 変数埋め込みやループ処理が簡単

それでは、Spring BootでThymeleafを使う方法を見ていきましょう！

2. Spring BootでThymeleafをセットアップ

Spring BootでThymeleafを使うには、まず 依存関係（dependencies） を追加する必要があります。

① Thymeleafの依存関係を追加

pom.xml（Mavenプロジェクトの場合）に以下を追加します。

<dependencies>
    <!-- Spring Boot用のThymeleaf -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
</dependencies>

これでThymeleafが使えるようになります！

3. Thymeleafの基本的な使い方

それでは、具体的にどのようにHTMLにデータを埋め込むのか見ていきましょう。

① 変数の埋め込み

Spring Bootのコントローラーで以下のようなデータを渡すとします。

@Controller
public class HelloController {
    @GetMapping("/hello")
    public String hello(Model model) {
        model.addAttribute("name", "太郎");
        return "hello";
    }
}

この name というデータを hello.html で表示するには、以下のように書きます。

<p>こんにちは、<span th:text="${name}"></span> さん！</p>

これにより、ブラウザには次のように表示されます。

こんにちは、太郎 さん！

② 条件分岐（if文）

例えば、ユーザーがログインしているかどうかで表示を切り替えたい場合は、以下のように th:if を使います。

<p th:if="${isLoggedIn}">ログイン中です</p>
<p th:unless="${isLoggedIn}">ログインしてください</p>

③ 繰り返し処理（ループ）

リストを画面に表示する場合、 th:each を使います。

Controller（データの準備）

@GetMapping("/users")
public String users(Model model) {
    List<String> users = List.of("太郎", "花子", "次郎");
    model.addAttribute("users", users);
    return "users";
}

HTML（表示）

<ul>
    <li th:each="user : ${users}" th:text="${user}"></li>
</ul>

表示結果:

- 太郎
- 花子
- 次郎

④ フォームの送信

Thymeleafを使ってフォームを作る場合も、簡単にデータをバインドできます。

フォームのHTML

<form th:action="@{/submit}" method="post">
    <input type="text" name="username" th:value="${username}" />
    <button type="submit">送信</button>
</form>

Controller側

@PostMapping("/submit")
public String submit(@RequestParam String username, Model model) {
    model.addAttribute("message", "こんにちは " + username + " さん！");
    return "result";
}

4. まとめ

Thymeleafは、Spring Bootと組み合わせることで、HTMLのテンプレートを簡単に作成できる強力なツールです。

おさらい！ ✔ 変数の埋め込み → th:text="${変数}"
✔ 条件分岐 → th:if や th:unless
✔ 繰り返し処理 → th:each
✔ フォームのデータ送信 → th:action でControllerへ送信

このように、Thymeleafを使えば動的なWebページを簡単に作れます！
ぜひ実際にSpring Bootで試してみてくださいね。

セイ・コンサルティング・グループの新人エンジニア研修のメニューへのリンク

投稿者プロフィール

山崎講師代表取締役

セイ・コンサルティング・グループ株式会社代表取締役。
岐阜県出身。
2000年創業、2004年会社設立。
IT企業向け人材育成研修歴業界歴20年以上。
すべての無駄を省いた費用対効果の高い「筋肉質」な研修を提供します！
この記事に間違い等ありましたらぜひお知らせください。