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

新人

「Thymeleafで要素にclass属性とかdisabled属性を動的に追加・削除したいです！」

先輩

「if文を使えば簡単だよ。Pleiades＋Gradle環境のSpring Bootでどう書くか見ていこう」

新人

「具体的なHTMLコードが知りたいです！」

先輩

「では、@Controllerから渡すbooleanとThymeleafのif文でclassやdisabledを操作する方法を紹介するね」

1. Thymeleafで属性を操作する基本の考え方

まず、Thymeleafで class や disabled のような属性を変えるには th:attr や専用の th:classappend、th:disabled を使います。これらは boolean 判定と組み合わせて動的に属性を追加・削除できます。Spring Boot の @Controller で boolean フラグを渡せば、Pleiades＋Gradle 環境でも簡単に実行できます。

たとえば、button をクリック不可にしたいときに、disabled 属性を動的につけたり消したりできます。

2. th:ifで属性の追加・削除を行う基本

まずは button に disabled を追加・削除するシンプルな例です。


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

    @GetMapping("/form")
    public String showForm(Model model) {
        boolean canSubmit = checkCanSubmit(); // 送信可能か判定
        model.addAttribute("canSubmit", canSubmit);
        return "form";
    }

    private boolean checkCanSubmit() {
        return false;
    }
}


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>フォーム</title></head>
<body>
  <h1>サンプルフォーム</h1>
  <button type="submit"
    th:disabled="${!canSubmit}">送信</button>
</body>
</html>

ここでは boolean フラグ canSubmit が false のときに button に disabled 属性が付きます。逆に true のときは disabled が付かず、クリック可能になります。

次は class を追加・削除する例です。th:classappend を使うと、既存の class に条件付きで新しい class を加えられます。


<button th:classappend="${isActive} ? 'active' : ''">リンク</button>

この例では、boolean フラグ isActive が true のときに class="active" が追加され、false のときは何も追加されません。

3. 実務での属性の追加・削除の活用例

実際の開発現場では、Thymeleafの属性追加・削除機能を使って、ユーザー操作に応じた表示切り替えやスタイル適用がよく行われます。たとえば「編集モード＆レイアウト切替」や「エラーハンドリング」などです。

編集モードによる class 属性の切替


@GetMapping("/edit")
public String editForm(Model model) {
    boolean editMode = true; // 編集モードON/OFF
    model.addAttribute("editMode", editMode);
    return "edit";
}


<div th:classappend="${editMode} ? ' editable' : ''">
  <input type="text" th:disabled="${!editMode}" />
  <textarea th:disabled="${!editMode}"></textarea>
</div>

このように、th:classappendで divに "editable" クラスを追加して編集モードらしさを出し、th:disabledで入力項目の有効／無効を制御できます。

エラー発生時の視覚的な強調


@GetMapping("/submit")
public String submit(Model model) {
    boolean hasError = validateInput(); // 入力チェック
    model.addAttribute("hasError", hasError);
    return "form";
}


<input type="text"
  th:classappend="${hasError} ? ' text-danger' : ''" />
<span th:if="${hasError}" style="color:red;">入力エラーがあります</span>

この例では、入力チェックでエラーがあるときに inputに赤字クラスを追加し、エラーメッセージを表示しています。ユーザーにとってわかりやすい UI を手軽に構築できます。

4. よくある間違いや注意点

th:disabledだけでなく、disabledを初期属性に残してしまうと意図しない動きになる
th:classappendの条件式で空文字「''」を返すと、余計なスペースが発生しやすいので注意
boolean フラグが null の場合、Thymeleafで例外になることがあるので、@Controller側で必ず true/false を渡す
複数の属性を同時に if 判定すると HTML が読みにくくなる場合があるため、th:blockやテンプレート分割を検討する

特に初心者は boolean 変数の null チェックを忘れやすく、th:disabled に null を渡してしまうミスがあります。@Controllerで必ず true/false を設定し、Gradle ビルド時にもチェックしましょう。

5. @Controllerでの属性の制御例

最後に、@Controller による属性切替の制御例をまとめます。以下は「ログイン済フラグ」「編集済フラグ」をもとに、属性追加・削除を行う例です。


@GetMapping("/profile")
public String profile(Model model) {
    boolean loggedIn = checkLogin();     // ログイン済みか
    boolean canEdit = checkAuthority();  // 編集権限があるか
    model.addAttribute("loggedIn", loggedIn);
    model.addAttribute("canEdit", canEdit);
    return "profile";
}


<div th:if="${loggedIn}">
  <h1>プロフィール編集</h1>
  <button th:disabled="${!canEdit}">保存</button>
  <span th:classappend="${canEdit} ? ' visible' : ' invisible'">編集できます</span>
</div>
<div th:if="${!loggedIn}">
  <p>ログインしてください。</p>
</div>

この例では、ログインの有無で編集画面自体の表示/非表示を切り替え、編集可能なユーザーには「保存」ボタンを有効化するとともに、メッセージの visibility を制御しています。

ログイン状態や権限フラグを Controller で管理し、Thymeleaf の属性追加・削除で UI を制御する流れは、実務でも非常によく使われるパターンです。

6. 実際の画面での活用例

実際にSpring Bootの@Controllerから渡したboolean値を使って、画面の見た目や使いやすさを向上させる例を見ていきましょう。例えば「商品購入ページ」で、在庫状況に応じて購入ボタンを無効化する例です。


@GetMapping("/shop")
public String shop(Model model) {
    boolean inStock = checkStock(); // 在庫判定
    model.addAttribute("inStock", inStock);
    return "shop";
}


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>商品ページ</title></head>
<body>
  <h1>商品詳細</h1>

  <div>
    <p th:text="${inStock} ? '在庫あり' : '在庫なし'"></p>
    <button th:disabled="${!inStock}">購入する</button>
  </div>
</body>
</html>

このように、在庫がない場合は「購入する」ボタンが自動的に無効化されるので、ユーザーにとって操作しやすい画面になります。Spring BootとThymeleafの組み合わせは、Pleiades＋Gradle環境でスムーズに確認できます。

7. 初心者が学習を進めるためのコツ

属性追加・削除の仕組みは一見単純ですが、実際の開発現場では非常に重要です。ここでは初心者が学習を進めるためのポイントをいくつか紹介します。

まずはシンプルな例を真似る

最初は、公式ドキュメントやチュートリアルのサンプルを真似するところから始めましょう。基本的なth:ifやth:classappend、th:disabledの使い方を繰り返すことで、自然に身につきます。

booleanフラグの準備を丁寧に

Spring Bootの@Controllerで渡すbooleanフラグは、必ずtrueかfalseになるようにしておきましょう。nullが渡されると、Thymeleafで例外が起きることが多いです。初心者のうちは必ずnullチェックをして、Gradleビルド時にエラーがないかも確認すると良いです。

小さな画面で試しながら進める

学習を始めたばかりのころは、あまり複雑な画面で試さず、ボタン一つ、入力欄一つの画面で「属性が変わる瞬間」を体感するのがおすすめです。実際に目で見て動きがわかると、理解がぐっと深まります。

画面上で条件分岐の動きを確認する

画面上でbooleanの値を切り替えながら、属性の追加・削除がどのように変化するかを何度も試してみてください。特に、Spring BootアプリケーションをPleiades上で実行して、HTMLの動きを細かく見ておくと良いです。

8. まとめ

ここまで、Thymeleafのif文を使った属性追加・削除の方法を、初心者向けに丁寧に解説してきました。Pleiades＋Gradle環境での開発では、@Controllerから渡すboolean値をうまく使うことで、HTMLのclassやdisabled属性を動的にコントロールできます。

属性追加・削除は、画面のユーザー体験に直結する大切な技術です。たとえば、ボタンを無効化することで誤操作を防止したり、エラーメッセージを出すことでわかりやすいUIを提供できます。

実務では、ユーザーの権限や状態に応じて属性を切り替える例が頻出します。Gradleでビルドし、Pleiades上で動作を確認しながら学習すると、Thymeleafのif文と属性制御の使い方がしっかり身につきます。

ぜひ今回紹介した内容をもとに、あなたのSpring Bootアプリケーションでも試してみてください。地道に手を動かすことで、理解がさらに深まり、より良い画面作りができるようになります。

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

Thymeleaf if文で属性追加・削除を行う方法｜初心者向け入門ガイド