Thymeleafのth:hrefの使い方を全解説。初心者でも完璧に理解できるガイド

3. 変数やパラメータの流入方法

3. 変数やパラメータの流入方法

th:hrefでは、URLの一部をプレースホルダ（{...}）として書き、 右側の丸かっこで実データを対応付けるだけで、リンク先を動的に作れます。難しく考えず、 「左で型紙を作って、右で値をはめ込む」と覚えるとスッと入ります。

<!-- 基本：1つのIDをURLに流し込む -->
<a th:href="@{/user/{id}(id=${user.id})}">ユーザページ</a>

上記は、/user/{id}の{id}に${user.id}を入れて 最終的に/user/123のようなリンクを作ります。丸かっこの中は 「URL側の名前 = テンプレートの値」という並びで書きます。

<!-- 複数のプレースホルダを同時に埋める例 -->
<a th:href="@{/users/{uid}/orders/{oid}(uid=${user.id}, oid=${order.id})}">
  注文詳細へ
</a>

複数あっても手順は同じです。左の{uid}・{oid}に、 右側でそれぞれ${user.id}・${order.id}を対応付けます。 値は画面表示前に自動で差し込まれるため、文字連結のミスやスラッシュ抜けを避けられます。

<!-- 固定パスと動的部分の混在（読み物系のスラッグなど） -->
<a th:href="@{/articles/{slug}(slug=${post.slug})}">この記事を読む</a>

文字列でも同じ要領でOKです。プレースホルダはURLの一部を安全に置き換える仕組みなので、 まずは「IDやスラッグをはめ込む」用途から使ってみましょう。なお、値が用意できない場合は リンクが成立しないため、値がある前提の場面で使うのが基本です。

5. クエリパラメータ付きURLの生成（検索・一覧で必須のパターン）

5. クエリパラメータ付きURLの生成（検索・一覧で必須のパターン）

クエリパラメータは、URLの末尾に付く?q=...や&page=...の部分です。 th:hrefでは@{...}の丸かっこの中に「キー=値」を並べるだけでOK。 文字エンコードや? / &の連結は自動処理されるので、手作業のミスを避けられます。

<!-- 基本：検索語・ページ番号・並び順を付ける -->
<a th:href="@{/search(q=${keyword}, page=${page}, sort=${sort})}">
  検索結果へ
</a>

<!-- よくある絞り込み：カテゴリと在庫フラグ -->
<a th:href="@{/items(category=${category}, inStock=${inStock})}">
  条件で絞り込む
</a>

<!-- 配列（複数選択）もOK：tag=A&tag=B という形で展開 -->
<a th:href="@{/articles(tag=${selectedTags})}">タグで探す</a>

生成例：キーワードが「スマホ」、page=2、sort=priceなら /search?q=%E3%82%B9%E3%83%9E%E3%83%9B&page=2&sort=price のように URLエンコード済みで出力されます。スペースや日本語も自動で安全な文字に変換されます。

6. @を使わずに文字連結で動的リンクを作る（相対/絶対パスのコツ）

6. @を使わずに文字連結で動的リンクを作る（相対/絶対パスのコツ）

学習目的で、@{...}を使わずに文字連結でリンクを作る方法も押さえておきましょう。 文字列補間（|...|）や+演算子でURLを組み立てられますが、 URLエンコードやコンテキストパス付与は自動ではありません。実運用は@{...}推奨、 ここでは仕組み理解のための最小例に絞ります。

<!-- 文字列補間：読みやすい -->
<a th:href="|/user/${user.id}|">ユーザ詳細へ</a>

<!-- + 演算子：慣れている人向け -->
<a th:href="${'/user/' + user.id}">ユーザ詳細へ</a>

<!-- クエリを自力で結合（& は &amp; に） -->
<a th:href="|/search?q=${keyword}&amp;page=${page}|">検索へ</a>

<!-- 絶対URLへ飛ばす例（外部サイト） -->
<a th:href="${'https://example.com/u/' + user.id}" target="_blank" rel="noopener">外部プロフィール</a>

相対/絶対パスのコツ：
・先頭が/なら「サイトルートからの絶対パス」。例：/products/list
・先頭に./や../を付けると「今いる場所からの相対パス」。例：../detail
・外部サイトに飛ばすならhttps://...で完全なURLを書く。

<!-- 相対パスの例：現在 /products/ の時に 1つ上へ -->
<a th:href="'../list'">一覧に戻る</a>

<!-- ルートからの絶対パス -->
<a th:href="'/products/list'">商品一覧</a>

7. 条件付きリンクとアクセシビリティ（内部リンク最適化のベストプラクティス）

7. 条件付きリンクとアクセシビリティ（内部リンク最適化のベストプラクティス）

SEOでは内部リンクの品質が重要です。th:ifやth:unlessを使えば、 データが未設定のときに「クリックできないダミーリンク」を避けられます。ユーザ体験（UX）やアクセシビリティの観点でも有効です。

<!-- user が存在する時だけ実リンク、なければテキスト -->
<a th:if="${user != null}" th:href="@{/user/{id}(id=${user.id})}">ユーザ詳細へ</a>
<span th:unless="${user != null}" aria-disabled="true" class="text-muted">ユーザ詳細へ（未選択）</span>

<!-- 在庫なしならボタン風リンクを無効化（視覚的＋意味的配慮） -->
<a th:href="@{/cart/add(id=${item.id})}"
   th:attrappend="aria-disabled=${!item.inStock}"
   th:classappend="${!item.inStock} ? ' disabled' : ''"
   role="button">カートに入れる</a>

クリック不可状態を明示し、誤クリックや離脱を防止することで、サイト回遊性やコンバージョンの改善にもつながります。

まとめ

まとめ

この記事では、Thymeleafにおけるth:hrefの基本的な使い方から応用的な設定まで解説しました。th:hrefを使うことで、サーバーサイドのデータやパラメータをリンクに組み込むことができ、効率的に動的なURLを生成できます。 初心者でも理解しやすいように、サンプルコードとその実行結果を見ながら説明しました。

具体的には、次のポイントを理解していただけたと思います：

• th:href属性を使うことで、HTMLタグにサーバーサイドのURLやデータを指定できる。
• 変数やパラメータを組み込むことで、動的なURLの生成が可能。
• Thymeleafではコンテキストパスを@{}を使って指定することが推奨されている。

以下に簡単なサンプルコードで復習してみましょう。

<a th:href="@{/product/{id}(id=${product.id})}">商品ページへ</a>

上記のコードでは、動的に商品IDをth:hrefに渡し、URLを生成しています。Thymeleafを活用することで、テンプレートエンジンをより柔軟に使うことが可能です。

この記事を読んだ人からの質問

この記事を読んだ人からの質問

プログラミング初心者からのよくある疑問／質問を解決します

Thymeleafのth:hrefって何ですか？HTMLのhrefとの違いは？

Thymeleafのth:hrefは、Spring Bootなどのサーバーサイドアプリケーションで動的にURLを生成するための属性です。HTMLのhrefは静的なリンクですが、th:hrefは変数やパラメータを使ってURLを動的に作成できます。

Thymeleafでth:hrefを使ったリンクの基本的な書き方が知りたいです。

基本的には、th:href="@{/home}" のように書きます。@記号はアプリケーションのコンテキストパスを含むURLを生成するための記号で、HTMLのaタグと組み合わせて使用します。

th:hrefでURLに変数を渡す方法は？ユーザーIDなどを埋め込みたいです。

URLパスに変数を埋め込むには、@{/user/{id}(id=${user.id})} のように書きます。これは、{id}の部分にuser.idの値を埋め込む仕組みで、REST形式のURL生成に便利です。

th:hrefでクエリパラメータ（?q=〇〇）の書き方がよくわかりません。

クエリパラメータは、@{/search(q=${keyword}, page=${page})} のように指定できます。これにより、安全にURLエンコードされたリンクが生成されます。

th:hrefの中で @ を使う意味は何ですか？必須ですか？

@はThymeleafがコンテキストパス付きのURLを自動生成するために使います。省略することも可能ですが、推奨は@付きです。