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

新人

「先輩、Thymeleafってよく聞くんですけど、いったい何ですか？」

先輩

「Thymeleafは、JavaのWebアプリケーション開発で使われるテンプレートエンジンのひとつだよ。HTMLファイルに動的なデータを埋め込むのに便利なんだ。」

新人

「なるほど！どうしてわざわざThymeleafを使うんですか？」

先輩

「良い質問だね。実際にどんな役割を持っているのか、一緒に確認していこう。」

1. Thymeleafとは何か？

Thymeleaf（タイムリーフ）は、Javaで作られたWebアプリケーションにおけるテンプレートエンジンです。通常のHTMLファイルに、Javaの変数や処理結果を埋め込んで、最終的にブラウザに表示するHTMLを生成する仕組みを持っています。Thymeleafは、HTMLファイルのままブラウザで表示できる「ナチュラルテンプレート」という特徴があり、フロントエンドの開発でも役立つのが特徴です。

Thymeleafを使うと、Spring MVCのコントローラ（@Controller）で用意したデータを、HTMLに埋め込むことができます。例えば、商品情報やユーザーの名前など、動的に変わる情報をHTMLに簡単に表示できるようになります。

2. Thymeleafを使う理由（なぜ必要なのか）

Thymeleafを使う理由はたくさんあります。まず、Javaのサーバーサイドアプリケーションで、ユーザーに動的な内容を表示するために便利です。通常、Webアプリケーションでは、商品情報や会員情報などがデータベースに保存されています。これをそのまま表示するだけではなく、見た目の整ったHTMLとして出力するために、テンプレートエンジンが役立ちます。

Thymeleafは、HTMLタグの中に特別な属性（例：th:text）を記述することで、サーバーサイドで生成したデータをHTMLに埋め込む仕組みを提供します。これにより、開発者は、HTMLとJavaのコードを分離して管理しやすくなります。

さらに、Thymeleafは、HTMLファイルの見た目をそのままブラウザで確認できる「ナチュラルテンプレート」形式に対応しているため、フロントエンドの開発者にとっても扱いやすいというメリットがあります。

3. フロントエンドにおけるThymeleafの役割

フロントエンドにおけるThymeleafの役割は、単純にHTMLを作るだけではありません。例えば、商品一覧を表示するとき、サーバーサイドのJavaで取得したデータをThymeleafを使ってループで出力することができます。これにより、商品数が増減しても、自動的にHTMLに反映されます。

例えば、次のようにThymeleafを使ったサンプルコードを書けます。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>商品一覧</title>
</head>
<body>
    <h1>商品一覧</h1>
    <ul>
        <li th:each="item : ${items}" th:text="${item.name}">商品名</li>
    </ul>
</body>
</html>

この例では、サーバーサイドで「items」というリストを用意しておけば、HTMLの

また、フロントエンドの見た目や構造を変更したい場合も、HTMLファイルを直接編集するだけで済むため、開発効率の向上や保守性の向上にもつながります。

4. Thymeleafの基本的な使い方（テンプレートファイルの作り方）

まず、Thymeleafを使うには、HTMLファイルを適切な場所に置くことが必要です。pleiadesで作成したGradleプロジェクトでは、


src/main/resources/templates/

フォルダにテンプレートを配置します。たとえば、greeting.htmlという名前でファイルを作成すれば、Spring MVCのコントローラから表示することができます。

テンプレートファイルでは、HTMLのやなど通常のタグをそのまま使いつつ、動的に内容を変えたい部分にThymeleaf属性（th:で始まる属性）を追加していきます。これがThymeleafテンプレートの基本の使い方です。

5. 簡単なThymeleafのサンプルコード

ここでは、ユーザー名を画面に表示する簡単なサンプルを動作させてみましょう。まず、コントローラ側は次のようになります：


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("username", "太郎");
        return "greeting";
    }
}

次に、テンプレートファイルgreeting.htmlを作成します：


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>あいさつページ</title>
</head>
<body>
    <h1>ようこそ、<span th:text="${username}">ユーザー名</span>さん！</h1>
</body>
</html>

このコードでは、Modelにセットしたusernameを、HTMLのタグ内に埋め込んでいます。Spring MVCの@Controllerアノテーションと合わせて使うことで、画面に動的な値を表示できます。

6. 画面に値を表示する仕組み

この仕組みのポイントは、Modelにデータをセットして、Thymeleafテンプレートに受け渡すことです。Spring MVCの@Controllerでは、Javaコードでデータを用意し、テンプレート名を文字列で返します。これによって、Thymeleafが該当するHTMLファイルを読み込み、テンプレート処理を実行します。

具体的には、テンプレート側で以下のような属性を使います：

th:text：変数をテキストとして表示
th:each：リストなどのコレクションをループ表示
th:if：条件による表示・非表示の分岐

たとえば、リストを表示したい場合は、次のように書けます：


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

サーバー側のJavaコードでは、Modelにitemsという名前のリストをセットします：


@GetMapping("/items")
public String items(Model model) {
    List<String> items = List.of("りんご", "みかん", "バナナ");
    model.addAttribute("items", items);
    return "items";
}

画面にアクセスすると、items.htmlテンプレートに基づいて、リスト項目が3つ表示されます。このように、Model→Thymeleafテンプレート→HTMLと一連の流れがスムーズに連携されることで、簡単に動的なWeb画面を作成できます。

この仕組みのおかげで、開発者はJavaでロジックを記述しつつ、HTMLで画面構造を管理できるため、役割が明確に分かれて保守性が高く、開発効率も向上します。また、HTMLはpleiades上でそのまま見た目を確認できるため、フロントエンド作業との連携も取りやすくなります。

7. Thymeleafを使うメリット（メンテナンス性、開発効率など）

Thymeleafを使う最大のメリットは、Javaのサーバーサイド処理とHTMLの見た目をきれいに分けられることです。これにより、画面とロジックが混ざらず、保守しやすくなります。たとえば、HTMLレイアウトを変えたいときでも、Javaコードには手を入れず、テンプレートだけ修正すれば反映されます。

さらに、pleiades上でテンプレートをそのまま表示できる「ナチュラルテンプレート」機能を活用すれば、デザインやレイアウトの確認がしやすく、フロントエンド担当者との連携もスムーズになります。実際の開発現場では、この分離によって修正やバグ対応のスピードが向上します。

また、繰り返し処理や条件分岐といった機能が用意されていて、コード量を減らしつつ、複雑な画面ロジックにも対応できます。例えば、条件に応じて表示を切り替えるth:ifや繰り返し表示ができるth:eachなどを使えば、手作業でのHTML変更を減らせます。

8. Spring BootでのThymeleaf活用例

ここでは、Spring BootでもThymeleafを利用する簡単なサンプルをご紹介します。まず、Gradleの依存関係にThymeleafを追加します（pleiadesで依存関係をチェックして追加してください）。


dependencies {
    implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
    implementation 'org.springframework.boot:spring-boot-starter-web'
}

次に、コントローラを作成して画面表示を試します。


@Controller
public class UserController {
    @GetMapping("/user")
    public String user(Model model) {
        Map<String, String> user = Map.of("名前","花子","趣味","音楽");
        model.addAttribute("user", user);
        return "user";
    }
}

続いて、user.htmlテンプレートを用意します：


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>ユーザー情報</title>
</head>
<body>
    <h1>ユーザー情報</h1>
    <p>名前：<span th:text="${user['名前']}">名前</span></p>
    <p>趣味：<span th:text="${user['趣味']}">趣味</span></p>
</body>
</html>

この例では、userというMapをModelに設定し、テンプレート側でuser['キー']形式で値を取得しています。Spring Bootでも基本構成は同じで、ControllerでModelに追加したデータをThymeleafテンプレートに引き渡し、動的なHTMLを生成します。