今回は変数などによって組み立てられたURLを設定するときに使用するThymeleafの”リンクURL式“について紹介します。
開発環境
・Spring Boot：2.6.2
・Thymeleaf：3.0.14.RELEASE
・Java：1.8
リンクURL式について
まずリンクURL式とは何か、そしてどんなメリットがあるのかを説明します。
リンクURL式は単純式のひとつ
リンクURL式はThymeleafで用意されている“単純式(Simple Expressions)”の一つです。
単純式はhtmlの属性に値やオブジェクトを渡す際に使用する式で、リンクURL式の場合は最初に述べたように「変数などで組み立てたURL」を渡します。
またリンクURL式の他に、下記の単純式が用意されています。
- 変数式(Variable Expressions)
- 選択変数式(Selection Variable Expressions)
- メッセージ式(Message Expressions)
- フラグメント式(Fragment Expressions)
詳細は各記事に記載しています。
使用するThymeleafの独自属性
リンクURL式はThymeleafの独自属性とともに使用します。使用する独自属性の代表例と用途は下記のとおりです。
| 属性 | 用途 |
|---|---|
| th:action | フォーム送信時の送信先を設定 |
| th:href | ハイパーリンク先を設定 |
リンクURL式はThymeleafで用意されている独自の属性を使用するため、xmlネームスペース(xmlns)を設定する必要があります。
<!--/* prefixには"th"がよく使用される */-->
<html xmlns:th="http://www.thymeleaf.org" >リンクURL式のメリット
リンクURL式は、他の単純式よりも簡潔に動的なURLを記載することができます。
変数式だけで組み立てた場合とリンクURL式を用いて組み立てた場合の比較は以下の通りです。
<!--/* fugaには文字列、pageにはページ数が格納されている想定 */-->
<!--/* 変数式のみ使用 */-->
<a th:href="'/hoge/' + ${fuga} + '?page=' + ${page}"></a>
<!--/* リンクURL式を使用 */-->
<a th:href="@{'/hoge/' + ${fuga}(page=${page})}"></a>URLパラメータの記述が簡潔になっていることがわかりますね。
リンクURL式の記載方法
基本
リンクURL式は先頭に“@”をつけて“{}”でURLの情報を囲むことで利用可能です。
<a th:href="@{/index}"></a>単純式を使用したURLの組み立て
URLを変数等で動的に作成する場合、リンクURL式と他の単純式を組み合わせます。
○Java
// modelは「org.springframework.ui.Model」
String pagename = "preferences";
model.addAttribute("pagename", pagename);○メッセージ
# messages.xml
siteurl=https://www.google.co.jp/{0}○html
<!--/* 変数式を使用 */-->
<a th:href="@{'https://www.google.co.jp/' + ${pagename}}"></a>
<!--/* メッセージ式を使用。結果は上記と同じ */-->
<a th:href="@{#{siteurl(${pagename})}}"></a>○出力結果
また単純式で使われる“$”や文字列の結合に用いる“+”が邪魔してURLが見づらいと感じる場合は、リンクURL式の末尾にまとめて記載することもできます。
その場合は末尾に“(変数名=値)”と記載し、値を反映させたい場所に”{変数名}”と記載します。複数使用する場合はカンマ区切りで記載します。
○html
<a th:href="@{'https://www.google.co.jp/' + ${pagename}}"></a>
<!--/* 末尾に単純式を記載。結果は上記と同じ */-->
<a th:href="@{https://www.google.co.jp/{pagename} (pagename=${pagename})}"></a>○出力結果
URLパラメータの付与
URLパラメータをつけたい場合は、“(パラメータ名=パラメータ値)”と記載します。
○Java
// modelは「org.springframework.ui.Model」
model.addAttribute("paramName", "q");
model.addAttribute("paramValue", "thymeleaf");○html
<!--/* 変数式を使用 */-->
<a th:href="@{https://www.google.co.jp/search(q=${paramValue})}"></a>
<!--/* パラメータ名も単純式で記載可能 */-->
<a th:href="@{https://www.google.co.jp/search(${paramName}=${paramValue})}"></a>○出力結果
リンクURL式の中に“{パラメータ名}”のような記述があるとURLパラメータとして認識されないため注意しましょう。
○html
<!--/* URLパラメータとして認識 */-->
<a th:href="@{/index(user=taro,page=1)}"></a>
<!--/* 置換用の変数として認識 */-->
<a th:href="@{/index/{user}(user=taro,page=1)}"></a>○出力結果
まとめ
- リンクURL式は「変数などで組み立てたURL」を渡す単純式で、動的なURLを簡潔に記載したい時に使用する。
- @{…}の形で…にURLを記載する。
- リンクURL式の中で他の単純式を使うことができる。
- 単純式は@{…(変数名=値)}と記載することにより、末尾にまとめて記載可能。変数を複数使用する場合はカンマ区切りで記載する。
- @{…(パラメータ名=パラメータ値)}と記載することでURLパラメータを付与できる。パラメータを複数付与する場合はカンマ区切りで記載する。
アクセス先のURLを組み立てる際にとても便利な式なので、ぜひリンクURL式をマスターしましょう！
コメント