Thymeleaf（タイムリーフ）入門！初心者でもわかるSpring Bootとテンプレートエンジンの使い方

Spring で Thymeleaf（タイムリーフ）の使い方入門

先生と生徒の会話形式で理解しよう

生徒

「Spring BootでThymeleafを使う理由って何ですか？」

先生

「Thymeleafは、テンプレートエンジンとしてHTMLファイルとJavaコードを効率的に連携させるためによく使われます。フロントエンドとバックエンドを分けず、簡単にHTMLを動的に生成できるんですよ。」

生徒

「なるほど、具体的にはどう使うんですか？」

先生

「それでは、基本の使い方を説明していきましょう。」

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

「1. テンプレートエンジンとは？」の重要ポイントを、初心者の方にも分かりやすく簡潔に解説します。

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要素の中身をサーバ側（Model）から渡された値で置き換えるための基本属性です。見出しや段落の“差し込み口”に使うだけで、固定の文言を動的なテキストに切り替えられます。まずは最小の往復（コントローラで値を用意 → テンプレートで受け取って表示）から確認しましょう。

① コントローラで値を用意する（Modelに詰める）


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の世界へようこそ！");
        model.addAttribute("userName", "太郎");
        return "greeting"; // templates/greeting.html を表示
    }
}

② テンプレートで受け取り、表示位置に差し込む

th:textは要素の中身を丸ごと置換します。${...}の中にはModelへ格納したキー名を書きます。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Greeting Page</title>
</head>
<body>
  <h1 th:text="${message}">ここにメッセージが表示されます</h1>
  <p th:text="'ようこそ、' + ${userName} + ' さん！'">ここに名前が表示されます</p>
</body>
</html>

③ 値がないときのデフォルト文言（エルビス演算子）

未設定時に画面が寂しくならないよう、フォールバックをつけられます。


<p th:text="${message}?:'メッセージはまだありません'">デフォルト文言</p>

④ よくあるミニTips（初心者向け）

プレースホルダは上書き：実際の画面ではth:textの値が優先され、タグ内の元テキストは表示されません。
安全なエスケープ：th:textはHTMLをエスケープして表示します（タグとして解釈されず安全）。
シンプルに始める：まずは見出しや段落の1か所だけに使い、動的表示の感覚をつかむのがおすすめです。

ポイントは「Modelに入れたキーで取り出す」「要素の中身を置換する」「未設定時の見え方も整える」の3つです。まずは1か所に差し込み口を作り、実際に文字が切り替わる体験から始めると、次の属性（条件分岐や繰り返し）にも自然に進めます。

4. th:ifの使い方

「4. th:ifの使い方」の重要ポイントを、初心者の方にも分かりやすく簡潔に解説します。

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. th:eachで繰り返し表示する

実際のWebアプリケーションでは、一覧データを画面に表示する場面が多くあります。Thymeleafではth:eachという属性を使うことで、リストや配列のデータを繰り返し表示できます。例えば、ユーザー一覧や商品一覧などを表示する際によく使われます。

th:eachは「コレクションの中身を1つずつ取り出してHTMLを生成する」仕組みです。まずはコントローラ側でリストデータをModelに格納し、テンプレート側で繰り返し表示を行います。

① コントローラでリストデータを用意する


// コントローラ（イメージ）
List<String> users = List.of("太郎", "花子", "次郎");
model.addAttribute("userList", users);
return "userlist";

② テンプレートで繰り返し表示する

HTMLの要素にth:eachを付けると、リストの数だけ要素が生成されます。


<ul>
  <li th:each="user : ${userList}" th:text="${user}">ユーザー名</li>
</ul>

このコードでは、userListの中にある名前が1つずつ取り出され、liタグとして表示されます。つまり、データ数に応じてHTMLが自動的に増える仕組みです。Spring BootとThymeleafを組み合わせることで、データベースの一覧画面などもシンプルに実装できます。

7. th:hrefでリンクを動的に生成する

「7. th:hrefでリンクを動的に生成する」の重要ポイントを、初心者の方にも分かりやすく簡潔に解説します。

7. th:hrefでリンクを動的に生成する

Webアプリケーションでは、ページ間の移動を行うためのリンクが重要です。Thymeleafではth:hrefという属性を使うことで、URLリンクを動的に生成できます。これにより、Spring Bootのルーティングと連携した安全なリンクを作成できます。

通常のHTMLではhref属性を使いますが、Thymeleafではth:hrefを使うことでURLを動的に解決できます。アプリケーションのパスが変わっても正しくリンクが生成されるため、保守性が高くなります。

リンクの基本例


<a th:href="@{/greeting}">挨拶ページへ移動</a>

パラメータ付きリンク

URLにパラメータを付けることも可能です。検索ページや詳細ページでよく使われます。


<a th:href="@{/user(id=${userId})}">ユーザー詳細を見る</a>

このように、ThymeleafではURL生成もテンプレート内で安全に記述できます。Spring Bootのコントローラと連携することで、画面遷移の管理がシンプルになり、Webアプリケーション開発を効率よく進めることができます。

8. Thymeleafレイアウトで画面構造を共通化する

Webサイトを作る際には、ヘッダーやフッター、ナビゲーションメニューなど、複数ページで共通して使うHTML構造があります。Thymeleafではレイアウト機能を使うことで、共通パーツを再利用できるようになります。これにより、コードの重複を減らし、メンテナンスしやすい構成を作れます。

例えば、共通のヘッダー部分を1つのHTMLファイルとして作成し、各ページから呼び出すことができます。サイト全体のデザイン変更があった場合でも、共通ファイルを修正するだけで全ページに反映されるため効率的です。

共通ヘッダーを作成する例


<!-- fragments/header.html -->
<div th:fragment="header">
  <header>
    <h1>My Spring Boot Site</h1>
  </header>
</div>

ページ側で呼び出す


<div th:replace="fragments/header :: header"></div>

このようにレイアウトを共通化することで、Spring BootとThymeleafを使ったWebアプリケーションの構造が整理されます。ページ数が増えても管理しやすくなるため、実務の開発でもよく使われるテクニックです。

まとめ

ここまで、Spring BootとThymeleafを組み合わせたテンプレートエンジンの基本的な使い方について学んできました。Thymeleafは、JavaのWebアプリケーション開発において非常に人気の高いテンプレートエンジンであり、Spring Bootと組み合わせることでシンプルかつ効率的に動的なWebページを作成できます。

最初に説明したテンプレートエンジンの考え方では、HTMLの雛形にデータを差し込むことでページを生成する仕組みを理解しました。従来のWeb開発ではHTMLとプログラムの境界が分かりにくいケースもありましたが、Thymeleafを使うことで見た目と処理を自然な形で分離できます。そのため、Javaエンジニアだけでなく、HTMLを担当するデザイナーとの協力もしやすくなるというメリットがあります。

Spring Bootの開発では、コントローラでModelにデータを格納し、そのデータをThymeleafテンプレートで表示するという流れが基本になります。例えば、コントローラでユーザー名やメッセージを設定し、HTML側ではth:textを使って値を表示します。このような構造を理解しておくことで、Spring Bootを使ったWebアプリケーションの開発をスムーズに進めることができます。

記事の中では、Thymeleafの代表的な属性であるth:textの使い方についても紹介しました。th:textは、HTMLタグの中身をModelに格納された値で置き換える属性です。これにより、静的なHTMLページを動的なWebページとして表示できます。ユーザー名やメッセージ、商品名など、さまざまな情報をサーバ側からテンプレートへ渡すことができます。

また、条件分岐を行うth:ifについても学びました。Webアプリケーションでは、ログイン状態やデータの有無によって表示内容を切り替えることがよくあります。th:ifを使えば、条件に応じてHTML要素を表示したり非表示にしたりできます。この機能を活用することで、ユーザーの状態に応じた柔軟な画面表示が可能になります。

さらに、一覧画面などで役立つth:eachの使い方も重要なポイントです。データベースやAPIから取得した複数のデータを画面に表示する場合、繰り返し処理が必要になります。th:eachを使うことで、コレクションのデータを順番に取り出してHTMLを自動生成できます。ユーザー一覧、商品一覧、記事一覧など、多くのWebシステムで利用される機能です。

Webページのリンク生成ではth:hrefを利用します。通常のHTMLリンクと似ていますが、ThymeleafではSpring Bootのルーティングと連携してURLを生成できるため、アプリケーション構造が変わっても安全にリンクを作成できます。画面遷移を管理しやすくなるため、Webアプリケーションの保守性も向上します。

そして、複数ページを持つWebサイトではレイアウトの共通化も重要になります。Thymeleafのフラグメント機能を使えば、ヘッダーやフッターなどの共通パーツを再利用できます。これにより、サイト全体の構造が整理され、管理しやすいWebアプリケーションを構築できます。Spring BootとThymeleafの組み合わせは、シンプルでありながら実務レベルのWebシステム開発にも十分対応できる構成です。

次のサンプルでは、Spring BootのコントローラとThymeleafテンプレートを組み合わせたシンプルな例を確認してみましょう。基本的なWebアプリケーションの流れを理解するためのサンプルコードです。

Spring Bootコントローラのサンプル


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 SampleController {

    @GetMapping("/sample")
    public String sample(Model model) {

        model.addAttribute("title", "Spring BootとThymeleafのサンプル");
        model.addAttribute("message", "テンプレートエンジンを使った表示例です");

        return "sample";
    }
}

Thymeleafテンプレートのサンプル


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Sample Page</title>
</head>
<body>

    <h1 th:text="${title}">タイトル</h1>

    <p th:text="${message}">
        ここにメッセージが表示されます
    </p>

</body>
</html>

このように、Spring BootのコントローラでModelにデータを設定し、Thymeleafテンプレートでそのデータを表示するだけで、簡単に動的なWebページを作成できます。Spring BootとThymeleafの基本構造を理解しておくことで、ログイン機能、一覧表示、検索機能など、さまざまなWebシステムの開発へ応用することができます。

Web開発を学び始めたばかりの方でも、Spring BootとThymeleafを組み合わせることで、Javaを使ったWebアプリケーション開発の全体像を理解しやすくなります。HTMLとJavaの連携を体験しながら、小さな画面から少しずつ機能を増やしていくことで、実践的なWeb開発スキルを身につけることができるでしょう。

先生と生徒の振り返り会話

生徒

Spring BootとThymeleafを使うと、HTMLにデータを差し込んで動的なWebページを作れることがよく分かりました。Javaのコントローラでデータを作って、それをテンプレートで表示する流れなんですね。

先生

その通りです。Spring BootのコントローラとThymeleafテンプレートを組み合わせることで、Javaで作ったデータをWebページとして表示できます。これは多くのJava Webアプリケーションで使われている基本構造です。

生徒

th:textやth:if、th:eachなどの属性を使うと、表示内容を柔軟に変更できるのも便利ですね。特に一覧表示のところは、実際のWebシステムでよく使いそうだと思いました。

先生

そうですね。ユーザー一覧や商品一覧、ブログ記事一覧など、多くのシステムで繰り返し表示が使われます。Thymeleafのth:eachはそのような場面でとても役立つ機能です。

生徒

それから、th:hrefでリンクを作る方法も覚えました。普通のHTMLのリンクと似ていますが、Spring Bootのルーティングと連携できるところが便利ですね。

先生

その理解で大丈夫です。ThymeleafはSpring Bootと非常に相性が良く、テンプレートエンジンとして多くのプロジェクトで使われています。基本をしっかり理解しておけば、ログイン機能やデータベース連携などの応用にも進めます。

生徒

今日の内容で、Javaを使ったWebアプリケーション開発のイメージがかなりはっきりしてきました。まずは簡単な画面を作りながら、Thymeleafの使い方に慣れていきたいと思います。

先生

それが一番良い学び方です。小さな画面を作りながら、Spring BootとThymeleafの仕組みを体験していけば、自然とWebアプリケーション開発の理解が深まります。ぜひ実際にコードを書きながら学習を続けてみてください。

この記事を読んだ人からの質問

「この記事を読んだ人からの質問」の重要ポイントを、初心者の方にも分かりやすく簡潔に解説します。

この記事を読んだ人からの質問

プログラミング初心者からのよくある疑問／質問を解決します

Spring BootとThymeleafを組み合わせると、初心者でも動的なWebサイトを作れるというのは本当ですか？

本当です。Spring BootとThymeleafはテンプレートエンジンとして連携しやすく、Javaで作ったデータをModelでテンプレートに渡し、th:textなどのThymeleaf属性で簡単にHTMLへ表示できます。複雑なJavaScriptを使わなくても動的なWebページを作れるため、プログラミング初心者にとって学びやすい組み合わせです。Spring Bootのコントローラで文字列やリストのデータをModelへ入れ、テンプレート側で取り出すだけで、動的なメッセージ表示やページ生成ができます。テンプレートエンジンの中でもThymeleafはHTMLを壊さずに差し込みができるため、初心者がつまずきにくいというメリットがあります。

テンプレートエンジンのThymeleafがHTMLとしてそのまま開けるという特徴はどういう意味ですか？

Thymeleafはテンプレートとして使うHTMLファイルが特殊な拡張子や独自記法ではなく、普通のHTMLファイルとしてブラウザで開いても問題なく表示できるという特徴を持っています。他のテンプレートエンジンはHTMLとして開くとエラーになることがありますが、Thymeleafはth:textやth:ifのような属性を追加する仕組みなので、HTMLの構造を壊さず自然に埋め込みできます。このため、デザイナーが見た目を調整しながら作業し、開発者がSpring BootやJavaでデータを渡すなどの役割分担がとてもやりやすいです。静的なHTMLと動的なデータの橋渡しが柔軟にできる点が、Thymeleafが初心者にもおすすめされる理由です。

Thymeleafは学習コストが低いと言われていますが、その理由は何ですか？

理由は三つあります。HTMLとしてそのまま読み込める、テンプレートエンジンの構文が直感的である、Spring Bootと相性が良いという点です。特にth:textやth:ifは名前の役割が分かりやすいため、プログラミング初心者でも理解できます。また、テンプレートをブラウザで開いて見た目を確認できるのは大きな学習メリットです。

スタースクール：社会人向け実務教育プロジェクト

【職業訓練講師が直接指導】

社会人向けSpring Boot実務セミナー｜職業訓練講師が教えるWebシステム構築の極意

Java入門からSpring Boot実務まで。現場で絶賛される「設計の型」を最短距離で習得。

技術記事の内容を、自分の「スキル」へ変える。

職業訓練講師が最短攻略！社会人向けSpring Bootによる「商用Webシステム構築」の実践。

モダンJava開発の事実上の標準Spring Boot。本セミナーでは、その圧倒的利便性の核にある「DI（依存性の注入）」を完全解剖。「設定より規約」を体現した効率的なアーキテクチャ設計を学び、ThymeleafやSpring Data JPAを組み合わせた、現場で必須となるWebシステムの作り方を60分で濃縮体験します。