その記号、なんの意味があるの？
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>
コントローラーから渡すオブジェクトのイメージをつかもう
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}" />
</form>
◯正しい使い方：
<form th:object="${userForm}">
<input th:field="*{username}" />
</form>
記号の使い分けをマスターしよう
-
${…}：変数参照 → コントローラから渡されたモデルデータを参照
-
@{…}：URL生成 → パスやパラメータ付きURLを安全に生成
-
*{…}：フォーム入力用 → th:object にバインドしたオブジェクトのプロパティ参照
次のステップは？
「記号の使い分け」はThymeleafの第一歩です。次は以下のテーマにも挑戦してみましょう！
【外部リンク】
Spring Framework公式ガイド – Spring MVC
Thymeleafのチュートリアル – Spring公式
【内部リンク】
Thymeleafの「th:field」とは何か
Spring Bootアプリ開発で頻発するWhitelabel Error Page｜Thymeleafのテンプレートエラーと対策まとめ
って感じで書いてたら結構濃くなったよ。 
～前編/東京支社のこれまで～ 
【ゲームの日】にブース出展
