先生と生徒の会話形式で理解しよう

生徒

「Thymeleafで既存のHTML属性に動的に値を追加する方法ってありますか？」

先生

「はい、Thymeleafのth:attrappend属性を使うと、既存の属性値に動的な値を追加できます。」

生徒

「具体的にはどのように使うんですか？」

先生

「それでは、基本的な使い方から活用例まで、詳しく解説していきましょう！」

1. th:attrappend属性とは？

Thymeleafのth:attrappend属性は、既存のHTML属性に対して動的な値を追加（追記）するための属性です。例えば、既に設定されているclass属性に新たなクラス名を追加したり、style属性にスタイルを追加する際に使用します。これにより、元の属性値を保持しつつ、新たな値を動的に追加できます。

2. th:attrappend属性の基本的な使い方

基本的な使い方は、HTMLタグにth:attrappend属性を追加し、設定したい属性名と追加する値を指定します。以下の例では、既存のclass属性にbtn-primaryというクラスを追加しています。


<button class="btn" th:attrappend="class=' btn-primary'">クリック</button>

このコードを実行すると、以下のようにclass属性にbtn-primaryが追加されます。


<button class="btn btn-primary">クリック</button>

3. 複数の属性に同時に値を追加する

th:attrappendを使うと、複数の属性に対して同時に値を追加できます。以下の例では、class属性とstyle属性にそれぞれ値を追加しています。


<div class="box" style="color: black;" th:attrappend="class=' highlight', style=' background-color: yellow;'">内容</div>

このコードを実行すると、以下のようにclass属性とstyle属性に指定した値が追加されます。


<div class="box highlight" style="color: black; background-color: yellow;">内容</div>

4. 条件によって属性値を動的に追加する

th:attrappendは、条件によって属性値を動的に追加する際にも便利です。以下の例では、isActiveがtrueの場合にactiveクラスを追加しています。


<li class="menu-item" th:attrappend="class=${isActive} ? ' active' : ''">メニュー</li>

isActiveがtrueの場合、以下のようにactiveクラスが追加されます。


<li class="menu-item active">メニュー</li>

isActiveがfalseの場合、class属性は変更されず、menu-itemのままになります。

5. th:classappendやth:styleappendとの違い

Thymeleafには、特定の属性に対して値を追加する専用の属性も用意されています。例えば、th:classappendはclass属性に、th:styleappendはstyle属性に値を追加するための専用属性です。これらは、th:attrappendよりも簡潔に記述でき、読みやすさが向上します。


<div class="alert" th:classappend="${isError} ? ' alert-danger' : ' alert-success'">メッセージ</div>

この例では、isErrorがtrueの場合にalert-dangerクラスが追加され、falseの場合にalert-successクラスが追加されます。

6. 実際の活用例：ToDoリストの状態表示

実際のアプリケーションでの活用例として、ToDoリストの項目にcompletedクラスを追加するケースを考えます。以下のコードでは、item.completedがtrueの場合にcompletedクラスを追加しています。


<li class="todo-item" th:attrappend="class=${item.completed} ? ' completed' : ''">
    <span th:text="${item.title}">タイトル</span>
</li>

このようにすることで、完了したToDo項目に対してスタイルを適用できます。

7. th:attrappend使用時の注意点

th:attrappendを使用する際には、以下の点に注意してください。

追加する値の前にスペースを含めることで、既存の属性値との間に適切な区切りを設けることができます。
条件式を使用する場合、nullや空文字列を返すことで、不要な値の追加を防ぐことができます。
複数の属性に同時に値を追加する場合、カンマで区切って指定します。

8. th:attrappendとth:attrの使い分け

th:attrは属性値を上書きするのに対し、th:attrappendは既存の属性値に追加するため、用途に応じて使い分けることが重要です。例えば、既存のクラスに新たなクラスを追加したい場合はth:attrappendを使用し、属性値を完全に置き換えたい場合はth:attrを使用します。

9. th:attrappendの活用による柔軟なテンプレート設計

th:attrappendを活用することで、テンプレートの柔軟性が向上し、再利用性の高いコードを実現できます。特に、動的なスタイルやクラスの追加が求められる場面で効果的です。適切に使用することで、保守性の高いテンプレートを構築できます。

まとめ

th:attrappend属性で何ができるようになったか

ここまで、Thymeleafのth:attrappend属性について、基本から実践的な使い方までを確認してきました。 th:attrappendは、すでにHTMLに書かれている属性を消さずに、その後ろへ値を追加できる点が最大の特徴です。静的なHTMLでは難しかった「状態に応じてクラスやスタイルを少しだけ変える」という処理を、テンプレート側だけで自然に表現できるようになります。

特にclass属性との相性がよく、ボタンの見た目切り替え、選択中メニューの強調表示、一覧画面での状態表示など、実際のWebアプリケーションで頻繁に登場する場面にそのまま使えます。既存のclassを上書きしてしまう心配がないため、デザイン用のCSSとロジック用の条件をきれいに分離できるのも大きな利点です。

初心者が押さえておきたい考え方

初心者の方がまず意識したいのは、「th:attrappendは追記専用」という点です。属性を丸ごと置き換えるのではなく、「必要なときだけ少し足す」ための道具だと理解すると、使いどころが見えてきます。たとえば、常に使う基本クラスはHTMLに書き、状態によって変わるクラスだけをth:attrappendで追加する、という形が定番です。

また、追加する値の前に半角スペースを入れるというルールも重要です。このスペースがないと、クラス名が連結されてしまい、意図しない表示崩れにつながります。小さな書き方の違いですが、実務ではよく起こるミスなので、早い段階で意識しておくと安心です。

条件分岐と組み合わせた実用的な書き方

th:attrappendは、条件式と組み合わせることで本領を発揮します。 trueやfalseに応じてクラスを付けたり外したりすることで、画面の状態を分かりやすく表現できます。これはJavaScriptを書かなくても実現できるため、サーバーサイド中心の画面構成でも十分に動的な表現が可能です。

たとえば、エラーがある場合だけ赤色にする、完了したデータだけ見た目を変える、といった処理は、 th:attrappendと三項演算子を組み合わせるだけで実装できます。 if文を大量に書かずに済むため、テンプレート全体の読みやすさも保ちやすくなります。


<!-- エラー状態に応じてクラスを追加する例 -->
<div class="form-group"
     th:attrappend="class=${hasError} ? ' has-error' : ''">
    入力項目
</div>

このように、HTMLの基本構造はそのままに、条件に応じた見た目だけを調整できる点が、 th:attrappendを使ったテンプレート設計の分かりやすさにつながります。

専用属性との使い分けも理解しよう

記事内でも触れた通り、classやstyleだけを追加したい場合は、 th:classappendやth:styleappendといった専用属性を使う方法もあります。記述が短くなり、何をしているかが一目で分かるため、チーム開発では好まれることも多いです。

一方で、複数の属性をまとめて扱いたい場合や、属性名を動的に扱う必要がある場合には、 th:attrappendのほうが柔軟に対応できます。どちらが正解というわけではなく、「読みやすさ」と「柔軟さ」のバランスを考えて選ぶことが大切です。

実務で役立つ活用イメージ

実際の現場では、一覧画面、管理画面、入力フォームなど、状態によって見た目を変えたい場面が数多くあります。そのたびにJavaScriptでDOM操作を書くのではなく、Thymeleafのテンプレートで完結できるのは大きなメリットです。 th:attrappendを使えば、画面の状態がそのままHTMLに反映されるため、デバッグもしやすくなります。

特に、ToDoリストやステータス管理画面のように、「完了」「未完了」「有効」「無効」といった状態が存在する画面では、クラスの付け替えだけで視認性を大きく改善できます。見た目のルールをCSSにまとめておくことで、後からのデザイン変更にも柔軟に対応できます。

先生と生徒の振り返り会話

生徒

「th:attrappendって、最初は難しそうに見えましたが、既存の属性にちょっと足すだけと考えると分かりやすいですね。」

先生

「そうだね。特にclassとの組み合わせはよく使うから、状態によって見た目を変えたいときは真っ先に思い出してほしい。」

生徒

「条件式と一緒に使えば、JavaScriptを書かなくても画面が動的に見えるのが便利だと感じました。」

先生

「その感覚は大事だよ。テンプレートでできることを増やすと、コード全体が整理されて、後から見返したときも理解しやすくなる。」

生徒

「まずはclass追加から使ってみて、慣れたら他の属性にも挑戦してみます。」