Thymeleaf チートシート

<p th:text="${welcomeMessage}">Welcome!</p>

<div th:utext="${formattedHtml}"><strong>Default</strong> content</div>

<p>ようこそ、[[${username}]] さん！</p>

<p>お知らせ: [(${noticeHtml})]</p>

<div th:if="${user.isAdmin()}" class="notification is-warning">管理者メニュー</div>

<p th:unless="${user.isActive()}" class="has-text-danger">アカウントが無効です。</p>

<div th:switch="${user.role}"> <p th:case="'ADMIN'">管理者権限</p> <p th:case="'MANAGER'">マネージャー権限</p> <p th:case="*">一般ユーザー権限</p>
</div>

<ul> <li th:each="item : ${items}" th:text="${item.name}">Item 1</li>
</ul>

<tr th:each="user, stat : ${users}" th:class="${stat.odd}? 'is-striped' : ''"> <td th:text="${stat.count}">1</td> <td th:text="${user.name}">Username</td>
</tr>

利用可能なプロパティ: index (0始まり), count (1始まり), size, current, even, odd, first, last

<dl th:each="entry : ${settingsMap}"> <dt th:text="${entry.key}">Key</dt> <dd th:text="${entry.value}">Value</dd>
</dl>

<a th:href="@{/users/{id}(id=${user.id})}">ユーザー詳細</a>

<img th:src="@{/images/{name}(name=${product.imageName})}" alt="商品画像" />

<input type="text" th:value="${searchKeyword}" />

<div class="box" th:classappend="${user.isAdmin()} ? 'has-background-warning' : ''">...</div>

<span th:styleappend="${error} ? 'color: red;' : 'color: green;'">メッセージ</span>

<input type="button" value="Do it!" th:attrappend="class=${' ' + cssClass}" />

<button th:attr="data-user-id=${user.id}, data-action='delete'">削除</button>

<input type="checkbox" th:checked="${isActive}" />
<option th:each="c : ${countries}" th:value="${c.code}" th:text="${c.name}" th:selected="${c.code == selectedCountry}">Country</option>
<button type="submit" th:disabled="${form.isProcessing}">送信</button>

<div th:data-item-id="${item.id}" th:data-item-name="${item.name}">...</div>

これは以下と同等です:

<div th:attr="data-item-id=${item.id}, data-item-name=${item.name}">...</div>

<form th:action="@{/users/save}" th:object="${userForm}" method="post"> ...
</form>

<input type="text" th:field="*{name}" />
<!-- 生成例: <input type="text" id="name" name="name" value="..." /> -->
<select th:field="*{country}"> <option th:each="c : ${countries}" th:value="${c.code}" th:text="${c.name}">...</option>
</select>

<span th:if="${#fields.hasErrors('name')}" th:errors="*{name}" class="help is-danger">Name Error</span>
<div th:if="${#fields.hasGlobalErrors()}" class="notification is-danger"> <p th:each="err : ${#fields.globalErrors()}" th:text="${err}">Global error message</p>
</div>

<input type="text" th:field="*{email}" th:errorclass="is-danger" />

<!-- in layout.html -->
<footer th:fragment="copy"> &copy; 2025 Your Company
</footer>

<!-- in page.html -->
<div th:insert="~{layout :: copy}"></div>
<!-- Result: <div><footer>&copy; 2025 Your Company</footer></div> -->

<!-- in page.html -->
<div th:replace="~{layout :: copy}">Placeholder for footer</div>
<!-- Result: <footer>&copy; 2025 Your Company</footer> -->

<!-- in page.html -->
<div th:include="~{layout :: copy}"></div>
<!-- Result: <div>&copy; 2025 Your Company</div> -->

<div th:replace="~{fragments/common :: header}"></div>
<div th:insert="~{this :: menu}"></div> <!-- 同じテンプレート内の'menu'フラグメント -->

<!-- fragment definition (in components.html) -->
<div th:fragment="alert(type, message)" th:classappend="'alert-' + ${type}" role="alert"> [[${message}]]
</div>
<!-- fragment usage -->
<div th:replace="~{components :: alert(type='success', message=${successMsg})}"></div>
<div th:replace="~{components :: alert('warning', '注意してください')}"></div>

<!-- 開発時のみ表示する要素 -->
<div th:remove="${productionMode} ? 'all' : 'none'">開発用情報</div>
<!-- tableのヘッダーやフッターのプレースホルダを削除 -->
<table> <thead> <tr><th>Name</th></tr> </thead> <tbody> <tr th:remove="all-but-first"> <!-- 最初のtr以外を削除 (ループと組み合わせる) --> <td>Placeholder</td> </tr> <tr th:each="p : ${products}"> <td th:text="${p.name}">Product Name</td> </tr> </tbody>
</table>

<p th:text="${user.name}">User Name</p>
<p th:text="${param.query}">Query Param</p>
<p th:text="${session.lastAccessTime}">Session Time</p>

<div th:object="${product}"> <p>商品名: <span th:text="*{name}">...</span></p> <p>価格: <span th:text="*{price}">...</span></p>
</div>

<h1 th:text="#{welcome.title}">Welcome!</h1>
<p th:text="#{user.greet(${user.name})}">Hello User!</p>

<a th:href="@{/home}">ホーム</a>
<a th:href="@{/users/{id}/profile(id=${userId}, tab='details')}">プロファイル</a>
<!-- Result: /myapp/users/123/profile?tab=details -->

サーバー相対URL (@{~/path})、プロトコル相対URL (@{ //... })、絶対URL (@{http://...}) も生成可能です。

<div th:insert="~{commons :: footer}"></div>

<p>こんにちは、 [[${user.name}]] さん！</p>

<p>アナウンス: [(${noticeHtml})]</p>

<body th:inline="text"> ようこそ、[[${user.name}]] さん。
</body>

<script th:inline="javascript"> /*<![CDATA[*/ var username = /*[[${user.name}]]*/ 'Default User'; var user = /*[[${user}]]*/ null; // user オブジェクトは JSON に変換される var url = /*[[@{/api/users/{id}(id=${user.id})}]]*/ '/api/users/0'; if (user && user.active) { console.log('Active user:', username); } /*]]>*/
</script>

/*[[...]]*/ 形式のコメント構文は、静的プロトタイプとしても機能し、JavaScript エラーを防ぎます。/*<![CDATA[*/ ... /*]]>*/ で囲むことで、< や & などの文字をエスケープせずに済みます。

<style th:inline="css"> .highlight { background-color: /*[[${highlightColor}]]*/ yellow; }
</style>

<body th:inline="text"> User: [[${user.name}]] <!-- この部分はインライン処理しない --> <div th:inline="none">[[this is literal]] [(${this too})]</div>
</body>

<!-- This is a standard HTML comment -->

<!--/* Authenticated users only */-->
<div th:if="${isAuthenticated}">...</div>

<!--/*/
<div class="sample-data">This is only for prototyping</div>
/*/-->

<th:block th:each="user : ${users}"> <div>[[${user.name}]]</div> <div>[[${user.email}]]</div>
</th:block>
<th:block th:if="${isAdmin}"> <!-- 管理者向けコンテンツ -->
</th:block>