Thymeleafのth:attr属性の使い方を完全ガイド！初心者でもわかる動的属性設定

1. th:attr属性とは？

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>

2. th:attr属性の基本的な書き方

2. th:attr属性の基本的な書き方

th:attrは「属性名=値」をテンプレート式で上書きするのが基本です。HTMLタグにth:attrを追加し、左側に置き換えたい属性名、右側に${...}（モデルから値を読む）や@{...}（URLを生成する）を書きます。まずはリンク先を差し替える最小例から始めましょう。

<a th:attr="href=${linkUrl}">リンクはこちら</a>

この書き方では、コントローラから渡されたlinkUrlの値がhrefに入ります。文字列を直接入れたい場合はシングルクォートで囲みます（例：th:attr="title='公式サイト'）。URLをテンプレート側で作りたい場合は@{...}を使います。

<a th:attr="href=@{/home}, title='トップへ戻る'">ホーム</a>

画像やボタンでも考え方は同じです。属性名が変わるだけで、右辺の式は共通です。まずは「固定で書いていた属性を、モデルの値やURL生成で上書きする」感覚をつかみましょう。

<img th:attr="src=${imageUrl}" alt="サムネイル">
<button th:attr="disabled=${isSubmitting}">送信中...</button>

よくあるつまずきは、xmlns:th="http://www.thymeleaf.org"をHTMLの先頭に入れ忘れてテンプレート属性が認識されないケース、式のクォート漏れ、${...}の中の変数名のタイプミスです。まずは小さなタグで置き換えを試し、ブラウザで出力結果（生成された純粋なHTML）を確認すると理解が深まります。

3. 複数の属性を同時に設定する

3. 複数の属性を同時に設定する

th:attrの強みは、1つのタグに対して「複数の属性」をまとめて上書きできることです。画像ならパスと代替テキスト、リンクならURLとタイトル、ボタンなら状態と識別子というように、関連する属性を一括で指定すると見通しが良くなり、書き漏れも防げます。書き方はカンマで区切るだけなので、初心者の方でもすぐ使えます。

<img th:attr="src=${imageUrl}, alt=${imageDescription}">

この例では、画像のsrcとaltを同時に置き換えています。altは画面読み上げや画像非表示時の説明に使われるため、テキストとセットで指定しておくと親切です。複数指定は「左に属性名、右に式」を並べるだけで、順番は自由です。

<a th:attr="href=@{/detail/{id}(id=${itemId})}, title=${itemTitle}, target=${openNewTab ? '_blank' : '_self'}, rel=${openNewTab ? 'noopener' : 'nofollow'}">詳細を見る</a>

<button th:attr="disabled=${isLoading}, aria-label=${buttonAria}, data-id=${itemId}">購入する</button>

4. 条件によって属性を動的に切り替える

4. 条件によって属性を動的に切り替える

th:attrは、状況によって属性の値を変えたいときにも役立ちます。たとえば、「ログインしていればマイページへ」「ログインしていなければログイン画面へ」というように、ひとつの画面で出し分けをしたい場面はよくあります。

初めて見ると難しそうに感じますが、実際はとてもシンプルです。th:ifを使って表示するタグを切り替え、th:attrでリンク先を指定するだけです。

<a th:if="${isLoggedIn}" th:attr="href=@{/mypage}">マイページへ</a>
<a th:if="${!isLoggedIn}" th:attr="href=@{/login}">ログインして利用する</a>

上の例では、ユーザーがログイン済みなら「マイページへ」のリンクが表示され、ログイン前なら「ログインして利用する」という案内が表示されます。どちらも同じタグですが、表示するかどうかを条件で切り替えていると考えると分かりやすいです。

また、同じボタンでも状態によって属性を変えるケースもあります。処理中は押せないようにしたいときは、disabledを切り替えます。

<button th:attr="disabled=${isProcessing}">送信する</button>

このように、条件とth:attrを組み合わせることで、画面の動きをより自然にできます。特別なロジックを書かなくても、テンプレート側の設定だけで柔軟に制御できる点が魅力です。

5. HTMLの属性とth:attrの優先順位

5. HTMLの属性とth:attrの優先順位

Thymeleafでは、th:attrで設定した値が、元のHTML属性の値よりも優先されます。例えば、href属性に最初から固定値があっても、th:attrで指定した値に置き換わります。元の属性値はテンプレートの見た目だけで、実際の出力結果には影響しないことを覚えておくとよいでしょう。

6. 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と専用属性の違い

7. th:attrと専用属性の違い

Thymeleafには、th:hrefやth:srcなど、特定の属性に特化した専用属性があります。これらはより直感的に属性を置き換えられますが、複数の属性をまとめて設定するときはth:attrが便利です。状況に応じて使い分けるのがポイントです。

8. th:attrの書き方のコツ

8. th:attrの書き方のコツ

複数の属性を設定する場合、カンマの前後にスペースを入れると読みやすくなります。また、動的に設定する値は${...}で囲み、パスを生成するときは@{...}を使うなど、Thymeleafの構文ルールを守りながら書くのが大切です。

9. 実際にブラウザでの出力結果を確認してみよう

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. まとめ

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に関するキーワードやポイントを網羅的に解説しましたので、ぜひ実際にテンプレートを作りながら試してみてくださいね！

この記事を読んだ人からの質問

この記事を読んだ人からの質問

プログラミング初心者からのよくある疑問／質問を解決します

Thymeleafのth:attr属性とは何ですか？基本的な使い方を教えてください。

Thymeleafのth:attr属性とは、HTMLのhrefやsrc、altなどの属性をサーバーサイドの変数で動的に置き換えるための仕組みです。リンク先や画像URLなどを柔軟に設定でき、初心者にも扱いやすい便利なテンプレートエンジン機能です。

th:attrを使うときの構文ルールや書き方に注意点はありますか？

はい、属性名と値のペアはカンマで区切り、値には${}や@{}などThymeleafの記法を使います。スペースを入れると可読性が上がり、構文エラーも防げます。

th:attrを使って複数の属性を一度に設定するにはどうすればいいですか？

複数属性を設定したい場合は、カンマで区切って書きます。たとえば「th:attr="src=${imageUrl}, alt=${imageAlt}"」のように記述することで、画像のsrcとalt属性を一度に動的に指定できます。

th:attrで設定された値とHTMLで直接書いた属性値の優先順位はどちらが上ですか？

th:attrで指定された値が優先され、HTMLに直接記述した属性値は無視されます。実際のブラウザ出力ではth:attrの内容が反映されます。

th:attrとth:href、th:srcなどの専用属性との違いは何ですか？

th:hrefやth:srcなどは特定の属性専用で、直感的に書けるのが特徴です。一方、th:attrは複数属性をまとめて指定できるので、柔軟性と効率性に優れています。

条件によってリンク先や画像を切り替えたいときにth:attrは使えますか？

はい、th:ifやth:unlessなどの条件式と組み合わせることで、ログイン状態などに応じて動的に属性を切り替えることができます。