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

新人

「先輩、Thymeleaf（タイムリーフ）って何なんですか？初めて聞きました！」

先輩

「Thymeleafは、JavaのWebアプリケーションで使われるテンプレートエンジンだよ。HTMLに動的なデータを埋め込むことができて、Spring Bootと一緒によく使われているんだ。」

新人

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

先輩

「それじゃあ、基本の書き方を見ながら、一緒に学んでいこう！」

1. Thymeleafとは？

Thymeleaf（タイムリーフ）は、Spring Bootの開発でよく使われるHTMLテンプレートエンジンです。Webページを表示するときに、サーバーサイドでHTMLにデータを埋め込む役割を持っています。Javaのオブジェクトや変数を、HTMLに反映させることができるので、動的なWebページを簡単に作成できます。

Thymeleafの特徴は、HTMLをそのままブラウザで表示できる「ナチュラルテンプレート」機能です。HTMLファイルをブラウザで直接開いても、構文エラーなどが出ないので、見た目を確認しやすいのがメリットです。

Thymeleafは、Pleiades環境での開発でもとても便利です。Java初心者でも、基本的な書き方を覚えれば簡単に使えます。

2. HTMLにThymeleafを組み込む基本構造

ThymeleafをHTMLに組み込むためには、まずHTMLのhtmlタグにThymeleafの名前空間を宣言します。次に、必要な場所にth:属性を使ってデータを表示します。例えば、th:text属性を使うと、サーバーサイドの値をHTMLに埋め込むことができます。

以下に、Thymeleafを組み込んだ基本のHTML構造を紹介します。Pleiadesの環境でSpring Bootのプロジェクトを作成して、src/main/resources/templatesフォルダにHTMLファイルを作成しましょう。


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

このサンプルでは、<p>タグにth:text属性を設定しています。${message}は、コントローラから渡される変数を表します。

実際にコントローラを作成すると、以下のようになります。


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

このように、Modelに値を追加して、sample.htmlに値を渡しています。実行すると、ブラウザでは「こんにちは、Thymeleaf！」と表示されます。

HTMLの中にJavaの値を簡単に埋め込めるので、初心者でもすぐに動的なページを作れます。

HTMLに組み込むときのポイント

xmlns:th="http://www.thymeleaf.org"をhtmlタグに必ず宣言する
th:text属性など、th:で始まる属性を使う
コントローラでModelを使い、データをHTMLに渡す

この基本の仕組みを理解すれば、Thymeleafを使ったHTMLの動的生成がスムーズになります。

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

ここからは、Thymeleafでよく使われるth:text属性の使い方を詳しく見ていきましょう。th:textは、HTMLタグの中に動的なテキストを表示するために使います。通常の<p>タグや<h1>タグの中に、サーバーから送られた文字列を埋め込むことができます。

例えば、次のように使います。


<p th:text="${greeting}">ここにメッセージが入ります</p>

この場合、${greeting}はコントローラから渡される文字列です。コントローラは以下のように記述します。


@Controller
public class GreetingController {
    @GetMapping("/greeting")
    public String showGreeting(Model model) {
        model.addAttribute("greeting", "ようこそ、Thymeleafの世界へ！");
        return "greeting";
    }
}

このようにすると、ブラウザでは「ようこそ、Thymeleafの世界へ！」というメッセージが表示されます。th:textを使うことで、HTML内のテキストが自動的にJavaの変数に置き換わる仕組みになっています。

ここで大切なのは、th:textを使うと、HTMLに直接書いたテキストは上書きされることです。つまり、ブラウザには必ずサーバーから送られたデータだけが表示されるようになります。これを「属性置換」といいます。初心者の方でも、覚えやすいポイントです。

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

次に、Thymeleafの強力な機能であるth:each属性の使い方を説明します。th:eachは、リストや配列などのデータを繰り返し表示するために使われます。

例えば、コントローラからリストを渡した場合を見てみましょう。


@Controller
public class FruitController {
    @GetMapping("/fruits")
    public String showFruits(Model model) {
        List<String> fruits = Arrays.asList("りんご", "みかん", "バナナ");
        model.addAttribute("fruits", fruits);
        return "fruits";
    }
}

このコントローラでは、fruitsというリストをHTMLに渡しています。HTMLでは、次のようにth:eachを使って表示します。


<ul>
    <li th:each="fruit : ${fruits}" th:text="${fruit}">果物名</li>
</ul>

この書き方では、fruitsリストの中身をfruitという変数で受け取り、th:textで表示しています。ブラウザで見てみると、次のように表示されます。


りんご
みかん
バナナ

このように、th:eachを使うと、簡単にリストの要素を繰り返し表示できます。fruit : ${fruits}という書き方は、「fruitsリストの中身をfruitとして順番に取り出す」という意味です。初心者の方でも、すぐに理解できる仕組みなので、安心してくださいね。

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

最後に、Thymeleafで条件分岐をするときに使うth:ifやth:unlessの使い方を紹介します。条件分岐は、表示する内容を場合によって変えたいときにとても便利です。

まず、th:ifは「条件がtrueのときに表示する」という意味です。例えば、次のように使います。


<p th:if="${user != null}">こんにちは、ユーザーさん！</p>
<p th:unless="${user != null}">ログインしてください。</p>

このサンプルでは、userという変数がnullでない場合には「こんにちは、ユーザーさん！」が表示され、nullの場合は「ログインしてください。」が表示されます。つまり、th:ifとth:unlessは対になるように使えます。

実際のコントローラでは、次のように記述します。


@Controller
public class UserController {
    @GetMapping("/user")
    public String showUser(Model model) {
        String user = "山田太郎";
        model.addAttribute("user", user);
        return "user";
    }
}

この場合、userに値が入っているので、th:ifの条件が成立して「こんにちは、ユーザーさん！」がブラウザに表示されます。もしuserがnullだった場合は、代わりに「ログインしてください。」が表示されます。

条件分岐を使うと、Webページの見た目やメッセージを動的に切り替えられるので、ユーザーに合わせた表示ができるようになります。初心者の方でも、サンプルを見ながら実践するとすぐに使えるようになりますよ。

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

Thymeleafでは、リンク先や画像のパスをサーバーサイドで動的に指定するためにth:hrefやth:src属性を使います。これにより、URLや画像のパスを変数で管理できて、柔軟な表示が可能になります。

たとえば、リンク先を動的に設定する例を見てみましょう。


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

この書き方では、URLパターン/user/{id}に対して、コントローラから渡されたuserIdを埋め込みます。


@Controller
public class UserLinkController {
    @GetMapping("/link")
    public String linkPage(Model model) {
        model.addAttribute("userId", 42);
        return "link";
    }
}

上記のlink.htmlを実行すると、ブラウザのリンク先は/user/42になります。

次に画像のパスを指定する方法も見てみましょう。


<img th:src="@{/images/${imageName}}" alt="動的画像">

この例では、コントローラから渡されたimageNameを使って、表示する画像ファイルを切り替えています。例えば、imageName="sample.png"なら/images/sample.pngとなります。

7. よく使う属性のまとめ

ここまで紹介したThymeleafの属性をまとめておきます。初心者がよく使うポイントを整理して覚えると、テンプレートを書くときに迷いにくくなります。

th:text：テキスト内容をJava変数に置き換える
th:each：リストや配列などを繰り返し表示する
th:if：条件が真なら表示するブロックに使う
th:unless：条件が偽なら表示される
th:href：リンクURLを動的に設定する
th:src：画像やスクリプト、CSSのパスを変数で指定する
th:classappend（補足）：条件に応じてCSSクラスを追加したいときに便利です

これらの属性を活用すると、テンプレートがすっきり書けて、保守性も高まります。特に初心者は、まず基本５つの属性を押さえておけば十分です。

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

最後に、Thymeleafを初心者が効率よくマスターするための練習方法とポイントを紹介します。

8‑1. 小さなサンプルで試す

まずは動的なMessage表示だけのページ、次にリストを表示するページ、というように「表示したい機能ごと」にテンプレートを分けて練習しましょう。Gradleでプロジェクトを再ビルドしなくても、Pleiadesで実行を止めずにファイルを置き換えるだけで確認できます。

8‑2. 実際のWebアプリ風に作ってみる

ユーザー一覧画面、詳細画面、ログインページなど、実際のWebサイトで必要なページを小さく実装してみましょう。th:hrefやth:ifを使う練習になります。

8‑3. HTML側でプレビューしながら調整

Thymeleafは「ナチュラルテンプレート」機能で、属性を書いていてもHTML自体は正常に表示されます。これは、コントローラから値を渡す前でもHTMLを確認できるので、UIの見た目を先に整えておくのに便利です。

8‑4. 属性の使い分けを理解する

th:textは中身を置き換える、th:hrefはリンクURLを置き換える、など用途によって使い分けが必要です。目的に応じて正しい属性名を使うことで、可読性が高まります。

8‑5. ドキュメントや公式サイトを参考に

詳細な使い方や応用例は、Thymeleafの公式ドキュメントを読むと理解が深まります。Gradleで依存を追加したあとは、公式ガイドを参考に新しい属性を試してみてください。

これらの練習を積み重ねることで、Thymeleafの基本から応用まで自然に習得できます。最初は戸惑うかもしれませんが、少しずつ実際に動くコードを書いて試すことで、自信がついてきます。

Thymeleafの基本的な書き方を完全ガイド！初心者向けサンプル解説