Thymeleafのth:title属性を完全ガイド！初心者でもわかる動的タイトルの設定方法

1. th:title属性とは？

1. th:title属性とは？

Thymeleafのth:title属性は、HTML要素のtitle属性を動的に設定するために使用されます。例えば、リンクやボタンにマウスを乗せたときに表示されるツールチップの内容を、サーバーサイドのデータに基づいて動的に変更することができます。

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

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

以下は、th:title属性を使用してリンクのツールチップを動的に設定する例です。

<a th:href="@{/user/{id}(id=${user.id})}" th:title="'ユーザー名: ' + ${user.name}">ユーザー詳細</a>

この例では、リンクのtitle属性に「ユーザー名: [ユーザーの名前]」という形式のツールチップが表示されます。

3. th:title属性と国際化（i18n）の連携

3. th:title属性と国際化（i18n）の連携

Thymeleafでは、th:title属性と国際化メッセージを組み合わせて、複数言語に対応したツールチップを表示することができます。

<a th:href="@{/help}" th:title="#{help.link.tooltip}">ヘルプ</a>

この例では、messages.propertiesファイルに定義されたhelp.link.tooltipの値がツールチップとして表示されます。例えば、

help.link.tooltip=このリンクをクリックするとヘルプページが開きます。

と定義されていれば、ツールチップには「このリンクをクリックするとヘルプページが開きます。」と表示されます。

4. th:title属性と条件分岐の組み合わせ

4. th:title属性と条件分岐の組み合わせ

th:title属性では、条件分岐を使用してツールチップの内容を動的に変更することも可能です。

<a th:href="@{/profile}" th:title="${user.isAdmin} ? '管理者プロフィール' : 'ユーザープロフィール'">プロフィール</a>

この例では、user.isAdminがtrueの場合は「管理者プロフィール」、falseの場合は「ユーザープロフィール」というツールチップが表示されます。

5. th:title属性とth:eachの組み合わせ

5. th:title属性とth:eachの組み合わせ

リストを表示する際に、th:eachとth:titleを組み合わせて、各要素に異なるツールチップを設定することができます。

<ul>
    <li th:each="item : ${items}">
        <a th:href="@{/item/{id}(id=${item.id})}" th:title="${item.description}">[[${item.name}]]</a>
    </li>
</ul>

この例では、各アイテムのリンクに、そのアイテムの説明がツールチップとして表示されます。

6. th:title属性の注意点

6. th:title属性の注意点

th:title属性を使用する際の注意点として、以下の点が挙げられます。

• HTMLのtitle属性は、マウスオーバー時に表示されるツールチップとして使用されますが、ユーザーによっては見逃される可能性があるため、重要な情報は他の方法でも表示することが推奨されます。
• アクセシビリティの観点から、title属性だけに情報を依存するのではなく、視覚的にも情報が伝わるように工夫することが望ましいです。

7. th:title属性の応用例

7. th:title属性の応用例

以下は、th:title属性を使用して、ボタンのツールチップを動的に設定する例です。

<button type="submit" th:title="${form.isValid} ? '送信可能' : '入力内容を確認してください'">送信</button>

この例では、フォームの入力内容が有効な場合は「送信可能」、無効な場合は「入力内容を確認してください」というツールチップが表示されます。

まとめ

まとめ

th:titleでできることを振り返ろう

Thymeleafのth:title属性は、リンクやボタンなどに付くタイトル表示を、画面の状態やサーバー側の値に合わせて変えられる仕組みです。画面上では小さな要素に見えますが、入力の補助や操作のヒントとして働くため、ユーザー体験を整える場面で役立ちます。たとえばユーザー名や説明文をそのままツールチップに出したり、権限や状態によって文言を切り替えたりできます。静的なHTMLでは難しい細かな案内を、テンプレートだけで自然に組み込めるのが強みです。

また、title属性はマウスを重ねたときに表示されるため、一覧画面で省略された文字の補足や、ボタンの意味を短く伝えたいときにも向いています。リンク先の内容が想像できるようにしておくと、クリックの迷いが減り、画面全体の使いやすさが上がります。特に会員情報、商品一覧、管理画面の操作ボタンなど、似た要素が並ぶ画面ほど効果が出ます。

基本の書き方とよくある組み合わせ

th:titleの基本は、title属性の値を式で作ることです。文字列を固定で入れるだけでなく、変数をつなげたり、条件で分けたり、国際化メッセージを参照したりできます。初心者の方は、まずは「固定文言と変数を足す」書き方を覚えるとスムーズです。次に、条件で文言を変える形に慣れると、画面の状態に合わせた案内が作りやすくなります。

国際化と組み合わせると、同じテンプレートで言語だけを切り替えられます。ヘルプリンクや操作ボタンの説明は、あとから文言を調整したくなることが多いので、メッセージファイルに寄せておくと保守が楽になります。さらに、th:eachで一覧を出すときは、各要素の説明をtitleに入れるだけで、一覧が読みやすくなるケースも多いです。

サンプルでイメージを固める

最後に、よくある画面を想定した簡単なサンプルをまとめます。ひとつ目は、商品一覧で説明文をツールチップに出す例です。ふたつ目は、フォームの状態によって送信ボタンの案内を変える例です。どちらも「画面の要素は同じでも、説明だけを動的に変える」点がポイントです。

<!-- 商品一覧：アイテムごとに説明文をツールチップへ -->
<ul>
    <li th:each="item : ${items}">
        <a th:href="@{/item/{id}(id=${item.id})}"
           th:title="'説明: ' + ${item.description}">
            [[${item.name}]]
        </a>
    </li>
</ul>

<!-- フォーム：状態に応じてボタンの案内を切り替える -->
<button type="submit"
        th:title="${form.isValid} ? '送信できます' : '入力内容を確認してください'">
    送信
</button>

商品一覧の例では、表示名が短くても、説明をtitleに入れておけば補足ができます。フォームの例では、押せる状態かどうかを言葉で伝えられるため、入力が不足しているときに何をすればいいかが分かりやすくなります。こうした小さな案内は、画面が増えるほど効いてきます。

注意点もまとめて押さえる

title属性は便利ですが、表示に気づかない人もいます。大事な情報は本文やラベルでも伝えつつ、titleは「補助」として使うとバランスが良いです。さらに、スマートフォンではマウス操作がないため、ツールチップが見えにくい場合があります。管理画面やパソコン利用が多い画面では効果が出やすく、一般向け画面では補助に留める、といった使い分けもおすすめです。アクセシビリティの観点でも、titleだけに依存せず、必要なら説明文やアイコンのラベルも合わせて用意すると安心です。

場面別に考えると理解しやすい

実務では、th:titleは次のような場面で自然に登場します。たとえば一覧画面で、名称は短いが説明は長いデータがある場合、画面はすっきり保ちながら補足を渡せます。商品名、記事タイトル、権限名、状態名などは見た目が似やすく、少しの補足があるだけで判断が早くなります。また、ボタンやアイコンが並ぶ画面では、見た目だけで意味が伝わりにくいことがあります。削除、編集、詳細、戻るのような操作は誤操作が怖いので、titleで注意を添えると安心感につながります。

さらに、ログイン中のユーザーや権限によって表示を変える画面でも便利です。管理者だけが使える機能には「管理者向け」などの一言を入れると、一般ユーザーが混乱しにくくなります。逆に、一般ユーザー向けの画面ではtitleだけに情報を寄せすぎないようにし、重要な案内は本文やラベルで見える形にするのがコツです。こうした使い分けを意識すると、th:titleをどこで使うべきか判断しやすくなります。

国際化メッセージと文言設計の考え方

国際化と組み合わせる場合は、メッセージの中に変数を埋め込みたい場面が出てきます。たとえば「ユーザー名」や「商品名」を入れたいときは、固定文言と変数を組み合わせてtitleを作る形が分かりやすいです。文言は短くても意味が通るようにし、「何をすればよいか」が伝わる言葉を選びます。入力フォームなら、ただの否定ではなく、修正の方向が分かる言い方が親切です。

また、同じ言葉を何度も使うなら、メッセージファイルに寄せて統一すると、画面ごとの言い回しのブレが減ります。たとえば「入力内容を確認してください」という文言を、複数のフォームで使い回せば、ユーザーが学習しやすくなります。逆に、画面固有の注意はテンプレート側で明確に書き、共通の文言と混ざらないように整理すると読みやすくなります。

よくあるつまずきと確認方法

初心者がつまずきやすいのは、文字列のつなげ方と、式の引用符の扱いです。Thymeleafでは、文字列をシングルクォートで囲み、変数を式としてつなげます。うまく表示されないときは、まず固定文言だけにして表示を確認し、そのあとで変数を足していくと原因を切り分けやすいです。また、titleは画面上に常に見えないため、ブラウザで要素を選んで属性値を確認するのも良い方法です。

一覧でth:eachと組み合わせている場合は、参照しているプロパティ名が正しいか、値が空になっていないかも確認ポイントです。説明文が空のデータが混ざるなら、空のときだけ別の文言を出す工夫もできます。最初から完璧に作ろうとせず、少しずつ表示を見ながら調整するのが現実的です。

まとめの一言

th:titleは、テンプレートで「伝えたい補足」を自然に足せる道具です。小さな改善に見えても、積み重なると画面の分かりやすさが大きく変わります。まずは一覧リンクや送信ボタンのような分かりやすい場所から取り入れ、使う人の目線で文言を整えていくと、Thymeleafのテンプレート作りがぐっと楽しくなります。