その記号、なんの意味があるの？
Spring BootでWebアプリを作っていると、HTMLに見慣れないこんな記述が出てきませんか？
<p th:text="${user.name}">名前</p>
<img th:src="@{/images/logo.png}" />
<option th:value="*{id}">...</option>「これ、なんか記号多すぎない……？」
初心者ならずとも、$ や @、* など、Thymeleaf特有の記号の意味や使い分けに悩んだ経験、ありませんか？
この記事では、以下のような疑問にお答えします：
-
th:text=”${…}”の $ の意味は？
-
@{/…} と /… の違いは？
-
*{…} と ${…} の違いって？
Thymeleafの記号の意味と正しい使い方を、具体例と図解で徹底的に解説していきます！
Thymeleafの「記号たち」をひとつずつ解説
Thymeleafの記号の役割は、以下の3つが基本です。
-
「$」：変数参照（スコープ内）
-
「@」：URLリンクの解決
-
「*」：フォームバインディング時の変数参照
1. ${…}：変数を参照するための記号
もっともよく使うのがこれです。
<p th:text="${user.name}">名前</p>これは、コントローラから渡されたモデル属性（Model）を参照しています。
例：コントローラー側
@GetMapping("/profile")
public String profile(Model model) {
model.addAttribute("user", new User("田中 太郎"));
return "profile";
}例：Thymeleaf側
<p th:text="${user.name}">名前</p>この場合、${user.name} は User オブジェクトの name フィールドを参照します。
2. @{…}：URLを生成する記号
ThymeleafはSpring MVCと連携して、アプリケーションコンテキスト付きのURLを自動で生成できます。
<a th:href="@{/users}">ユーザー一覧</a>変数付きURLの例
<a th:href="@{/user/{id}(id=${user.id})}">詳細を見る</a>出力されるURL例
3. *{…}：フォームとバインディングされた変数参照
これは主にフォーム入力とバインドする際に使います。
<input type="text" th:field="*{username}" />背景：フォームでバインドされた変数はどこに？
@GetMapping("/register")
public String form(Model model) {
model.addAttribute("userForm", new UserForm());
return "register";
}<form th:object="${userForm}">
<input type="text" th:field="*{username}" />
</form>th:objectの本質：「参照元オブジェクトを切り替える」
th:object は、指定されたタグ配下における参照元オブジェクトを変更するための属性です。
<form th:object="${userForm}">
<input type="text" th:field="*{username}" />
<input type="email" th:field="*{email}" />
</form>-
*{username} → userForm.getUsername()
-
*{email} → userForm.getEmail()
コントローラーから渡すオブジェクトのイメージをつかもう
public class UserForm {
private String username;
private String email;
public String getUsername() { return username; }
public void setUsername(String username) { this.username = username; }
public String getEmail() { return email; }
public void setEmail(String email) { this.email = email; }
}使い分けで迷ったら？よくあるミスと対処法
「*{}と${}のどっちを使えばいいの？」
-
通常の変数参照 → ${} を使う
-
フォームにバインドされている場合 → *{} を使う
before / after でチェック！
×間違った使い方：
<form th:object="${userForm}">
<input th:field="${username}" /> <!-- NG! -->
</form>◯正しい使い方：
<form th:object="${userForm}">
<input th:field="*{username}" />
</form>記号の使い分けをマスターしよう
-
${…}：変数参照 → コントローラから渡されたモデルデータを参照
-
@{…}：URL生成 → パスやパラメータ付きURLを安全に生成
-
*{…}：フォーム入力用 → th:object にバインドしたオブジェクトのプロパティ参照
次のステップは？
「記号の使い分け」はThymeleafの第一歩です。次は以下のテーマにも挑戦してみましょう！
-
th:each を使った繰り返し処理の書き方
-
th:if や th:switch を使った条件分岐
-
入力バリデーションの実装とエラーメッセージ表示
【外部リンク】
Spring Framework公式ガイド – Spring MVC
【内部リンク】
Spring Bootアプリ開発で頻発するWhitelabel Error Page｜Thymeleafのテンプレートエラーと対策まとめ
