Thymeleaf クラスの動的設定方法まとめ｜初心者でもわかるSpring MVCのテンプレートエンジン入門

Thymeleaf クラスの動的設定方法まとめ

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

新人

「先輩、Thymeleafってよく聞きますけど、そもそもどんなものなんですか？」

先輩

「Thymeleaf（タイムリーフ）は、Spring MVCでよく使われるテンプレートエンジンの一つだよ。HTMLをそのままブラウザで表示できるのが特徴なんだ。」

新人

「テンプレートエンジンって、JSPとかと何が違うんですか？」

先輩

「JSPはサーバーサイドでHTMLを生成するけど、Thymeleafはもっと自然にHTMLに変数を埋め込めるんだ。だからデザイナーとエンジニアの協業にも向いてる。」

新人

「なるほど！Spring Bootのプロジェクトでよく使われている理由が少し分かりました。」

先輩

「そうそう。しかも今回は“クラス属性の動的設定”という便利な使い方を中心に学んでいくよ。」

1. Thymeleafとは何か（基本的な紹介）

Thymeleaf（タイムリーフ）は、Spring MVCと連携してHTMLを動的に生成するテンプレートエンジンです。通常のHTMLファイルに、th:textやth:ifなどの属性を追加することで、サーバーサイドのデータを画面に反映できます。

この仕組みにより、Javaのオブジェクトから取得した値を直接HTMLに埋め込んだり、条件によって表示内容を切り替えることが可能になります。Thymeleafは静的HTMLとしても表示できるため、デザイン確認もしやすく、初心者にとって非常に扱いやすいテンプレートエンジンです。

例えば、コントローラで設定したモデルデータをHTMLで表示する基本例は次のようになります。


<p th:text="${message}">ここにメッセージが入ります</p>

このように書くと、Springの@Controllerで渡したmessageの内容が自動的にHTMLに表示されます。テンプレートエンジンであるThymeleafの基本を理解することが、これからのSpring開発の第一歩になります。

2. クラス属性（class属性）をHTMLでどのように扱うかの基本

HTMLでは、クラス属性（class）はスタイル指定や状態を表すために使われます。たとえば、ボタンの色を変えたり、エラーメッセージの部分を赤く表示したりするときに使用します。

通常のHTMLでは次のように記述します。


<button class="btn btn-primary">送信</button>

しかし、Thymeleafでは動的にクラスを変更することができます。たとえば、条件によってボタンのクラスを変えたい場合には、th:classやth:classappendといった属性を使います。

この仕組みを理解しておくと、「状態によってボタンの色を変える」「入力エラー時に赤い枠を表示する」といったUIの改善を簡単に行えるようになります。

また、ThymeleafはHTMLテンプレートとしてブラウザで直接開いても表示が崩れない設計になっているため、デザイナーとの共同作業にも最適です。これは、JSPやVelocityなどと比べたときの大きなメリットです。

次に、実際にSpring BootのプロジェクトでThymeleafを使うための準備を確認してみましょう。

3. Spring Boot環境でThymeleafを使うための前提条件（pleiades＋Gradle＋@Controller構成）

ここでは、開発環境としてpleiades（Eclipse日本語化パッケージ）＋Gradle構成を前提とします。Mavenではなく、Gradleでプロジェクトを作成し、Thymeleafを依存関係として追加します。

pleiadesで新しいSpring Bootプロジェクトを作成するとき、「Thymeleaf」にチェックを入れるだけで自動的に依存関係が追加されます。手動で設定する場合は、以下のようにbuild.gradleに追加します。


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

そして、コントローラクラスでは@Controllerを使用してビューにデータを渡します。ここで@RestControllerを使ってはいけません。なぜなら、@RestControllerはJSONレスポンス専用であり、HTMLテンプレートを返すためには@Controllerを使う必要があるからです。


@Controller
public class SampleController {
    @GetMapping("/hello")
    public String hello(Model model) {
        model.addAttribute("message", "こんにちは、Thymeleafの世界へようこそ！");
        return "hello";
    }
}

上記のコントローラを作成すると、resources/templates/hello.htmlにあるHTMLが自動的に呼び出されます。これがSpring MVCとThymeleafの連携の基本です。

ここまでで、Thymeleafの基本概念と開発環境の準備ができました。次回は、実際にクラス属性を条件によって動的に切り替える方法を詳しく見ていきましょう。

4. Thymeleafでクラス属性を動的に設定する基本構文（th:class, th:classappend）

ここからは、Thymeleafでクラス属性を動的に切り替える方法を学びましょう。HTMLのclass属性を状況に応じて変更したい場合、Thymeleafではth:classとth:classappendという2つの属性を使います。

th:classはクラス属性全体を上書きする構文で、th:classappendは既存のクラスに対してクラス名を追加する構文です。

まず、基本的な使い方の例を見てみましょう。


<button th:class="'btn ' + ${isActive} ? 'btn-success' : 'btn-secondary'">送信</button>

この例では、isActiveという変数がtrueであれば「btn-success」、falseであれば「btn-secondary」というクラスが設定されます。Thymeleafは三項演算子を使って条件分岐ができるため、HTML内で簡潔に書けるのが特徴です。

一方、th:classappendを使うと、既に指定されているクラスに対して動的にクラス名を追加できます。


<div class="alert" th:classappend="${error} ? ' alert-danger' : ' alert-info'">
    メッセージを表示します
</div>

このようにth:classappendを使うことで、デフォルトのクラスを維持しつつ、状態に応じたクラスを追加できます。これにより、CSSデザインを保ったまま柔軟な見た目変更が可能になります。

この仕組みは、入力フォームやエラーメッセージなどの状態変化を視覚的に表現するときに特に役立ちます。初心者がThymeleafを使ってWebページの状態を動的に制御する上で、最も理解しておくべきポイントです。

5. 条件によってクラスを切り替える方法（if文・三項演算子の使い方）

Thymeleafでは、単純な真偽値の判定だけでなく、条件分岐によってクラスを柔軟に変更することができます。ここで重要なのが「三項演算子」と「条件式」の活用です。

例えば、ユーザーのログイン状態によってボタンのクラスを切り替えるケースを考えてみましょう。


<button th:class="${loggedIn} ? 'btn-logout' : 'btn-login'">
  [[${loggedIn} ? 'ログアウト' : 'ログイン']]
</button>

このように、Thymeleafの中で? :の三項演算子を使うことで、Javaと同じ感覚で条件分岐が可能です。loggedInがtrueなら「btn-logout」クラスが適用され、ボタンの表示文字も「ログアウト」になります。

また、より複雑な条件を扱いたい場合には、th:ifやth:unlessを組み合わせて書くこともできます。


<p th:if="${age >= 20}" class="adult">成人ユーザー</p>
<p th:unless="${age >= 20}" class="child">未成年ユーザー</p>

このように書くと、ageが20以上であれば「成人ユーザー」が表示され、それ以外の場合は「未成年ユーザー」が表示されます。条件に応じてクラスや要素そのものを切り替えることができるのがThymeleafの強みです。

「条件分岐でクラスを変える」という考え方を理解しておくと、エラー表示、入力チェック、ボタンの活性・非活性など、さまざまなUIパターンを実現できます。

6. コントローラからモデルデータを渡してクラスを変更する実例

Thymeleafの魅力は、Spring MVCの@ControllerとModelを使ってサーバー側の値をテンプレートに反映できる点です。ここでは、実際にコントローラからフラグを渡して、HTMLのクラスを切り替えるサンプルを見てみましょう。


@Controller
public class StatusController {

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

次に、status.htmlでこのデータを使って動的にクラスを設定します。


<div th:class="${isOnline} ? 'status-online' : 'status-offline'">
    [[${isOnline} ? '現在オンラインです' : '現在オフラインです']]
</div>

このコードでは、サーバー側でisOnlineがtrueなら「status-online」クラスが設定され、表示メッセージも「現在オンラインです」となります。反対にfalseなら「status-offline」となり、メッセージも切り替わります。

ここで重要なのは、HTMLにロジックを直接書くのではなく、コントローラ側で状態を管理している点です。Thymeleafはサーバーサイドの値を安全にHTMLに埋め込むため、ビューとロジックを明確に分離できます。

また、ThymeleafではHTMLタグの中に複数の動的属性を同時に指定できるため、クラスだけでなくテキストやスタイルを連動させることも可能です。たとえば次のように書けば、見た目とメッセージの両方を一括で制御できます。


<div th:class="${isOnline} ? 'status-online' : 'status-offline'"
     th:text="${isOnline} ? 'サーバーは稼働中です' : 'サーバーは停止中です'">
</div>

このように、ThymeleafはSpringのModelと連携して、動的なクラス設定を非常に直感的に扱うことができます。初心者でも一度書いてみると、そのシンプルさとパワフルさが実感できるはずです。

さらに、フラグを複数使うことで、複数の状態に対応したクラス設定も可能です。たとえば、オンライン・メンテナンス中・停止中の3状態を切り替える場合、次のように記述します。


<div th:class="${status == 'online'} ? 'online' :
               (${status == 'maintenance'} ? 'maintenance' : 'offline')">
    [[${status} == 'online' ? '稼働中' :
      (${status} == 'maintenance' ? 'メンテナンス中' : '停止中')]]
</div>

三項演算子をネストすることで、複数の条件を一度に表現することもできます。やや見づらくなりますが、簡単な状態切り替えなら十分に活用できます。

このように、Thymeleafのth:classやth:classappendを使えば、Spring MVCアプリケーションで柔軟にHTMLの見た目を制御できます。コントローラ側ではデータや状態をModelに詰め、テンプレート側ではその値に応じてクラスを動的に切り替える、という流れをしっかり理解しておきましょう。

7. th:classappendとth:classの違いを具体例で比較

ここでは、Thymeleaf クラス動的変更の代表的な2つの方法である th:class と th:classappend の違いを丁寧に見ていきましょう。見た目は似ていますが、動作の仕方が異なります。初心者がよく混乱しやすいポイントなので、しっかり理解しておくことが大切です。

新人

「先輩、どっちを使えばいいのか分からなくなります。見た目が同じに見えるんですけど…」

先輩

「良い質問だね。まず th:class はクラス全体を上書きするのに対して、th:classappend は既にあるクラスに追加するという違いがあるんだ。」

例えば、次のようなHTMLを考えてみましょう。


<!-- th:classを使う場合 -->
<p class="base" th:class="${active} ? 'highlight' : 'normal'">サンプル1</p>

<!-- th:classappendを使う場合 -->
<p class="base" th:classappend="${active} ? ' highlight' : ' normal'">サンプル2</p>

上の例で、th:classを使うと「base」は上書きされて消えてしまいます。一方、th:classappendでは、既存の「base」クラスに「highlight」や「normal」が追加されます。つまり、見た目の基本スタイルを維持したまま状態に応じた変化を付けたい場合には、th:classappendを使うのがベストです。

HTML テンプレート Spring MVC では、th:classappendを利用することでレイアウトを崩さず動的変更ができるため、特にフォームやメッセージ表示などで多く使われます。

8. 複数条件を組み合わせたクラス設定（AND／OR条件）

実務では「一つの条件」だけでなく、複数の状態を同時に判断してクラスを変えるケースもあります。例えば「ログイン中かつ管理者であるときだけ特別なスタイルを適用する」といったシーンです。

Thymeleafでは、Javaと同じようにAND（and）やOR（or）を使って条件を組み合わせることができます。


<div th:class="${loggedIn and admin} ? 'admin-mode' : 'user-mode'">
    [[${loggedIn and admin} ? '管理者モード' : '一般ユーザーモード']]
</div>

上の例では、ログイン済みかつ管理者である場合に「admin-mode」クラスが適用されます。もしどちらかの条件が満たされない場合は「user-mode」となります。OR条件を使う場合は、orを使って次のように書けます。


<div th:class="${loggedIn or guest} ? 'welcome' : 'hidden'">
    [[${loggedIn or guest} ? 'ようこそ！' : '表示されません']]
</div>

このように複数条件を扱うことで、ページ全体の動作を柔軟に制御できます。特に、複雑な画面ロジックをシンプルに表現できるのがThymeleafの強みです。th:classやth:classappendに条件を直接書けるため、Javaのコードを増やさずにテンプレート内で見た目をコントロールできます。

ただし、条件が増えすぎると可読性が下がるため、場合によってはコントローラ側で状態を整理してからモデルに渡す方が良いでしょう。


@Controller
public class UserController {

    @GetMapping("/user")
    public String user(Model model) {
        boolean loggedIn = true;
        boolean admin = false;
        model.addAttribute("loggedIn", loggedIn);
        model.addAttribute("admin", admin);
        return "user";
    }
}

このようにしておけば、HTML側では条件を簡潔に書けるようになります。Thymeleaf クラス動的変更の設計では、「条件をテンプレートに書く量を減らす」ことが読みやすいコードへの第一歩です。

9. 実践的なサンプル：エラーメッセージや入力フォームの状態でクラスを変更する例

最後に、実際の業務で役立つ実践的なサンプルを紹介します。ここでは、入力フォームでエラーが発生した場合にクラスを赤枠に変更する例を取り上げます。

新人

「エラーのときだけ赤くしたいんですが、CSSを書き換えなくてもできるんですか？」

先輩

「もちろんできるよ。th:classappendを使えば、Springの検証結果に応じてクラスを動的に追加できるんだ。」

まず、コントローラ側でエラーフラグを渡します。


@Controller
public class FormController {

    @GetMapping("/form")
    public String showForm(Model model) {
        boolean hasError = true;
        model.addAttribute("hasError", hasError);
        return "form";
    }
}

次に、テンプレート側でクラスを動的に変更します。


<form action="/submit" method="post">
    <input type="text" name="username"
           class="input-field"
           th:classappend="${hasError} ? ' input-error' : ''" />
    <p th:if="${hasError}" class="error-message">入力内容に誤りがあります。</p>
</form>

この例では、hasErrorがtrueのときだけ「input-error」クラスが追加され、入力欄が赤く表示されます。同時に、エラーメッセージの表示も制御できます。Spring MVC のフォームバリデーションと組み合わせれば、より実用的なエラーハンドリングが可能です。

このような仕組みを使うことで、ユーザーがどの入力項目で間違えたのかを直感的に分かりやすく表示できます。特に企業向けアプリケーションなどでは、視覚的なフィードバックが重要になるため、Thymeleafでのクラス動的制御は非常に役立ちます。

また、単一のエラーだけでなく、複数の状態を組み合わせてクラスを設定することも可能です。例えば、「エラーかつ未入力のときは赤枠＋点滅表示」という条件も次のように書けます。


<input type="text" name="email"
       th:classappend="${hasError and emptyField} ? ' input-error blink' :
                       (${hasError} ? ' input-error' : '')" />

このように、ANDやOR条件を組み合わせることで柔軟な表示制御ができます。HTML テンプレート Spring MVC の開発では、こうした細やかな視覚的制御がユーザー体験を大きく向上させます。

最後に、初心者の方が覚えておきたいポイントとして、「Thymeleafの動的クラス設定はHTMLそのものを壊さず自然な書き方ができる」という点があります。静的なHTMLファイルとしても開けるため、デザイン確認や修正も簡単です。

つまり、th:classは「上書き」、th:classappendは「追加」という考え方を軸に、状況に合わせて使い分けるのがコツです。これを理解しておくと、実際のSpring MVCアプリケーションでもより柔軟でメンテナンス性の高いコードが書けるようになります。

この章で紹介したテクニックを活用すれば、フォーム、ダッシュボード、メッセージ表示など、さまざまな画面で動的なスタイル切り替えを実現できます。ぜひ自分のプロジェクトでも試してみてください。