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

新人

「Thymeleafでエラーメッセージってどうやって表示するんでしょう？」

先輩

「フォーム入力のエラーを画面に表示するには、th:ifで条件を指定して、表示／非表示を切り替えるんだよ。」

新人

「具体的にはどう書くんですか？」

先輩

「まずは基本から。エラーメッセージを出す条件をJavaのコントローラで渡して、それをThymeleafで制御するんだ。」

1. エラーメッセージ表示の基本的な考え方

Webアプリケーションでは、ユーザーがフォームに入力した内容に誤りがある場合、わかりやすくエラーメッセージを表示する必要があります。Spring BootとThymeleafを使った開発では、Java側でエラーの有無をbooleanや文字列で判断し、テンプレート側で条件表示します。

この方法なら、Pleiades＋Gradle環境でも簡単にセットアップできて、@Controllerでモデルに「hasError」や「errorMessage」を渡して、ビューでth:if属性を使って制御できます。

2. th:if属性を使ってエラーメッセージを出す基本例

まずは簡単な例から。コントローラで「hasError」というbooleanをモデルに渡しておきます。


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

    @GetMapping("/form")
    public String showForm(Model model) {
        boolean hasError = true;  // errorの有無
        String errorMessage = "名前は必須項目です";
        model.addAttribute("hasError", hasError);
        model.addAttribute("errorMessage", errorMessage);
        return "formPage";
    }
}

次にThymeleafテンプレート側。エラーがtrueのときだけメッセージを表示します。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>フォーム入力</title>
</head>
<body>
    <form th:action="@{/submit}" method="post">
        <label>名前：<input type="text" name="name"/></label>
        <button type="submit">送信</button>
    </form>
    <div th:if="${hasError}" class="text-danger">
        <span th:text="${errorMessage}">エラーメッセージがここに表示されます</span>
    </div>
</body>
</html>

このように、th:if="${hasError}"と書くだけで、エラーがあるときだけ

が表示され、初心者でも簡単にエラー表示できます。

3. よくあるエラーメッセージの表示例

フォーム入力では、必須項目の未入力や形式の誤りなど、さまざまなバリデーションエラーが起こりえます。Thymeleafのth:ifを使って、これらのエラーを適切に表示する方法を見ていきましょう。

● 必須項目未入力のエラー表示

名前が未入力の場合に表示する例です。コントローラで名前の入力が空ならnameErrorをtrueにします。


model.addAttribute("nameError", name == null || name.isEmpty());

Thymeleafテンプレートでは、nameErrorがtrueのときにエラーメッセージを表示します。


<div th:if="${nameError}" class="text-danger">
    名前は必須項目です。
</div>

● バリデーションエラーの複数表示

複数の入力項目でエラーが起きる場合、個別にth:ifで表示制御が可能です。例えばメールアドレスの形式チェック。


<div th:if="${emailError}" class="text-danger">
    メールアドレスの形式が正しくありません。
</div>

コントローラでメール形式を検証し、emailErrorをモデルに渡して制御します。

4. th:ifの条件式の書き方のバリエーション

th:ifでは、単純な真偽値だけでなく、複雑な条件式も記述可能です。論理演算子や否定演算子を使いこなすことで柔軟な制御ができます。

● 論理演算子の使用例

「かつ（AND）」や「または（OR）」を使った条件式です。例えば、名前エラーとメールエラーのどちらかがある場合に表示する例。


<div th:if="${nameError} or ${emailError}" class="text-danger">
    入力エラーがあります。ご確認ください。
</div>

● 否定条件の使用例

「not」や「!」を使って条件を反転させることも可能です。例えばエラーがない場合に特定メッセージを表示。


<div th:if="not ${hasError}">
    入力に問題はありません。
</div>

5. 初心者が間違いやすいポイント

Thymeleafの条件式では初心者が陥りやすい誤りがいくつかあります。具体的に見ていきましょう。

● 論理演算子の書き方

JavaScriptの「&&」や「||」はThymeleafでは使えません。代わりに「and」「or」を使いましょう。


<!-- NG例 -->
<div th:if="${nameError} && ${emailError}">複数エラー</div>
<!-- OK例 -->
<div th:if="${nameError} and ${emailError}">複数エラー</div>

● nullチェックを忘れない

モデルの値がnullの場合、null参照例外になることがあります。条件式の前にコントローラでnullチェックをするか、条件式に注意しましょう。

● 複雑な条件は分割して書く

条件式が長くなると可読性が落ちます。可能ならコントローラで処理してシンプルなbooleanを渡すことがベストです。

6. エラーメッセージ表示のベストプラクティスとコツ

エラーメッセージを表示する際は、ユーザーが何を間違えたのか分かりやすく伝えることが重要です。Thymeleafのth:ifを活用することで、必要なメッセージだけを的確に表示し、ユーザー体験を向上させられます。ここでは実践的なコツを紹介します。

● エラー情報はできるだけ具体的に

「必須項目です」だけでなく「名前は必須項目です」のように、どの項目でどんな問題があるのか具体的に示しましょう。これによりユーザーはすぐに修正点が分かります。

● 複数のエラーは個別に表示

一括して「入力エラーがあります」だけでなく、必須項目、形式エラーなどを個別に分けて表示すると親切です。Thymeleafのth:ifで項目ごとに条件分岐させて対応します。

● コントローラでエラー判定を分かりやすく

複雑なエラー判定はJavaのコントローラで行い、ビューにはシンプルなbooleanや文字列を渡しましょう。ビューの条件式が簡潔になり、メンテナンスもしやすくなります。

● CSSクラスで視認性を高める

エラーメッセージには赤文字やアイコンを付けるなど、CSSで強調表示するとユーザーの注意を引きやすくなります。Bootstrapのtext-dangerクラスは簡単に使えて便利です。

7. まとめのサンプルコード例

ここまでの内容を踏まえて、実際のコントローラとThymeleafテンプレートのサンプルコードを示します。複数のエラー判定を渡し、ビューで個別にエラーメッセージを制御しています。


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

    @GetMapping("/inputForm")
    public String inputForm(Model model) {
        boolean hasError = true;
        boolean nameError = true;
        boolean emailError = false;
        String nameErrorMsg = "名前は必須項目です。";
        String emailErrorMsg = "メールアドレスの形式が正しくありません。";

        model.addAttribute("hasError", hasError);
        model.addAttribute("nameError", nameError);
        model.addAttribute("emailError", emailError);
        model.addAttribute("nameErrorMsg", nameErrorMsg);
        model.addAttribute("emailErrorMsg", emailErrorMsg);

        return "inputForm";
    }
}


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" />
    <title>入力フォーム</title>
</head>
<body>
    <form th:action="@{/submit}" method="post">
        <label>名前：<input type="text" name="name" /></label><br />
        <label>メール：<input type="text" name="email" /></label><br />
        <button type="submit">送信</button>
    </form>

    <div th:if="${hasError}" class="text-danger">
        <div th:if="${nameError}" th:text="${nameErrorMsg}"></div>
        <div th:if="${emailError}" th:text="${emailErrorMsg}"></div>
    </div>
</body>
</html>