Thymeleafの th: は何の略？
山崎講師こんにちは。ゆうせいです。
Thymeleafを使っていると、th:text や th:if のように th: から始まる属性 をよく見かけますよね。
✅ 「th: って何の略？」
✅ 「なぜ th: を付けるの？」
✅ 「どんな役割があるの？」
結論から言うと、 th: は "Thymeleaf Attribute"（Thymeleafの属性）の略 です。
詳しく解説していきます！
1. th: は Thymeleaf のカスタム属性
Thymeleafは HTMLテンプレートエンジン で、th: を使って動的にデータを埋め込めます。th: は Thymeleafのカスタム属性（Thymeleaf Attribute） を示すプレフィックスです。
<p th:text="${message}">デフォルトのメッセージ</p>
上記のコードは、以下のように変換されます。
<p>こんにちは、Thymeleaf!</p>
📌 ポイント
th:textのth:は Thymeleaf Attribute の略- 通常の HTML に影響を与えない
- Thymeleafの処理が行われない場合、デフォルトのHTML（
デフォルトのメッセージ）が表示される
2. なぜ th: を付けるのか？
Thymeleafでは、通常のHTMLと組み合わせて使う ため、th: を付けることで 通常のHTML属性と区別 できます。
✅ th: なし（静的なHTML）
<p text="Hello">Hello</p>
➡ これは単なるHTML属性で、特に意味はない。
✅ th: あり（Thymeleafの動的処理）
<p th:text="${message}">Hello</p>
➡ message の値が動的に設定される。
📌 th: を付けることで、通常のHTMLと区別できる！
3. th: の主な種類
th: にはいくつかの便利な属性があります。
| 属性 | 説明 | 例 |
|---|---|---|
th:text | 要素のテキストを動的に設定 | <p th:text="${message}"></p> |
th:if / th:unless | 条件付き表示 | <p th:if="${isAdmin}">管理者です</p> |
th:each | ループ処理 | <li th:each="car : ${cars}" th:text="${car.name}"></li> |
th:href | 動的にリンクを設定 | <a th:href="@{/home}">Home</a> |
th:src | 画像のパスを設定 | <img th:src="@{/images/logo.png}" /> |
th:value | フォームの値を設定 | <input type="text" th:value="${username}" /> |
📌 th: を付けることで、HTMLの動的制御が可能！
4. th: を省略できる？
実は、Thymeleaf 3.0 以降では th: を省略 できます！
✅ th: あり
<p th:text="${message}"></p>
✅ th: なし（省略形）
<p text="${message}"></p>
📌 省略しても動作するが、推奨されない
- HTML属性と衝突する可能性がある
- コードの可読性が下がる
➡ 通常はth:を付けるのがベスト
5. まとめ
✅ th: は "Thymeleaf Attribute"（Thymeleafの属性）の略
✅ 通常のHTML属性と区別するために使われる
✅ th:text や th:if などで、動的なHTMLを生成できる
✅ Thymeleaf 3.0 以降では省略できるが、th: を付けるのが推奨される
🚀 Thymeleafを使うと、HTMLをそのまま活かしながら動的なページを作れる！th: を活用して、柔軟なテンプレートエンジンを最大限に活かしましょう！
セイ・コンサルティング・グループの新人エンジニア研修のメニューへのリンク
投稿者プロフィール
