Thymeleafで@（アットマーク）をつけるのはパスを指定する時？
山崎講師こんにちは。ゆうせいです。
Thymeleafを使っていると、以下のように @（アットマーク）を使うことがありますよね。
<a th:href="@{/home}">Home</a>
<img th:src="@{/images/logo.png}" />
✅ 「Thymeleafの @ は何を意味するの？」
✅ 「パスを指定するときだけ @ を使うの？」
✅ 「@ を使わない場合とどう違うの？」
結論：
「@ はURLやパスを指定するときに使う」 ですが、
「HTMLの属性（th:href や th:src など）でのみ有効」 です。
1. @（アットマーク）の意味
Thymeleafでは、@（アットマーク）は 「コンテキストパス（アプリのルート）からの相対パスを生成する」 ために使います。
| 記述 | 説明 |
|---|---|
@{/home} | http://localhost:8080/home に変換 |
@{/images/logo.png} | http://localhost:8080/images/logo.png に変換 |
2. @ を使うのはURLやパスを指定するとき
✅ th:href に @ を使う（リンク）
<a th:href="@{/home}">Home</a>
🔹 変換後（例）：
<a href="http://localhost:8080/home">Home</a>
✅ th:src に @ を使う（画像やスクリプト）
<img th:src="@{/images/logo.png}" />
🔹 変換後（例）：
<img src="http://localhost:8080/images/logo.png" />
✅ th:action に @ を使う（フォームの送信先）
<form th:action="@{/login}" method="post">
<input type="text" name="username" />
<button type="submit">ログイン</button>
</form>
🔹 変換後（例）：
<form action="http://localhost:8080/login" method="post">
3. @ を使わない場合との違い
❌ @ を使わない場合（単なる文字列）
<a th:href="/home">Home</a>
この場合、Thymeleafは単なる文字列 /home として扱うため、相対パスの問題が発生する 可能性があります。
✅ @ を使った場合（正しく変換）
<a th:href="@{/home}">Home</a>
コンテキストパス（http://localhost:8080 など）を考慮してURLを生成する ため、正しくリンクが動作します。
4. @ を使えないケース
@ は HTML属性（th:href や th:src など） の中でのみ使えます。
通常の th:text などでは @ を使う必要はありません。
❌ th:text で @ を使うのは間違い
<p th:text="@{/home}"></p> <!-- これはエラー！ -->
🚫 エラーになるか、意図した動作をしない！
✅ th:text では変数をそのまま使う
<p th:text="${message}"></p>
th:text では @ を使わず、${} のみで変数を埋め込む！
5. まとめ
| 記述 | 使い方 | 例 |
|---|---|---|
th:href="@{...}" | リンクのURLを指定 | <a th:href="@{/home}"> |
th:src="@{...}" | 画像のパスを指定 | <img th:src="@{/images/logo.png}"> |
th:action="@{...}" | フォームの送信先を指定 | <form th:action="@{/login}"> |
th:text="${...}" | 文字を埋め込む（@は不要） | <p th:text="${message}"> |
結論
🚀 Thymeleafの @ は「パス（URL）を指定するとき」に使う！
🚀 th:href th:src th:action などの「HTMLの属性」にのみ使える！
🚀 th:text などでは @ を使わず、${} を使う！
このルールを覚えて、Thymeleafのテンプレートをより効果的に使いましょう！
セイ・コンサルティング・グループの新人エンジニア研修のメニューへのリンク
投稿者プロフィール
- 代表取締役
-
セイ・コンサルティング・グループ株式会社代表取締役。
岐阜県出身。
2000年創業、2004年会社設立。
IT企業向け人材育成研修歴業界歴20年以上。
すべての無駄を省いた費用対効果の高い「筋肉質」な研修を提供します！
この記事に間違い等ありましたらぜひお知らせください。
