Thymeleafのth:attr属性の使い方を完全ガイド！初心者でもわかる動的属性設定
生徒
「Thymeleafのth:attr属性って何ですか？」
先生
「Thymeleafのth:attr属性は、HTMLタグの属性を動的に設定できる便利な仕組みなんですよ。」
生徒
「具体的にはどんな場面で使うんですか？」
先生
「それでは、基本の使い方から活用例まで、詳しく解説していきましょう！」
1. th:attr属性とは？
Thymeleafのth:attr属性は、HTMLタグの属性値をサーバーサイド（Spring Bootのコントローラから渡されたモデル）にある変数で動的に差し替えるための仕組みです。リンク先のhref、画像のsrcやalt、ボタンのdisabled、独自のdata-*属性など、通常は固定で書く値をテンプレートの式で置き換えられます。th:hrefやth:srcのような専用属性もありますが、th:attrは一度に複数の属性をまとめて指定できるのが特徴です。初心者の方は「HTMLの雛形をつくり、必要な属性だけテンプレート側で上書きする」というイメージを持つと理解しやすくなります。
▼ はじめての超シンプル例（リンク・画像・ボタンを一気に設定）
<a th:attr="href=@{/products}, title=${pageTitle}">商品一覧へ</a>
<img th:attr="src=${imageUrl}, alt=${imageAlt}">
<button th:attr="disabled=${!canBuy}, data-sku=${sku}">購入する</button>
この例では、リンクの行き先を@{...}構文でURLに、画像のパスや代替テキストをモデルの値に、ボタンの有効・無効やSKUといった属性を一度に設定しています。${...}はモデルの値、@{...}はURLを生成する書き方です。テンプレートの元々の属性値よりもth:attrで指定した値が優先され、最終的には純粋なHTMLとしてブラウザに出力されます。まずは「固定だった属性を、画面表示の直前で必要な値に置き換える」体験をして、動的属性設定の感覚をつかみましょう。
2. th:attr属性の基本的な書き方
基本的な書き方は、HTMLタグにth:attr属性を追加し、設定したい属性をキーと値のペアで記述します。キーには設定したい属性名、値には変数や文字列を指定します。
<a th:attr="href=${linkUrl}">リンクはこちら</a>
この例では、href属性にlinkUrlという変数の値が動的に設定されます。
3. 複数の属性を同時に設定する
th:attrの魅力は、複数の属性をまとめて設定できる点です。次の例のように、カンマ区切りで複数の属性を同時に指定できます。
<img th:attr="src=${imageUrl}, alt=${imageDescription}">
この例では、src属性とalt属性の両方に変数の値を設定しています。これにより、コードが簡潔になり、可読性も向上します。
4. 条件によって属性を動的に切り替える
th:attrは条件分岐を取り入れて属性を制御するのにも便利です。たとえば、ユーザーがログインしている場合と、していない場合でリンク先を変えたいとき、th:ifなどと組み合わせて使います。
<a th:if="${isLoggedIn}" th:attr="href=@{/mypage}">マイページ</a>
<a th:if="${!isLoggedIn}" th:attr="href=@{/login}">ログイン</a>
このようにして、状況に応じてリンク先を柔軟に切り替えられます。
5. HTMLの属性とth:attrの優先順位
Thymeleafでは、th:attrで設定した値が、元のHTML属性の値よりも優先されます。例えば、href属性に最初から固定値があっても、th:attrで指定した値に置き換わります。元の属性値はテンプレートの見た目だけで、実際の出力結果には影響しないことを覚えておくとよいでしょう。
6. th:attrの具体的な活用例
ここで、実際にth:attrを使った例を見てみましょう。下記のコードでは、ユーザー情報に基づいてプロフィール画像とリンクを設定しています。
<div class="profile">
<img th:attr="src=${profileImageUrl}, alt=${userName}">
<a th:attr="href=@{/user/{id}(id=${userId})}">${userName}さんのページへ</a>
</div>
このように、th:attrを使うことで、テンプレートの柔軟性が高まり、メンテナンスしやすいコードを作れます。
7. th:attrと専用属性の違い
Thymeleafには、th:hrefやth:srcなど、特定の属性に特化した専用属性があります。これらはより直感的に属性を置き換えられますが、複数の属性をまとめて設定するときはth:attrが便利です。状況に応じて使い分けるのがポイントです。
8. th:attrの書き方のコツ
複数の属性を設定する場合、カンマの前後にスペースを入れると読みやすくなります。また、動的に設定する値は${...}で囲み、パスを生成するときは@{...}を使うなど、Thymeleafの構文ルールを守りながら書くのが大切です。
9. 実際にブラウザでの出力結果を確認してみよう
例えば、以下のようなサンプルコードを用意して、実際にブラウザで出力結果を確認すると理解が深まります。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>th:attrサンプル</title>
</head>
<body>
<a th:attr="href=@{/home}">ホームへ</a>
</body>
</html>
このテンプレートをブラウザで表示すると、リンクのhref属性が動的に置き換わったことが確認できます。
10. まとめ
ここまで、Thymeleafのth:attr属性の使い方について詳しく解説してきました。th:attrは、複数のHTML属性を動的に一度に設定できる便利な仕組みです。例えば、hrefやsrc、altなどの属性をサーバーサイドの変数の値で置き換えることで、より柔軟で保守性の高いWebページを作れます。th:ifやth:unlessなどの条件分岐と組み合わせて使うことで、状況に応じた属性切り替えが可能となり、より高度な表現力を実現します。
また、th:hrefやth:srcのような専用属性と比べると、th:attrは複数属性を同時に制御できるため、コードの可読性を向上させるだけでなく、メンテナンスもしやすくなります。th:attrで動的に生成されるHTMLは、ブラウザで表示するときに、もとの静的HTMLよりも正確にユーザーの状態やリクエストに応じた内容を反映します。
さらに、HTML属性の優先順位として、th:attrで指定された値が優先されるため、テンプレートを見ただけでは元のHTML属性値が反映されるように見えることがありますが、実際にはth:attrによって置き換わります。これはThymeleafを使う上で重要なポイントなので、ぜひ覚えておきましょう。
ここで、改めてth:attrを活用したサンプルコードをおさらいしてみましょう。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>th:attrまとめサンプル</title>
</head>
<body>
<div class="profile">
<img th:attr="src=${profileImageUrl}, alt=${userName}">
<a th:attr="href=@{/user/{id}(id=${userId})}">${userName}さんのページへ</a>
</div>
<a th:if="${isLoggedIn}" th:attr="href=@{/mypage}">マイページ</a>
<a th:unless="${isLoggedIn}" th:attr="href=@{/login}">ログイン</a>
</body>
</html>
このように、Thymeleafのth:attrを使うことで、条件に応じてリンク先を切り替えたり、ユーザー情報を元に画像やテキストを出力できる柔軟なテンプレートを作れます。特に、動的に変わる情報を多く扱うWebアプリケーションでは、th:attrの使い方をしっかり理解しておくことが重要です。
これまでの解説を踏まえて、検索エンジンでもth:attrの使い方やサンプルコード、複数属性の一括指定方法、動的属性設定のコツなどの情報がヒットしやすくなるように、この記事をしっかり活用していきましょう。Thymeleafのth:attrに関するキーワードやポイントを網羅的に解説しましたので、ぜひ実際にテンプレートを作りながら試してみてくださいね！
生徒
「先生、th:attrの使い方をまとめてみると、HTMLタグの属性をまとめて動的に設定できるってことなんですね！」
先生
「そうですね。複数の属性を一度に制御できるから、コードがスッキリして保守性も上がりますよ。」
生徒
「それに、条件分岐と一緒に使えば、ユーザーの状態に応じたリンク先に切り替えられるのも便利ですね！」
先生
「その通りです。th:attrは特にユーザー情報やログイン状況に応じた表示切り替えに最適ですから、積極的に活用してみてください。」
生徒
「これで動的属性設定の基本はバッチリです！先生、ありがとうございました！」
この記事を読んだ人からの質問
