初心者向けThymeleaf 基本構文の使い方まとめ！Spring BootとThymeleafの連携

Thymeleaf 基本構文の使い方まとめ

新人と先輩の会話形式で理解しよう

新人

「先輩、Thymeleafってよく聞くけど、どんなものなんですか？」

先輩

「Thymeleafは、JavaのSpring Bootでよく使われるテンプレートエンジンだよ。HTMLに埋め込んで使えるから便利なんだ。」

新人

「テンプレートエンジンって何ですか？」

先輩

「テンプレートエンジンは、HTMLの中にJavaの変数や値を埋め込む仕組みなんだ。Webページを動的に作成できるんだよ。」

新人

「なるほど！具体的にThymeleafをHTMLにどうやって組み込むんですか？」

先輩

「じゃあ、まずThymeleafの基本構造と、実際のサンプルコードを見てみようか！」

1. Thymeleafとは何か？

Thymeleaf（タイムリーフ）は、JavaのWebアプリケーションでよく使われるテンプレートエンジンです。Spring Bootと一緒に使われることが多く、サーバーサイドで生成されるHTMLにJavaの変数や値を埋め込むことができます。Thymeleafを使うことで、動的にHTMLを作成できるので、Webアプリケーションの開発に非常に役立ちます。

Thymeleafの特徴として、以下の点が挙げられます。

HTMLファイルをそのままブラウザで表示できる（静的HTMLとしても見える）
Spring Bootの仕組みと連携しやすい
Javaオブジェクトの値を簡単にHTMLに反映できる

例えば、Spring Bootの@Controllerで処理したデータを、Thymeleafを使ってHTMLに表示させることができます。これにより、Webページをユーザーに合わせて表示を切り替えたり、入力内容を反映させたりすることが可能になります。

2. HTMLにThymeleafを組み込む仕組み

ThymeleafをHTMLに組み込むためには、まず基本的なHTML構造にThymeleafの名前空間（xmlns:th）を追加する必要があります。これにより、ThymeleafがHTML内の特殊な属性（th:*）を認識できるようになります。

以下は、Thymeleafを組み込んだHTMLファイルの基本構造です。実際にsrc/main/resources/templatesフォルダに配置して使います。


<!DOCTYPE html>
<html lang="ja" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Thymeleaf サンプルページ</title>
</head>
<body>
    <h1 th:text="'こんにちは、' + ${name} + 'さん！'">デフォルトメッセージ</h1>
</body>
</html>

上の例では、th:text属性を使って、コントローラから受け取ったnameという変数をHTMLに表示しています。もしSpring Bootのコントローラからmodel.addAttribute("name", "山田");のように設定すると、ブラウザには「こんにちは、山田さん！」と表示されます。

以下は、対応するSpring Bootのコントローラのサンプルです。


@Controller
public class GreetingController {

    @GetMapping("/greet")
    public String greet(Model model) {
        model.addAttribute("name", "山田");
        return "greeting";
    }
}

上の例では、@GetMapping("/greet")で/greetというURLにアクセスがあったときに、nameというデータをモデルに追加して、greeting.htmlというテンプレートを返しています。greeting.htmlには、先ほどのThymeleafの基本構造を記述しておくことで、実際にnameの値がHTMLに埋め込まれます。

このように、Thymeleafを使うと、コントローラのデータとHTMLを連携して、動的なWebページを簡単に作ることができます。テンプレート内では、th:textだけでなく、th:ifやth:eachなど、条件分岐や繰り返し表示のための属性も豊富に用意されています。

次回は、さらにThymeleafの条件分岐や繰り返し構文など、もう少し踏み込んだ基本構文を解説します。まずは今回紹介した基本構造を試して、Spring BootとThymeleafの連携がどのように動くのか、ぜひ確認してみてください！

3. th:textの使い方（テキスト表示）

ここでは、Thymeleafの基本的な構文の中でも特に重要なth:textの使い方を解説します。th:textは、HTMLの要素にテキストを表示させるために使用されます。Spring Bootのコントローラから渡された値を、HTMLの中で簡単に表示できます。

例えば、ユーザーの名前やメッセージなどをブラウザに表示するときに、th:textを使うことで簡単に実現できます。実際のサンプルを見てみましょう。

以下は、HTMLの中でth:textを使って名前を表示する例です。


<p th:text="'こんにちは、' + ${userName} + 'さん！'">デフォルトメッセージ</p>

コントローラ側では、userNameという変数に名前を設定します。以下のように記述します。


@Controller
public class UserController {

    @GetMapping("/hello")
    public String sayHello(Model model) {
        model.addAttribute("userName", "佐藤");
        return "hello";
    }
}

上記の例では、/helloというURLにアクセスしたときに、「こんにちは、佐藤さん！」と表示されます。もしuserNameの値が変われば、表示内容も自動的に変わります。これがThymeleafを使うメリットの一つです。

また、th:textを使うと、HTMLのタグをエスケープして表示してくれるため、ユーザーからの入力を安全に表示できます。Webアプリケーションのセキュリティにも役立つ機能です。

4. th:eachの使い方（繰り返し表示）

次に、複数のデータを繰り返し表示するときに便利なth:eachの使い方を解説します。th:eachは、リストなどのコレクションを順番に取り出して、HTMLに表示できます。

例えば、商品一覧やメッセージのリストなどを画面に表示したいときに、th:eachが活躍します。具体的な例を見てみましょう。


<ul>
    <li th:each="item : ${items}" th:text="${item}">サンプル項目</li>
</ul>

この例では、itemsというリストをループで回して、<li>タグ内に1つずつ表示しています。コントローラ側では、itemsにリストを設定します。


@Controller
public class ItemController {

    @GetMapping("/items")
    public String showItems(Model model) {
        List<String> items = List.of("リンゴ", "バナナ", "オレンジ");
        model.addAttribute("items", items);
        return "itemlist";
    }
}

ブラウザでは、リンゴ、バナナ、オレンジが順番にリスト表示されます。th:eachのitem : ${items}という部分は、「itemsの中身を順番にitemに代入する」という意味です。

また、ループの中では、itemのほかにiterStatという変数を使って、インデックス（番号）などを取得することも可能です。以下は、インデックスを一緒に表示する例です。


<ul>
    <li th:each="item, iterStat : ${items}" th:text="${iterStat.index + 1} + '番目：' + ${item}">サンプル項目</li>
</ul>

このように、th:eachを使うと、簡単にリストを繰り返し表示することができます。Webページの一覧表示などに便利な構文です。

5. th:ifとth:unlessの使い方（条件分岐）

最後に、条件によって表示を切り替えるth:ifとth:unlessの使い方を解説します。これらは、HTMLの要素を「表示するかしないか」を制御するために使います。

例えば、ログインしているユーザーだけにメッセージを表示したい場合や、特定の条件を満たすときだけボタンを表示するなど、柔軟な制御が可能です。

以下は、th:ifを使った例です。


<p th:if="${isLoggedIn}" th:text="'ようこそ、' + ${userName} + 'さん！'">ゲスト向けメッセージ</p>

この例では、isLoggedInという変数がtrueのときだけ、<p>タグが表示されます。もしisLoggedInがfalseなら、<p>タグは表示されません。

逆に、th:unlessは条件がfalseのときに表示されます。例えば、以下のように使います。


<p th:unless="${isLoggedIn}">ログインしていません。ログインしてください。</p>

この例では、isLoggedInがfalseのときだけ、「ログインしていません。ログインしてください。」というメッセージが表示されます。

コントローラ側では、isLoggedInの値を設定します。以下はサンプルコードです。


@Controller
public class LoginController {

    @GetMapping("/mypage")
    public String myPage(Model model) {
        boolean isLoggedIn = true;
        String userName = "鈴木";
        model.addAttribute("isLoggedIn", isLoggedIn);
        model.addAttribute("userName", userName);
        return "mypage";
    }
}

このように、th:ifやth:unlessを使うと、条件に応じてHTMLの表示内容を切り替えられます。Webページをより動的に、柔軟に作成できる便利な仕組みです。

6. th:hrefとth:srcの使い方（リンクや画像の動的設定）

ここでは、リンク先のURLや画像のパスを動的に設定できるth:hrefとth:srcの使い方を解説します。Webアプリで動的にリンクを切り替えたり、ユーザーによって画像を変えたりするのに便利な構文です。

例えば、ユーザーのプロフィールページへのリンクを動的に生成したり、ユーザーごとに違う画像を表示したいときに使います。具体的な例を見てみましょう。

リンク先の動的設定には、th:hrefを使用します。以下はサンプルです。


<a th:href="@{'/user/' + ${userId}}">ユーザープロフィールへ</a>

この例では、コントローラから渡されたuserIdを使って、リンク先を「/user/123」のように動的に生成します。

次に、画像の表示先を動的に切り替えるth:srcの例です。


<img th:src="@{/images/} + ${fileName}" alt="ユーザー画像">

モデルにfileNameとして「pic1.jpg」「pic2.png」などを設定すれば、ユーザーによって異なる画像を表示できます。

コントローラ側は以下のようになります。


@Controller
public class ProfileController {

    @GetMapping("/profile")
    public String profile(Model model) {
        model.addAttribute("userId", 123);
        model.addAttribute("fileName", "pic1.jpg");
        return "profile";
    }
}

これにより、Thymeleafのth:hrefやth:srcを活用して、リンクや画像を柔軟に切り替えることができます。

また、外部サイトへのリンクでも同様に設定できます。例えば、以下のように記述します。


<a th:href="${externalUrl}" target="_blank">外部サイトへ移動</a>

コントローラでmodel.addAttribute("externalUrl", "https://www.example.com");とすれば、リンク先がHTMLに自動的に反映されます。

7. 初心者におすすめの練習方法とポイント

最後に、Thymeleafを効率よく習得するための練習方法と注意ポイントを紹介します。ここまでの構文を実際に手を動かして学ぶことで、理解が深まります。

✔ 練習方法１：変数表示の遊び

まずはth:textで変数をいろいろ表示してみましょう。モデルに日付、数値、文字列を渡して、HTMLに書いてみるだけでも動的な表示の仕組みが理解できます。

✔ 練習方法２：リストやテーブル表示

th:eachを使って、商品のリストや投稿の一覧をテーブルで表示する練習がおすすめです。まずは簡単な文字列リストから始め、慣れたらオブジェクトのプロパティを表示してみましょう。
例えば、商品クラスにnameとpriceを持たせて、商品一覧として表示すると応用力がつきます。


<table>
  <tr th:each="product : ${products}">
    <td th:text="${product.name}">商品名</td>
    <td th:text="${product.price}">価格</td>
  </tr>
</table>

コントローラでは、List<Product>としてmodel.addAttribute("products", products);のように渡します。