Thymeleaf
HTML 属性 対照 表
標準 式 構文 (Standard Expression Syntax)
| キーワード | 説明 | 例 |
|---|---|---|
${...} | 変数 式 (Variable Expression) | ${user.name} |
*{...} | 選択 式 (Selection Expression) | *{name} |
#{...} | メッセージ式 (Message Expression) | #{welcome.message} |
@{...} | リンク式 (Link Expression) | @{/user/profile} |
~{...} | フラグメント式 (Fragment Expression) | ~{header :: menu} |
標準 属性 プロセッサ (Standard Attribute Processors)
| キーワード | 説明 | 例 |
|---|---|---|
th:text | 要素 のテキスト内容 を設定 | <p th:text="${user.name}">Default Name</p> |
th:utext | エスケープなし HTML 内容 を設定 | <div th:utext="${htmlContent}">Default Content</div> |
th:each | コレクションを反復 | <tr th:each="user : ${users}"> |
th:if | 条件 付 き要素 表示 | <div th:if="${not #lists.isEmpty(users)}"> |
th:unless | 条件 付 き要素 非表示 | <div th:unless="${#lists.isEmpty(users)}"> |
th:switch/th:case | 複数 条件 判定 | <div th:switch="${user.role}"><p th:case="'admin'">Admin</p></div> |
th:attr | 任意 の属性 を設定 | <img th:attr="src=@{/images/logo.png},title=${logoTitle}"> |
th:value | 要素 の Value 値 を設定 | <input th:value="${user.name}"> |
th:action | フォーム送信先 を設定 | <form th:action="@{/user/save}"> |
th:href | リンク URL を設定 | <a th:href="@{/user/{id}(id=${user.id})}"> |
th:src | メディアリソースの参照元 を設定 | <img th:src="@{/images/logo.png}"> |
th:with | ローカル変数 を定義 | <div th:with="isAdmin=${user.role == 'admin'}"> |
フォーム処理 属性 (Form Handling Attributes)
| キーワード | 説明 | 例 |
|---|---|---|
th:field | フォームフィールドをバインド | <input type="text" th:field="*{name}"> |
th:errors | フィールドバリデーションエラーを表示 | <span th:errors="*{name}">Name Error</span> |
th:errorclass | エラー発生時 に CSS クラスを追加 | <input th:field="*{name}" th:errorclass="is-invalid"> |
th:selected | 選択 状態 を設定 | <option th:selected="${user.role=='admin'}">Admin</option> |
th:checked | チェック状態 を設定 | <input type="checkbox" th:checked="${user.active}"> |
反復 と条件 属性 (Iteration and Conditional Attributes)
| キーワード | 説明 | 例 |
|---|---|---|
th:each | コレクションを反復 | <tr th:each="user, stat : ${users}"> |
th:if | 条件 表示 | <div th:if="${user.age > 18}"> |
th:unless | 条件 非表示 | <div th:unless="${user.age > 18}"> |
th:switch/th:case | 複数 条件 切替 | <div th:switch="${user.role}"><p th:case="'admin'">Admin</p></div> |
コメントとブロック属性 (Comment and Block Attributes)
| キーワード | 説明 | 例 |
|---|---|---|
th:block | テンプレートフラグメント処理 コンテナ | <th:block th:each="user : ${users}">Content</th:block> |
<!--/* ... */--> | パーサーレベルコメント (レンダリング時 に削除 ) | <!--/* Removed during rendering */--> |
<!--/*/-->…<!--/*/--> | 条件 付 きパーサーブロック | <!--/*/--> Only shown during processing <!--/*/--> |
インライン式 (Inline Expressions)
| キーワード | 説明 | 例 |
|---|---|---|
[[...]] | インラインテキスト | <p>Welcome, [[${user.name}]]!</p> |
[(...)] | エスケープなしインラインテキスト | <div>[(${htmlContent})]</div> |
th:inline="text" | テキスト内 で式 を使用 | <script th:inline="text">var m = '[[${message}]]';</script> |
th:inline="javascript" | JS 内 で式 を使用 | <script th:inline="javascript">var u = [[${user}]];</script> |
th:inline="css" | CSS 内 で式 を使用 | <style th:inline="css">.u { color: [[${color}]]; }</style> |
レイアウト属性 (Layout Dialect Attributes)
| キーワード | 説明 | 例 |
|---|---|---|
layout:decorate | デコレートテンプレートを指定 | <html layout:decorate="~{layouts/default}"> |
layout:fragment | 置換 可能 なフラグメントを定義 | <div layout:fragment="content">Page Content</div> |
layout:insert | フラグメントを挿入 | <div layout:insert="~{fragments/header :: header}"></div> |
layout:replace | フラグメントを置換 | <div layout:replace="~{fragments/footer :: footer}"></div> |
ユーティリティ関数 (Utility Functions)
| カテゴリ | プレフィックス | 例 |
|---|---|---|
| 文字列 | #strings | ${#strings.isEmpty(name)} |
| 数値 | #numbers | ${#numbers.formatDecimal(num, 1, 2)} |
| 日付 | #dates, #calendars, #temporals | ${#dates.format(date, 'yyyy-MM-dd')} |
| コレクション | #lists, #sets, #maps | ${#lists.size(users)} |
| 配列 | #arrays | ${#arrays.length(userArray)} |
実用 ノート (Casual Notes)
データ表示 と処理
th:text: 基本的 なテキスト表示 。th:utext: HTML タグを含 むコンテンツの表示 に使用 。${...}: 変数 式 、Model データにアクセス。*{...}: 選択 式 、長 いオブジェクトパスを簡略化 。
条件 とロジック制御
th:if/th:unless: 条件 に基 づいて要素 を出力 するかを決定 。th:switch/th:case: ステートマシン式 の表示 ロジックに適 する。th:with: 複雑 な式 を簡略化 するローカル変数 を定義 。
コレクション処理
th:each: データを反復 してテーブルやリストを生成 。th:object: オブジェクトコンテキストを設定 。
フォーマットと特殊 処理
#dates: 日付 をフォーマット。#numbers: 金額 、パーセンテージなどの数値 フォーマットを処理 。#strings: 文字列 のトリム、置換 など。
Flying Saucer (PDF 生成 ) 関連 注意事項
- スタイル処理
:
- インラインスタイル (Inline Style) または内部 CSS を使用 してください。Flying Saucer は外部 スタイルシートを処理 できません。
th:styleとth:classは動的 スタイル設定 に使用 できます。
- 改
ページ制御
:
- CSS の
page-break-before,page-break-afterを使用 して PDF の改 ページを制御 。
- CSS の
- 画像
処理
:
th:srcは絶対 パスを使用 するか、パーサーが正 しく識別 できるパスを確認 してください。