【Spring Boot×Thymeleaf】th:属性の仕組みと注意点をやさしく解説！
山崎講師
こんにちは。ゆうせいです。
HTMLテンプレートエンジン「Thymeleaf（タイムリーフ）」を使っていると、th:actionやth:href、th:valueといった「th:○○」という属性をよく見かけますよね。でも、正直「どう違うの？」「いつ、どう使えばいいの？」と思ったこと、ありませんか？
今回は、そんな疑問にお答えしながら、以下の点を丁寧に解説していきます！
th:actionとth:hrefの違いとは？
HTMLのactionとhrefの基本をおさらい
まずは基本のHTML属性から確認してみましょう。
| 属性名 | 意味・用途 | 例 |
|---|---|---|
action | フォームの送信先URL | <form action="/submit"> |
href | リンク先のURL | <a href="/page">リンク</a> |
つまり、どちらも「URLを指定する」という点は共通していますが、
action→<form>タグ用（データを送信）href→<a>タグ用（ページに移動）
という違いがあります。
それをThymeleafで使うとどうなる？
Thymeleafでは、HTMLの属性を動的に扱えるようにするため、th:で始まる属性を使います。
th:action→formの送信先を動的に指定th:href→aタグのリンク先を動的に指定
例：
<form th:action="@{/submit}" method="post">
<a th:href="@{/page}">ページへ</a>@{}という構文は、Spring Bootのルーティングに対応して、URLを生成する仕組みです。@{/xxx}と書くと/xxxというURLが自動で入ります。
th:valueなど他のHTML属性にも「th:」は使えるの？
はい、基本的にHTML属性の多くに対してth:を付けて動的に指定することが可能です！
| HTML属性 | 対応するThymeleaf属性 |
|---|---|
value | th:value |
src | th:src |
alt | th:alt |
placeholder | th:placeholder |
class | th:class |
style | th:style |
このように、よく使うHTML属性はだいたいth:をつければOKです。
th:valueを<button>タグに使ったのに動かなかった理由とは？
ここがよくある落とし穴です！
実は…<button>にはvalue属性は効きません（基本的に）
HTMLの<button>タグは、表示するテキストをタグの中に直接書くのが基本です。
<button type="submit">送信</button>
なので、以下のように書いても表示されません：
<button th:value="'送信'"></button> ← 表示されない
正しい書き方はこれ！
<button type="submit" th:text="'送信'"></button>
つまり、ボタンのラベル（中身の文字）を変えたいときは、th:valueではなくth:textを使いましょう。
よくあるth属性の使い方まとめ
| 目的 | 書き方 | 説明 |
|---|---|---|
| リンクを動的に | th:href="@{/path}" | aタグ用 |
| フォーム送信先 | th:action="@{/submit}" | formタグ用 |
| 入力値を表示 | th:value="${value}" | inputやhiddenなど |
| ボタンの文字 | th:text="'送信'" | buttonタグの中身 |
| 画像の切り替え | th:src="@{/img/logo.png}" | imgタグ |
今後の学習の指針
今後は次の点を意識してThymeleafを使ってみましょう！
- 各HTMLタグにどんな属性が使えるかを把握する
th:valueとth:textの使い分けを意識する@{}構文で動的にURLを作るクセをつける
さらに学びたい方は、「Thymeleafの公式ドキュメント」や「Spring BootのForm処理」などもチェックしてみると理解が深まりますよ！
分からないことがあれば、またどんどん質問してくださいね。
セイ・コンサルティング・グループの新人エンジニア研修のメニューへのリンク
投稿者プロフィール
- 代表取締役
-
セイ・コンサルティング・グループ株式会社代表取締役。
岐阜県出身。
2000年創業、2004年会社設立。
IT企業向け人材育成研修歴業界歴20年以上。
すべての無駄を省いた費用対効果の高い「筋肉質」な研修を提供します！
この記事に間違い等ありましたらぜひお知らせください。
最新の投稿
山崎講師2025年6月7日参照型の配列とNullPointerException- 山崎講師2025年6月7日Javaでchar型は実は整数！？文字コードの正体に迫る！
- 山崎講師2025年6月7日Javaのエスケープシーケンスをマスターしよう！表示のズレに困ったらこれ！
- 山崎講師2025年6月7日Javaの「文字」と「文字列」の違いをやさしく解説！混同に注意！
