Thymeleaf クラス追加・削除をif条件で制御する方法を徹底解説｜Spring MVCで学ぶ動的クラス設定

Thymeleaf クラス追加・削除をif条件で制御する方法

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

新人

「先輩、ThymeleafでHTMLのクラスを条件によって追加したり削除したりできるって聞いたんですが、どうやるんですか？」

先輩

「うん、Thymeleafはテンプレートエンジンだから、HTMLの中でJavaの変数を使ってクラスを動的に制御できるんだ。」

新人

「動的に制御っていうのは、例えば条件がtrueのときだけ特定のCSSクラスを付けるみたいなことですか？」

先輩

「そうそう。Thymeleafではth:classやth:classappendという属性を使えば、if条件でクラスの追加や削除ができるんだ。今日はその仕組みを一緒に見ていこう！」

1. Thymeleafとは？テンプレートエンジンの基本

Thymeleaf（タイムリーフ）は、Spring MVCでよく使われるテンプレートエンジンです。テンプレートエンジンとは、HTMLファイルにJavaの変数や条件分岐を埋め込むことで、サーバー側で動的にページを生成する仕組みを提供するライブラリです。例えば、ログイン状態やユーザー権限に応じて表示内容を変えたいときに便利です。

Thymeleafの大きな特徴は、「ブラウザ上でもHTMLとして正しく開ける」ことです。つまり、静的なHTMLとしても機能し、Spring Bootで動作させたときは変数やif条件が反映された動的なHTMLになるのです。これにより、デザイナーとエンジニアの共同作業もスムーズになります。

特に、Thymeleafではth:textでテキストを動的に変更したり、th:ifやth:eachを使って表示制御を行うことが可能です。今回のテーマである「クラスの動的設定」も、この考え方の延長にあります。

2. Spring MVCでThymeleafを使うための前提条件

ここでは、ThymeleafをSpring MVCプロジェクトで動かすための前提条件について整理します。この記事の前提環境は以下の通りです。

Pleiades（Eclipse日本語化パッケージ）を使用
Gradle構成（Mavenは使用しない）
@Controller構成で開発（@RestControllerは使用しない）

まず、PleiadesでSpring Bootプロジェクトを作成します。その際、依存関係の追加はPleiadesの「Spring Initializr」ウィザードで行います。「Thymeleaf」と「Spring Web」を選択しておきましょう。

Gradleの設定ファイル（build.gradle）は次のようになります。


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

これで、Spring MVCとThymeleafの連携が可能になります。コントローラは次のように作成します。


@Controller
public class SampleController {

    @GetMapping("/sample")
    public String showPage(Model model) {
        model.addAttribute("isActive", true);
        return "sample";
    }
}

上記のコードでは、isActiveという変数をモデルに渡しています。Thymeleafテンプレートでは、この変数を使ってクラスを動的に切り替えることができます。

3. HTMLのclass属性の基本（静的なクラス指定とその限界）

HTMLでは、通常class属性を使ってCSSのデザインを指定します。例えば次のように記述します。


<div class="active">メニュー</div>

このように書くと、常に「active」というクラスが付与されます。しかし、動的に状態を切り替えたいとき、たとえば「選択されているときだけクラスを付けたい」といった場合、通常のHTMLでは対応できません。JavaScriptで制御することも可能ですが、サーバーサイドで条件分岐を行いたい場合にはThymeleafが非常に便利です。

Thymeleafを使えば、th:ifやth:classappendを使って、変数の値に応じてクラスを動的に付け替えることができます。これによって、「アクティブ状態のときだけclass="active"を追加する」といった柔軟な制御が可能になります。

次の記事では、実際にif条件を使ってクラスを追加・削除する方法を、具体的なサンプルコードで解説します。Spring MVCとThymeleafを組み合わせることで、見た目とロジックをきれいに分離した開発ができるようになります。

4. th:classappendを使ったクラスの動的追加

Thymeleafでは、HTMLのclass属性にクラス名を動的に追加するには、th:classappendを使用します。この属性は、既存のクラスに対して条件に応じてクラスを「追加」する仕組みです。つまり、静的なクラスに加えて、特定の条件がtrueのときだけ別のクラスを後から追加することができます。

例えば、ナビゲーションメニューの中で現在のページが選択されている場合だけ「active」クラスを付けたい場合、次のように記述します。


<li class="menu-item" th:classappend="${isActive} ? ' active' : ''">ホーム</li>

ここでは、${isActive}という変数がtrueのときのみ「active」というクラスを追加します。falseの場合は何も追加されません。Thymeleafでは三項演算子（条件式 ? 値1 : 値2）が利用できるため、このようにシンプルに条件分岐を書けるのが特徴です。

この方法の利点は、もともとmenu-itemというクラスを常に保持しながら、条件に応じてクラスを動的に付与できることです。JavaScriptを使わずにサーバーサイドで制御できるため、状態に応じたスタイル変更を簡単に実現できます。

また、複数の条件を組み合わせたい場合も柔軟に対応できます。たとえば「アクティブ」かつ「管理者向けページ」のときだけ特定のクラスを追加したい場合は、次のように記述します。


<li class="menu-item" th:classappend="${isActive} ? ' active' : ''"
                     th:classappend="${isAdmin} ? ' admin' : ''">設定</li>

このように、th:classappendは複数回使うことができ、それぞれの条件に応じてクラスを追加できます。HTMLをシンプルに保ちつつ、柔軟なクラス制御を実現できるのが大きな魅力です。

5. th:classで条件によってクラス全体を切り替える方法

th:classappendが既存クラスに「追加」するのに対し、th:classはクラス属性全体を「上書き」する仕組みです。つまり、条件によってクラスのセットを丸ごと切り替える場合に使います。

例えば、ユーザーの状態に応じてクラスを完全に切り替えるケースを考えましょう。


<div th:class="${isActive} ? 'card active' : 'card inactive'">アカウント情報</div>

このように記述すると、変数isActiveがtrueの場合は「card active」というクラス、falseの場合は「card inactive」というクラスが設定されます。th:classを使うと、状態によってスタイルの切り替えを明確に制御できます。

また、条件によってまったく異なる見た目を適用したい場合にも適しています。例えば「有効ユーザー」と「無効ユーザー」で背景色や枠線を変えたい場合、CSSクラスを丸ごと入れ替えることで、視覚的な違いをわかりやすく表現できます。

ただし、既存のクラスを保持したい場合にはth:classappendを使うべきです。th:classを使うと、HTMLに記述されている静的クラスを上書きしてしまうため、必要に応じて使い分けましょう。

6. if条件を使ってクラスを付け替える具体例（true/falseで切り替える）

ここでは、実際にSpring MVCのコントローラとThymeleafテンプレートを組み合わせて、if条件によるクラスの付け替えを実装してみましょう。

（1）コントローラの実装

Pleiades上でSpring Bootアプリケーションを作成し、次のような@Controllerクラスを作成します。


@Controller
public class ConditionController {

    @GetMapping("/status")
    public String showStatus(Model model) {
        boolean isOnline = true;
        model.addAttribute("isOnline", isOnline);
        return "status";
    }
}

この例では、isOnlineという変数をテンプレートに渡しています。この変数の値がtrueのときにクラスを切り替えるようにします。

（2）Thymeleafテンプレートの実装

次に、status.htmlを作成します。ここでth:classappendを使って、状態に応じてクラスを付け替えます。


<div class="status-box" th:classappend="${isOnline} ? ' online' : ' offline'">
    サーバー状態: <span th:text="${isOnline} ? 'オンライン' : 'オフライン'"></span>
</div>

上記のように記述すると、isOnlineがtrueのときには「online」クラスが追加され、falseのときには「offline」クラスになります。CSSで「.online」や「.offline」に色や背景を指定しておくことで、視覚的に状態を表現できます。

（3）実際の表示例

たとえば、変数isOnlineがtrueなら次のようにHTMLが生成されます。


<div class="status-box online">
    サーバー状態: オンライン
</div>

falseの場合は次のようになります。


<div class="status-box offline">
    サーバー状態: オフライン
</div>

このように、if条件を使ってクラスを切り替えることで、画面の状態表示をわかりやすく表現できます。Spring MVCとThymeleafを組み合わせることで、サーバーサイドのロジックに基づいた動的なクラス制御が実現できるのです。

特に、業務システムや管理画面では、ステータスやフラグの値に応じて見た目を変える処理が多く発生します。Thymeleafのif条件を活用すれば、複雑なJavaScriptを記述せずに、テンプレートレベルで柔軟な表示切り替えが可能になります。

また、th:ifやth:unlessと組み合わせることで、特定の要素そのものを非表示にしたり、別のクラス構成を使ったりする高度な制御も行えます。こうした機能を使いこなすことで、Spring Bootアプリケーションのフロントエンド開発がより効率的になります。

7. 条件分岐を使った実践例（ステータスによってクラスを変える）

ここでは、Thymeleafの条件分岐を使って、実際に状態ごとにクラスを変える例を作ってみましょう。たとえば、注文ステータスが「出荷済み」「処理中」「キャンセル」のいずれかによって表示する色を変えるケースです。このような条件分岐は、Thymeleaf 条件分岐の基本として非常に重要です。

まず、HTMLテンプレートではth:classappendを使って条件ごとにクラスを動的に追加します。これにより、サーバー側の変数値に応じてクラスが切り替わります。


<div class="order-status"
     th:classappend="${status} == 'SHIPPED' ? ' shipped' : ''"
     th:classappend="${status} == 'PROCESSING' ? ' processing' : ''"
     th:classappend="${status} == 'CANCELLED' ? ' cancelled' : ''">
    <span th:text="${status}">状態</span>
</div>

このように複数のth:classappendを組み合わせることで、状態に応じたクラスを動的に制御できます。たとえば、注文が「SHIPPED（出荷済み）」ならclass="order-status shipped"のように出力されます。Thymeleafの動的クラス変更機能を活用することで、バックエンドの値に応じたスタイル切り替えが自然に行えるようになります。

また、このような条件をさらに見やすく整理したい場合は、Spring MVCのコントローラ側でステータスを文字列ではなくEnum型として扱うのもおすすめです。これにより、型安全に条件分岐を行うことができます。

8. コントローラでモデル属性を渡して制御する方法

次に、Spring MVC コントローラからThymeleafテンプレートに値を渡し、条件分岐でクラスを制御する方法を見ていきます。ここで重要なのは、テンプレート内で参照する変数をモデルに追加しておくことです。


@Controller
public class OrderController {

    @GetMapping("/order")
    public String showOrder(Model model) {
        String status = "PROCESSING";
        model.addAttribute("status", status);
        return "order";
    }
}

このコントローラでは、statusという属性をモデルに渡しています。テンプレート側ではこの変数を使って、どのクラスを追加するかを制御します。これは、Spring MVCの基本的なデータ受け渡しの仕組みであり、Thymeleaf 条件分岐の実践において欠かせません。

テンプレートorder.htmlでは、さきほどと同様にth:classappendを使って条件によってクラスを切り替えます。たとえば、statusが「PROCESSING」であれば「黄色」、SHIPPEDであれば「緑」、CANCELLEDであれば「灰色」といったようにデザインを変えることができます。


<div class="order-box"
     th:classappend="${status} == 'PROCESSING' ? ' yellow' : ''"
     th:classappend="${status} == 'SHIPPED' ? ' green' : ''"
     th:classappend="${status} == 'CANCELLED' ? ' gray' : ''">
    注文の状態: <span th:text="${status}"></span>
</div>

このように、Spring MVC コントローラで渡した変数をテンプレートで受け取り、Thymeleaf 条件分岐を利用して動的クラス変更を実現できます。サーバーサイドの値が直接ビューに反映されるため、JavaScriptを使わずに状態ごとの見た目を柔軟に変えることが可能です。

さらに、複数の属性を組み合わせて条件を作ることもできます。たとえば、「支払い済みかつ出荷済み」のときに特定のクラスを付けるなど、業務ロジックに沿った表示制御が簡単に実装できます。これにより、コードの可読性も高まり、保守性にも優れた構成になります。

9. よくあるエラーとデバッグ方法（条件が反映されないときの対処）

最後に、Thymeleaf 条件分岐でよくあるトラブルとその対処方法について解説します。初心者の方がつまずきやすいポイントとして、条件が反映されないという問題があります。これは主に、Spring MVC コントローラから正しくモデル属性が渡っていないか、テンプレートで式を間違えている場合に発生します。

まず確認すべきは、コントローラ側でmodel.addAttribute()が正しく設定されているかどうかです。たとえば次のように書き忘れているケースがあります。


@GetMapping("/order")
public String showOrder(Model model) {
    // model.addAttribute("status", "SHIPPED"); ←これを忘れるとテンプレートでnullになる
    return "order";
}

このようにモデル属性を渡していないと、テンプレート内で${status}がnullとなり、条件が常にfalseになってしまいます。結果として、動的クラス変更が反映されないように見えるのです。

また、Thymeleafでは比較演算子の書き方にも注意が必要です。文字列を比較する場合は「==」ではなく「equals()」を使う方が確実なケースがあります。特に、文字列の内容が同じでも参照が異なる場合にうまく動作しないことがあります。


<div th:classappend="${status.equals('SHIPPED')} ? ' shipped' : ''">出荷状況</div>

このようにequals()を使うことで、確実に文字列の内容で比較することができます。もし変数がnullの可能性がある場合は、${status != null and status.equals('SHIPPED')}のようにnullチェックも加えると安全です。

もう一つ多いのが、条件分岐のスペースや引用符の書き方によるエラーです。Thymeleafの式ではシングルクォートを使う必要があります。ダブルクォートを使うと構文エラーになるため注意しましょう。

さらに、ブラウザで見たときにクラスが正しく出力されているかを確認するには、生成されたHTMLを右クリックして「検証」から確認します。もしクラスが付与されていない場合は、サーバー側で渡した変数が意図通りの値になっているかをログで確認するのが有効です。

Spring Bootでは、System.out.println()やlog.info()を使ってデバッグ出力することで、値が正しく渡っているかを簡単に確認できます。これにより、テンプレートの条件分岐が想定通り動いていない場合でも原因を特定しやすくなります。

また、Thymeleafのキャッシュが古いHTMLを保持している場合にも、条件が反映されないように見えることがあります。その場合はアプリケーションを再起動してキャッシュをクリアすることで改善します。

このように、条件分岐が反映されない場合の多くは基本的なミスに起因しています。Spring MVC コントローラで正しくモデル属性を設定し、テンプレートでの式や比較演算子を丁寧に確認すれば、問題の大半は解決できます。Thymeleaf 条件分岐を使いこなせば、動的クラス変更や状態表示が自在にできるようになり、アプリケーションの表現力が大きく向上します。