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

新人

「WebアプリでHTMLとJavaを結びつけて画面にデータを表示する方法って何がありますか？」

先輩

「それならThymeleafを使うと簡単にできるよ。Spring Bootと相性が良くて、HTMLファイルを直接編集できるからとても便利なんだ。」

新人

「Thymeleafってテンプレートエンジンなんですよね？でも他にもテンプレートエンジンがあるって聞いたことがあります。なぜThymeleafを使うんですか？」

先輩

「ThymeleafはHTMLのままブラウザで確認できるし、タグも直感的に使えるから初心者におすすめなんだ。実際に基本から一緒に学んでみよう！」

1. Thymeleafとは？

Thymeleaf（タイムリーフ）は、Javaベースのテンプレートエンジンで、WebアプリケーションでHTMLを生成するために使用されます。特にSpring FrameworkやSpring Bootと組み合わせて使うことが多く、HTMLの中にJavaオブジェクトの値を埋め込んで画面に表示できます。

Thymeleafの特徴:

HTMLファイルをブラウザで直接確認できる（自然なテンプレート構文）
Spring Bootとの統合が簡単
フォーム処理や条件分岐、ループ処理が簡単に記述可能
静的・動的コンテンツ両方に対応

2. Thymeleafがなぜ必要なのか

Webアプリケーションでは、バックエンドから取得したデータをHTMLに表示する必要があります。Thymeleafを使用することで、以下のメリットがあります。

開発効率の向上: テンプレート内で直接データを扱えるため、開発スピードが向上します。
HTMLとの親和性: HTMLとして有効なファイルを保ちながら、テンプレート機能を実現します。
メンテナンス性の向上: コードがシンプルで直感的なので、初心者でも理解しやすいです。
Spring Bootとの連携が簡単: 依存関係を追加するだけで簡単に利用できます。

例えば、以下のようなHTMLコードがあったとします。


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

このコードでは、${message}に対応する値がJava側から渡されます。Thymeleafを使うことで、HTMLをそのままデザインツールやブラウザで確認できるのが大きな特徴です。

Pleiadesでの依存関係追加方法

Pleiadesでプロジェクトを右クリックし、「Spring Bootの依存関係を追加」を選択します。
依存関係一覧から「Thymeleaf」をチェックして追加します。
Gradleが自動で設定を反映します。

依存関係が追加された後のbuild.gradleの例


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

この設定により、Spring BootでThymeleafを使用する準備が整います。次のステップでは、実際にコントローラを作成してHTMLと連携させていきます。

3. Thymeleafの基本構文と使い方

Thymeleafを使用すると、HTML内に簡単な構文でJavaのデータを埋め込むことができます。ここでは、基本的な構文とその使い方を紹介します。

3.1 テキストの表示

最も基本的な使い方は、変数を表示することです。Thymeleafではth:text属性を使用して、変数の値を表示します。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>テキスト表示例</title>
</head>
<body>
    <h1 th:text="${message}">デフォルトメッセージ</h1>
</body>
</html>

この例では、Java側から渡されたmessageという変数が表示されます。

3.2 属性の変更

th:hrefやth:srcを使うことで、リンク先や画像のパスを動的に変更できます。


<a th:href="@{/home}">ホームへ</a>
<img th:src="@{/images/logo.png}" alt="ロゴ">

3.3 条件分岐

th:ifを使うと、条件に応じてHTML要素の表示・非表示を制御できます。


<p th:if="${isLoggedIn}">ようこそ、ユーザーさん！</p>
<p th:unless="${isLoggedIn}">ログインしてください。</p>

3.4 ループ処理

th:eachを使うことで、リストや配列を繰り返し表示できます。


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

このコードでは、itemsリストの要素が順に表示されます。

4. 簡単なWebページの作成（Hello Worldの表示）

ここでは、実際に「Hello World」を表示する簡単なWebページを作成します。

4.1 コントローラの作成

PleiadesでHomeControllerというクラスを作成し、以下のコードを記述します。


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

    @GetMapping("/")
    public String home(Model model) {
        model.addAttribute("message", "Hello World!");
        return "home";
    }
}

4.2 ビューの作成

src/main/resources/templatesフォルダにhome.htmlを作成し、以下の内容を記述します。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Hello Worldページ</title>
</head>
<body>
    <h1 th:text="${message}">ここにメッセージが表示されます</h1>
</body>
</html>

4.3 実行と確認

Pleiadesでプロジェクトを右クリックし、「Spring Bootアプリケーションとして実行」を選択します。
ブラウザで以下のURLにアクセスします。


http://localhost:8080/

実行結果:


Hello World!

5. コントローラとビューの連携方法

Thymeleafでは、コントローラでデータを設定し、ビューに渡して表示します。この連携が理解できれば、動的なWebページが簡単に作成できます。

5.1 コントローラの拡張

以下のように、ユーザーリストを表示する機能を追加してみましょう。


@GetMapping("/users")
public String users(Model model) {
    List<String> users = List.of("田中", "鈴木", "佐藤");
    model.addAttribute("users", users);
    return "userList";
}

5.2 ビューの作成

userList.htmlを作成し、以下の内容を記述します。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>ユーザー一覧</title>
</head>
<body>
    <h1>ユーザー一覧</h1>
    <ul>
        <li th:each="user : ${users}" th:text="${user}"></li>
    </ul>
</body>
</html>

5.3 実行結果


ユーザー一覧
- 田中
- 鈴木
- 佐藤

このように、コントローラで用意したデータがビューに渡り、HTMLに表示されます。これがThymeleafとSpring Bootの基本的な連携の流れです。

6. フォーム入力とデータの表示方法

Thymeleafを使用すると、ユーザーからの入力を受け取り、そのデータを表示するWebアプリケーションを簡単に作成できます。このセクションでは、フォームを作成し、入力データをコントローラで受け取り、ビューに表示する方法を解説します。

6.1 コントローラの作成

PleiadesでFormControllerというクラスを作成し、以下のコードを記述します。


package com.example.demo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;

@Controller
public class FormController {

    @GetMapping("/form")
    public String showForm() {
        return "form";
    }

    @PostMapping("/submit")
    public String submitForm(@RequestParam("name") String name, Model model) {
        model.addAttribute("name", name);
        return "result";
    }
}

6.2 フォーム画面の作成

form.htmlをsrc/main/resources/templatesに作成し、以下の内容を記述します。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>フォーム入力</title>
</head>
<body>
    <h1>名前を入力してください</h1>
    <form th:action="@{/submit}" method="post">
        <label for="name">名前:</label>
        <input type="text" id="name" name="name" required>
        <button type="submit">送信</button>
    </form>
</body>
</html>

6.3 結果表示画面の作成

result.htmlを作成し、以下の内容を記述します。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>結果表示</title>
</head>
<body>
    <h1>入力された名前:</h1>
    <p th:text="${name}">ここに名前が表示されます</p>
</body>
</html>

6.4 実行と確認

Pleiadesでプロジェクトを右クリックし、「Spring Bootアプリケーションとして実行」を選択します。
ブラウザで以下のURLにアクセスします。


http://localhost:8080/form

名前を入力して送信すると、結果ページに入力した名前が表示されます。


入力された名前:
山田太郎

7. よくあるエラーとその解決方法

Thymeleafを使用する際に初心者がつまずきやすいエラーとその解決方法を紹介します。

7.1 TemplateInputException（テンプレートが見つからないエラー）

原因: 指定したHTMLファイルがtemplatesフォルダ内に存在しない、または名前が間違っている場合に発生します。

対処法:

templatesフォルダにHTMLファイルが正しく配置されているか確認してください。
コントローラで指定したビュー名とHTMLファイル名が一致しているか確認してください。

7.2 400 Bad Request（リクエストパラメータ不足）

原因: コントローラで@RequestParamを要求しているのに、フォームからその値が送信されていない場合に発生します。

対処法:

フォームのinputタグにname属性が設定されているか確認してください。
コントローラ側でrequired = falseを指定してエラーを防げます。


@PostMapping("/submit")
public String submitForm(@RequestParam(value = "name", required = false, defaultValue = "未入力") String name, Model model) {
    model.addAttribute("name", name);
    return "result";
}

7.3 500 Internal Server Error（NullPointerException）

原因: モデルに値を渡すのを忘れた場合や、${}で存在しない変数を参照した場合に発生します。

対処法:

コントローラでmodel.addAttribute()を正しく設定してください。
テンプレート内で存在する変数のみを使用してください。

8. 次の学習ステップとおすすめの勉強方法

Thymeleafの基本を学んだ後は、以下のステップでさらにスキルアップしましょう。

8.1 フォームバリデーションの導入

入力データの検証を追加して、ユーザーが正しい情報を入力できるようにしましょう。@ValidアノテーションとBindingResultを組み合わせることで、バリデーションが簡単に実装できます。

8.2 フラグメントを使った共通レイアウトの作成

複数のHTMLファイルで共通部分（ヘッダーやフッター）を使い回すには、Thymeleafのth:replaceを活用しましょう。

8.3 セッション管理と状態保持

ユーザー情報を保持して、ログイン機能を作成することで、実践的なWebアプリケーションを開発できます。

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

Thymeleaf入門（基本概念と導入）初心者でもわかる使い方と導入方法

1. Thymeleafとは？

2. Thymeleafがなぜ必要なのか

Pleiadesでの依存関係追加方法

依存関係が追加された後のbuild.gradleの例

3. Thymeleafの基本構文と使い方

3.1 テキストの表示

3.2 属性の変更

3.3 条件分岐

3.4 ループ処理

4. 簡単なWebページの作成（Hello Worldの表示）

4.1 コントローラの作成

4.2 ビューの作成

4.3 実行と確認

5. コントローラとビューの連携方法

5.1 コントローラの拡張

5.2 ビューの作成

5.3 実行結果

6. フォーム入力とデータの表示方法

6.1 コントローラの作成

6.2 フォーム画面の作成

6.3 結果表示画面の作成

6.4 実行と確認

7. よくあるエラーとその解決方法

7.1 TemplateInputException（テンプレートが見つからないエラー）

対処法:

7.2 400 Bad Request（リクエストパラメータ不足）

対処法:

7.3 500 Internal Server Error（NullPointerException）

対処法:

8. 次の学習ステップとおすすめの勉強方法

8.1 フォームバリデーションの導入

8.2 フラグメントを使った共通レイアウトの作成

8.3 セッション管理と状態保持

おすすめの勉強法:

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

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

Thymeleafとは何ですか？初心者にもわかるように教えてください

Thymeleaf（タイムリーフ）とは、JavaでWebアプリケーションを開発する際に使われるテンプレートエンジンで、HTMLにJavaのデータを埋め込むことができます。特にSpring Bootとの相性が良く、初心者でも扱いやすい点が特徴です。

関連記事: