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

生徒

「ウェブアプリケーションで、HTMLの中にJavaの値を入れる方法ってありますか？」

先生

「はい、ありますよ。Javaでは、Thymeleaf（タイムリーフ）というテンプレートエンジンを使うことで、HTMLとJavaの値を自然に組み合わせることができます。」

生徒

「テンプレートエンジンってなんですか？難しそう…」

先生

「それでは、Thymeleafの基本からやさしく解説していきましょう。」

1. Thymeleafとは何か？

Thymeleaf（タイムリーフ）は、Javaで開発されたWebアプリケーションで使用されるテンプレートエンジンです。テンプレートエンジンとは、JavaのデータをHTMLに埋め込むための仕組みです。

例えば、Spring Bootで画面を表示する場合、HTMLファイルの中にのような記述をすることで、Javaの変数の値をそのまま表示できます。

Thymeleafを使うことで、開発者はHTMLらしい見た目のままテンプレートを作れるので、デザイナーとエンジニアの協力もしやすくなります。

2. Thymeleafが人気な理由

Thymeleafは、HTMLに近い構文でありながら、Javaの変数や条件などを扱えることが特徴です。

また、以下のような理由で多くのJava開発者に選ばれています：

HTMLを壊さないため、ブラウザで直接開いても見られる
Spring Bootとの連携が簡単
サーバーサイドで値を埋め込める
反復や条件分岐もテンプレート内で書ける

そのため、ThymeleafはSpring Bootアプリケーションのフロント部分の構築において、最もよく使われる技術の一つです。

3. HTMLにJavaの値を埋め込む書き方

Thymeleafを使えば、HTMLタグの属性にJavaの値を埋め込むことができます。以下のようにth:textを使います。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Thymeleafサンプル</title>
</head>
<body>
    <p th:text="${message}">ここにメッセージが表示されます</p>
</body>
</html>

この例では、Java側で用意した変数messageの中身が、<p>タグ内に表示されます。

4. Thymeleafの設定とフォルダ構成

Spring Bootでは、特別な設定をしなくてもThymeleafが使えるように初期設定されています。

テンプレートファイルは、resources/templatesというフォルダに置きます。ファイルの拡張子は.htmlです。

Spring Bootのコントローラで次のように書けば、自動的にtemplates/index.htmlを探して表示してくれます。


@Controller
public class SampleController {
    @GetMapping("/")
    public String index(Model model) {
        model.addAttribute("message", "こんにちは、Thymeleaf！");
        return "index";
    }
}

5. よく使うThymeleafの属性

Thymeleafには様々な属性がありますが、よく使うのは次の通りです。

th:text：テキストに変数の値を挿入
th:href：リンク先のURLに変数を使う
th:src：画像のパスをJavaから指定
th:if：条件によって表示・非表示を切り替える
th:each：リストなどを繰り返し表示する

これらを使うことで、動的なWebページを効率的に作成できます。

6. 条件分岐や繰り返し処理もできる

Thymeleafは、ただ値を埋め込むだけでなく、条件分岐や繰り返し表示もHTML内でできます。

以下は、th:ifとth:eachの使用例です。


<ul>
    <li th:each="item : ${itemList}" th:text="${item}"></li>
</ul>

<p th:if="${flag}">フラグがtrueのときだけ表示</p>

このように、Javaのコードを書くことなく、HTML内で動的な表現が可能です。

7. Thymeleafを学ぶメリット

Thymeleafを学ぶことで、以下のようなスキルが身につきます。

HTMLとJavaの連携方法がわかる
Spring Bootで動的なWeb画面が作れるようになる
Javaの値をHTMLに簡単に表示できるようになる
テンプレートの中でループや条件処理ができる

今後、Webアプリケーションを作っていく上で、Thymeleafの基本を理解することは非常に重要です。

まとめ

Thymeleaf（タイムリーフ）は、JavaとHTMLを自然に結びつけることができるテンプレートエンジンとして、Spring Bootを利用したWebアプリケーション開発の基盤を支える重要な技術です。今回の記事では、Thymeleafの基本的な役割から、よく使う属性、テンプレートフォルダの配置、条件分岐・繰り返し処理の書き方まで、初心者がつまずきやすい部分を中心に整理しながら理解を深めました。サーバーサイドで生成されたデータをHTML上に欠かすことなく表示でき、しかもHTMLらしさを保ったままテンプレートが作れるため、デザイナーとエンジニアの共同作業にも向いているという点が大きな特徴です。また、Thymeleafの構文がHTMLの文法に寄り添っているため、通常のHTMLファイルとしてブラウザで直接開いてもレイアウトが崩れないという利点があります。この特性によって、画面を確認しながら開発を進めることができ、設計段階でも視認性の高いテンプレートを作成できます。さらに、Spring Bootでは初期設定無しでThymeleafを扱えるため、テンプレートの配置とコントローラの準備だけで、すぐに動的なWebページを表示できるようになります。例えば、次のようなテンプレートコードはThymeleafの利点を端的に示しています。

Thymeleafの基本を押さえたサンプルコード


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>サンプルページ</title>
</head>
<body>
    <h1 th:text="${title}">タイトルが入ります</h1>

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

    <p th:if="${showMessage}" th:text="${infoMessage}"></p>
</body>
</html>

上記コードでは、Javaで用意したtitle、userList、infoMessageといった値が、HTMLの見た目を崩さずスムーズに埋め込まれています。特にth:eachによるリスト表示やth:ifによる条件分岐は、フロント側に複雑なロジックを持ち込む必要なくページの制御ができる点が大きな魅力です。さらに、Spring Bootのコントローラ部分では次のようなモデル追加が基本となります。


@Controller
public class HomeController {

    @GetMapping("/home")
    public String home(Model model) {
        model.addAttribute("title", "Thymeleaf学習ページ");
        model.addAttribute("userList", List.of("たろう", "はなこ", "じろう"));
        model.addAttribute("showMessage", true);
        model.addAttribute("infoMessage", "ようこそタイムリーフの世界へ！");
        return "home";
    }
}

このように、ThymeleafとSpring Bootを組み合わせることで、HTMLとJavaが調和した開発スタイルを実現できます。テンプレート内の記述は読みやすく、プロジェクト全体の保守性向上にもつながります。繰り返し処理や条件処理が自然に書けるため、動的要素を多く含むWebアプリケーションでも柔軟な対応が可能です。そして、Thymeleafの理解は今後のWeb開発でも大きな力となり、他のテンプレートエンジンを扱う際にも応用がききます。特にSpring Bootと組み合わせたときの利便性は高く、実践プロジェクトでも頻繁に利用される技術です。画面を作成する際に「Javaの値をHTMLにどう埋め込むのか」「条件によって表示を切り替えたい」といったニーズに自然に応えられる点も、Thymeleafの強みといえます。

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

生徒

「ThymeleafってHTMLそのままの形で書けるのに、Javaの値を入れたり条件や繰り返しまでできるのが便利だと感じました！」

先生

「その点がThymeleafの大きな魅力ですね。見た目が崩れないから構造を把握しやすいし、データを動的に扱うときも直感的に書けます。」

生徒

「th:textやth:eachがすごく分かりやすかったです。これを使えば一覧ページも簡単に作れそうです！」

先生

「その通りです。テンプレートエンジンの使い方を理解すると、画面開発が一気に楽になりますよ。Spring Bootと組み合わせればさらに効率が上がります。」

生徒

「もっとThymeleafの条件分岐やフラグ制御も練習して、動的に変わる画面を作れるようになりたいです！」