😀

SpringBoot × Thymeleaf タグ要素の中に式(値)を入れる方法

2022/04/04に公開

はじめに

今回は、以下のように、親要素とその子要素のテキストをThymeleafの式で実装する方法について解説します。
※以下の記述にすると、親要素(h2タグ)のth:text属性の値しか表示されません。

sample.html

<h2 class="heading-normal" th:text="${hoge}">
  <span th:text="${fuga}"></span>
</h2>

ます、「なぜ、上記のような記法で親要素と子要素のどちらの値も表示できないのか」を解説します。

結論を言うと、「th:text属性を指定すると、その要素の中身身全て（入れ子になっている要素も含む） がth:text属性の値に置き換わるため」です。

それでも親要素と、入れ子になっている子要素に値を渡したい時があります。
そんな時にはThymeleafにあるインライン記法を用いるとすんなり実装できます。

インライン記法というのは、Thymeleafの式をth:**属性ではなく、直接HTMLに式を記述できる記法のことです。

具体的には、以下のような記述のことを指します。

sample.html

<h2 class="heading-normal" th:inline="text">
  [[${hoge}]]
  <span th:text="${fuga}"></span>
</h2>

ポイントとしては、実装に応じて指定した要素にth:inline属性を指定し、その値に"text"を指定します。
そして、HTMLには式を[[${式}]]のように記述するだけです。

それだけで、例えば以下のように普通のテキストと式を併用することが可能です。

sample.html

<h2 class="heading-normal" th:inline="text">
  こんにちは、[[${hoge}]]
  <span th:text="${fuga}"></span>
</h2>

もちろん、式の中でテキストを足すことも可能です。

sample.html

<h2 class="heading-normal" th:inline="text">
  [[${hoge} + 'hello']]
  <span th:text="${fuga}"></span>
</h2>

こうすることで、親要素も子要素もThymeleaf式の値を表示することができます。

ここでは、親要素にth:inline属性、子要素にth:text属性を指定していますが、子要素にもth:inline属性を指定すれば、親要素と子要素どちらでも同じことが可能です。