Thymeleafのth:classappend属性の使い方を完全ガイド！初心者でもわかる動的クラス追加
生徒
「Thymeleafで既存のclass属性に動的にクラスを追加する方法ってありますか？」
先生
「はい、Thymeleafのth:classappend属性を使うと、既存のclass属性に動的にクラスを追加できます。」
生徒
「具体的にはどのように使うんですか？」
先生
「それでは、基本的な使い方から活用例まで、詳しく解説していきましょう！」
1. th:classappend属性とは？
Thymeleafのth:classappend属性は、すでに書かれているclass属性に「あとからクラスを足す」ための仕組みです。
もともと設定されたクラスを消さずに、必要なクラスだけを追加できるため、デザインを切り替えたい時にとても便利です。
たとえば、「今だけ色を変えたい」「この条件のときだけ目立たせたい」という場面でよく使われます。
プログラミングが初めての方でもイメージしやすいように、簡単な例を見てみましょう。
下のコードでは、isActiveという値がtrueなら、メニューにactiveというクラスを追加します。
もしfalseであれば、何も追加しません。
<!-- isActive が true のときだけ active を追加 -->
<div class="menu-item" th:classappend="${isActive} ? ' active' : ''">メニュー</div>
実際の出力は以下のように変化します。 このように、同じHTMLでも状況に応じて見た目を変えることができます。
<!-- isActive が true の場合 -->
<div class="menu-item active">メニュー</div>
<!-- isActive が false の場合 -->
<div class="menu-item">メニュー</div>
ただ「クラスを足す」だけなのですが、使える場面は多く、特にUIを切り替える処理で活躍します。
HTMLの構造を変えずに、見た目だけ柔軟に変えられることが、th:classappendの大きな強みです。
2. th:classappend属性の基本的な使い方
基本的な使い方は、HTML要素にth:classappend属性を追加し、条件に応じて追加するクラスを指定します。以下の例では、isActiveがtrueの場合にactiveクラスを追加しています。
<div class="menu-item" th:classappend="${isActive} ? ' active' : ''">メニュー</div>
このコードを実行すると、isActiveがtrueの場合、以下のようにactiveクラスが追加されます。
<div class="menu-item active">メニュー</div>
3. th:classappend属性を使用したループ処理でのクラスの追加
th:classappend属性は、ループ処理で交互にクラスを適用する際にも活用できます。以下の例では、itemsリストをループし、奇数行にoddrowクラス、偶数行にevenrowクラスを追加しています。
<table>
<tr th:each="item, status : ${items}" class="datarow" th:classappend="${status.odd} ? ' oddrow' : ' evenrow'">
<td th:text="${item.name}">商品名</td>
<td th:text="${item.price}">価格</td>
</tr>
</table>
このようにすることで、テーブルの行に交互に異なるクラスを適用できます。
4. th:classappend属性とth:class属性の違い
th:class属性は、既存のclass属性を上書きするのに対し、th:classappend属性は既存のクラスを保持しつつ、新たなクラスを追加します。以下の例を比較してみましょう。
<!-- th:classを使用 -->
<div class="base" th:class="${isError} ? 'error' : 'success'">メッセージ</div>
<!-- th:classappendを使用 -->
<div class="base" th:classappend="${isError} ? ' error' : ' success'">メッセージ</div>
th:classを使用すると、class="base"が上書きされ、errorまたはsuccessのみになります。一方、th:classappendを使用すると、class="base error"やclass="base success"のように、既存のクラスに追加されます。
5. th:classappend属性の活用例：ナビゲーションメニューの現在ページ表示
ナビゲーションメニューで、現在のページを示すためにactiveクラスを追加する例です。以下のコードでは、currentPageとpage.nameを比較し、一致する場合にactiveクラスを追加しています。
<ul>
<li th:each="page : ${pages}" class="nav-item" th:classappend="${page.name == currentPage} ? ' active' : ''">
<a th:href="@{${page.url}}" th:text="${page.name}">ページ名</a>
</li>
</ul>
このようにすることで、現在のページにactiveクラスが追加され、視覚的に強調できます。
6. th:classappend属性の注意点
th:classappend属性を使用する際には、以下の点に注意してください。
- 追加するクラスの前にスペースを含めることで、既存のクラスと区切ることができます。
- 条件式を使用する場合、
nullや空文字列を返すことで、不要なクラスの追加を防ぐことができます。 - 複数のクラスを追加する場合は、スペースで区切って指定します。
7. th:classappend属性とth:attrappend属性の違い
th:classappend属性は、class属性専用の追加属性であり、既存のクラスに自動的にスペースを挟んで新たなクラスを追加します。一方、th:attrappend属性は、任意の属性に対して値を追加する汎用的な属性であり、スペースは自動的に挿入されません。そのため、th:attrappendを使用する場合は、手動でスペースを追加する必要があります。
<!-- th:classappendを使用 -->
<p class="content" th:classappend="extra">コンテンツ</p>
<!-- th:attrappendを使用 -->
<p class="content" th:attrappend="class=' extra'">コンテンツ</p>
上記の例では、どちらもclass="content extra"となりますが、th:attrappendを使用する場合は、スペースを明示的に追加する必要があります。
8. th:classappend属性の活用による柔軟なテンプレート設計
th:classappend属性を活用することで、テンプレートの柔軟性が向上し、再利用性の高いコードを実現できます。特に、動的なスタイルやクラスの追加が求められる場面で効果的です。適切に使用することで、保守性の高いテンプレートを構築できます。
まとめ
本記事では、Thymeleafのth:classappend属性の使い方を中心に、動的にクラスを追加する方法や実用的な活用例、注意点について詳しく解説しました。th:classappendを使うことで、既存のclass属性を維持したまま、条件に応じて新たなクラスを追加できるため、テンプレートの柔軟性と再利用性が格段に向上します。
たとえば、ナビゲーションメニューにおいて現在のページを視覚的に示したり、テーブルの行に交互に異なるクラスを適用したりする場面では、th:classappendは非常に有効です。また、クラスの追加にはスペースの扱いに注意しながら、条件式を使ってクリーンなテンプレート設計を心がけることが大切です。
さらに、th:classappendとth:classの違いや、汎用的なth:attrappendとの使い分けを理解することで、より高度で柔軟な表示制御が可能になります。こうした知識を活かせば、Thymeleafを用いたWeb開発の場面で、よりメンテナンス性と可読性の高いコードが書けるようになるでしょう。
以下は、th:classappendの活用例として、条件付きで複数のクラスを追加するサンプルコードです。
<div class="card-item" th:classappend="${item.selected} ? ' selected highlight' : ''">
<p th:text="${item.name}">商品名</p>
</div>
この例では、item.selectedがtrueであれば、selectedとhighlightの2つのクラスがclass="card-item"に追加され、視覚的な強調が可能になります。
このように、th:classappendを適切に活用することで、見た目の制御がしやすく、動的なWebアプリケーションの表現力を高めることができます。
生徒
「先生、今日はth:classappendについて色々学びましたけど、これっていつ使うのがベストなんですか？」
先生
「とても良い質問ですね。たとえば、条件によって見た目を切り替えたいときや、ループ処理で交互にクラスを適用したいときがまさに使いどころです。たとえば、メニューのアクティブ状態や、リストのハイライト表示などです。」
生徒
「なるほど。th:classとの違いもはっきりしていて、使い分けが重要なんですね。」
先生
「その通りです。th:classは完全に上書き、th:classappendは追加。目的に応じて正しく使い分けられるようになれば、テンプレートエンジンとしてのThymeleafの力を最大限に活かせますよ。」
生徒
「これで見た目の制御がもっと柔軟にできそうです！早速プロジェクトに取り入れてみます！」
先生
「ぜひ実践してみてくださいね。理解を深める一番の方法は、実際にコードを書くことです。」
この記事を読んだ人からの質問
