Thymeleafで@（アットマーク）をつけるのはパスを指定する時？

こんにちは。ゆうせいです。
Thymeleafを使っていると、以下のように @（アットマーク）を使うことがありますよね。

<a th:href="@{/home}">Home</a>
<img th:src="@{/images/logo.png}" />

✅ 「Thymeleafの @ は何を意味するの？」
✅ 「パスを指定するときだけ @ を使うの？」
✅ 「@ を使わない場合とどう違うの？」

結論：
「@ はURLやパスを指定するときに使う」 ですが、
「HTMLの属性（th:href や th:src など）でのみ有効」 です。

1. @（アットマーク）の意味

Thymeleafでは、@（アットマーク）は 「コンテキストパス（アプリのルート）からの相対パスを生成する」 ために使います。

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. まとめ

結論

🚀 Thymeleafの @ は「パス（URL）を指定するとき」に使う！
🚀 th:href th:src th:action などの「HTMLの属性」にのみ使える！
🚀 th:text などでは @ を使わず、${} を使う！

このルールを覚えて、Thymeleafのテンプレートをより効果的に使いましょう！

セイ・コンサルティング・グループの新人エンジニア研修のメニューへのリンク

投稿者プロフィール

山崎講師代表取締役

セイ・コンサルティング・グループ株式会社代表取締役。
岐阜県出身。
2000年創業、2004年会社設立。
IT企業向け人材育成研修歴業界歴20年以上。
すべての無駄を省いた費用対効果の高い「筋肉質」な研修を提供します！
この記事に間違い等ありましたらぜひお知らせください。

最新の投稿

• 山崎講師2025年11月2日Pythonの「なるほど！」と思えるユニークな機能④
• 山崎講師2025年11月2日Pythonの「なるほど！」と思えるユニークな機能③
• 山崎講師2025年11月2日Pythonの「なるほど！」と思えるユニークな機能②
• 山崎講師2025年11月2日Pythonの「なるほど！」と思えるユニークな機能①