Thymeleafの基本出力

「Thymeleaf」のテキスト出力や属性値の変更や繰り返しなどの基本的な出力のまとめ。

執筆時バージョン
Java

Java SE 8

前提

コードのサンプルについてはSpring Bootを前提に作られていて、コントローラ側では次のような設定をしているモノとする。

String helloMessage = "こんにちは";
model.addAttribute("helloMessage", helloMessage);

String helloMessageWithTag = "<span>こんにちは</span>";
model.addAttribute("helloMessageWithTag", helloMessageWithTag);

Member ichiro = new Member(1, "一郎");
model.addAttribute("member", ichiro);

List<Member> members = new ArrayList<>();
members.add(ichiro);
members.add(new Member(2, "次郎"));
members.add(new Member(3, "三郎"));
model.addAttribute("members", members);

コメント

「<!--/*」「*/-→」で囲むとThymeleafのコメント。HTMLのコメントはそのまま出力される。

<section>
  <h2>コメント</h2>
  <!--/* Thymeleafのコメントなので出力されない。 */-->
  <!-- HTMLのコメントなのでそのまま出力されます。 -->
</section>
出力 
<section>
  <h2>コメント</h2>

  <!-- HTMLのコメントなのでそのまま出力されます。 -->
</section>

テキストの出力

タグ内のテキストを出力する場合は「th:text」。th:textではエスケープ処理がデフォルトで行われるので、タグなどを直接出力したい場合はth:utextを使う。

<section>
  <h2>テキストの出力</h2>
  <p th:text="${helloMessage}">書き換わるはず</p>
  <p th:text="${helloMessageWithTag}">書き換わるはず</p>
  <p th:utext="${helloMessageWithTag}">書き換わるはず</p>
</section>
出力 
<section>
  <h2>テキストの出力</h2>
  <p>こんにちは</p>
  <p>&lt;span&gt;こんにちは&lt;/span&gt;</p>
  <p><span>こんにちは</span></p>
</section>

属性値の変更

th:hrefなどth:xxxxで属性値を変更できる。th:xxxxに関しては各属性値ごとに用意されていてth:altやth:widthやth:heightなどの通常のよく使う属性値に関してはだいたいある。

定義されていない属性値の設定を行う場合は、th:attr="属性名=値"という書式で指定する。

class属性については全てを書き換えられると不便なのでth:classappendという追加を行うための属性が定義されている。ifなどを絡めて使う。

<section>
  <h2>属性値の変更</h2>
  <a href="./member/ダミー.html" th:href="@{/members/{memberId}(memberId=${member.id})}">メンバーページへのリンク</a>
  <a href="./member/ダミー.html" th:attr="href=@{/members/{memberId}(memberId=${member.id})}">メンバーページへのリンク</a>
  <a class="member-link" href="./member/ダミー.html" th:classappend="${member.id == 1} ? admin">メンバーページへのリンク</a>
</section>
出力 
<section>
  <h2>属性値の変更</h2>
  <a href="/members/1">メンバーページへのリンク</a>
  <a href="/members/1">メンバーページへのリンク</a>
  <a class="member-link admin" href="./member/ダミー.html">メンバーページへのリンク</a>
</section>

繰り返し

「th:each="変数名 : 繰り返す要素"」でそのタグの繰り返しによる出力が行われる。集合についてはIterableや配列が指定可能で、MapもOK（Map.Entryで繰り返される）。

「th:each="変数名,ステータス変数名 : 繰り返す要素"」で、繰り返しに関するプロパティを取得できるようになる。

<section>
  <h2>繰り返し</h2>
  <ul>
    <li th:each="member : ${members}" th:text="${member.name}"></li>
  </ul>
  <ul>
    <li th:each="member,iterStat : ${members}"
		th:text="${iterStat.count} + '番:' + ${member.name}"></li>
  </ul>
</section>
出力 
<section>
  <h2>繰り返し</h2>
  <ul>
    <li>一郎</li>
    <li>次郎</li>
    <li>三郎</li>
  </ul>
  <ul>
    <li>1番:一郎</li>
    <li>2番:次郎</li>
    <li>3番:三郎</li>
  </ul>
</section>
Table 1. th:eachのステータス変数のプロパティ
プロパティ 説明

index

0始まりの現在の「繰り返しインデックス」

count

1始まりの現在の「繰り返しインデックス」

size

被繰り返し変数の全要素数

current

繰り返し中の「繰り返し変数」

even/odd

現在の繰り返し処理が偶数か奇数か

first

現在の繰り返し処理が最初かどうか

last

現在の繰り返し処理が最後かどうか

if

「th:if="評価式や値"」でいわゆるif文のような役割でtrueならそのタグが出力される。

th:ifの属性は真偽値のみではなく値なども評価できるのでif文より幅広い。trueになる場合は次のルール。nullの場合はfalseになる。

  • 値がnullでないかつ次の条件に当てはまる。

    • booleanの true

    • 0以外の数値

    • 0以外の文字

    • “false” でも “off” でも “no” でもない文字列

    • 真偽値でも、数値でも、文字でも文字列でもない場合

<section>
  <h2>if文</h2>
  <p th:if="${member.id == 1}">あなたは管理者です。</p>
  <p th:if="${null}">nullなのでこのタグが出力されない。</p>
  <p th:if="123">0以外の数値なので出力される。</p>
</section>
<section>
  <h2>if文</h2>
  <p>あなたは管理者です。</p>

  <p>0以外の数値なので出力される。</p>
</section>

<th:block>タグ

擬似的なブロックを形成できるタグのようなもの。例えばth:eachで繰り返し処理する場合に必ずしも繰り返す単位がタグと一致しない場合に使う（もちろんth:each以外でもどこでも利用可能）。<th:block>タグ自体は出力されない。

<section>
  <h2>&lt;th:block&gt;タグ</h2>
  <ul>
    <th:block th:each="member : ${members}">
      <li th:text="'ID:' + ${member.id}"></li>
      <li th:text="'名前:' + ${member.name}"></li>
    </th:block>
  </ul>
</section>
出力 
<section>
  <h2>&lt;th:block&gt;タグ</h2>
  <ul>

      <li>ID:1</li>
      <li>名前:一郎</li>


      <li>ID:2</li>
      <li>名前:次郎</li>


      <li>ID:3</li>
      <li>名前:三郎</li>

  </ul>
</section>

ローカル変数

「th:with="変数名=値"」でローカル変数を定義することが可能。

<section>
  <h2>ローカル変数</h2>
  <th:block th:with="ichro=${member}">
    <p th:text="'こんにちは' +  ${ichro.name} + 'さん'">書き換わるはず</p>
  </th:block>
</section>
出力 
<section>
	<h2>ローカル変数</h2>

		<p>こんにちは一郎さん</p>

</section>

JavaScript

th:inline="javascript"でjavascriptに値を渡すことができる。

<section>
  <h2>JavaScript</h2>
    <script th:inline="javascript">
    /*<![CDATA[*/
      var userId = /*[[${member.id}]]*/ '会員名';
    /*]]>*/
    </script>
</section>
出力 
<section>
  <h2>JavaScript</h2>
    <script>
    /*<![CDATA[*/
      var userId = 1;
    /*]]>*/
    </script>
</section>

Appendix A: 改訂履歴

  • v1.0, 2017-05-02: 初稿

▲