INSIGHT

情報・インサイト

【Spring Boot】Thymeleafの中でListやMapを生成する方法

2020.04.13

ThymeleafだけでListやMapを生成して利用する方法をご紹介します。

List、Mapの生成方法

Listを生成する場合

${{ }}の中にカンマ区切りの値を設定します

${ { value,value,value } }

<div th:each="val : ${ { 'ノック','フック','パンチ' } }">
   <p th:text="${val}"></p>
</div>

【結果】

ノック
フック
パンチ

 

Mapを生成する場合

${{ }}の中に「key:value」をカンマ区切りで設定します

${ {key:value, key:value} }

<th:block th:with="map=${ {fruit:'マンゴスチン', vegetable:'キャベツ', animal:'クマムシ'} }">
    <p th:text="${map.fruit}"></p>
    <p th:text="${map.vegetable}"></p>
    <p th:text="${map.animal}"></p>
</th:block>

【結果】

マンゴスチン
キャベツ
クマムシ

 

MapのListを生成する場合

Listの中にMapを設定します

${ { {key:value, key:value}, {key:value, key:value} } }

<th:block th:with="list=${ { {number:'71', name:'久慈'},{number:'78',name:'平田'},{number:'84',name:'日高'} } }">
    <div th:each="map : ${list}">
        <p th:text="${map.number + ':' + map.name}"></p>
    </div>
</th:block>

【結果】

71:久慈
78:平田
84:日高

  

利用例

Controllerから渡さずに、Thyeleafだけで生成するシーンは限られそうですが、
弊社では「パンくずリスト」のテンプレートに、各画面からMapのListを渡して利用しています。

利用時のサンプル(パンくずリスト)

テンプレート

<div layout:fragment="title(title, breadcrumbs)">
    <div class="page_title">
      <h2 th:text="${title}"></h2>
      <div>
        <ol class="breadcrumb">
          <li th:each="breadcrumb : ${breadcrumbs}"
          th:classappend="${#strings.isEmpty(breadcrumb.url)} ? 'active' : ''">
            <a th:unless="${#strings.isEmpty(breadcrumb.url)}" th:href="@{${breadcrumb.url}}" th:text="${breadcrumb.label}"></a>
            <strong th:if="${#strings.isEmpty(breadcrumb.url)}" th:text="${breadcrumb.label}"></strong>
          </li>
        </ol>
      </div> 
    

 

テンプレート呼び出し画面

一覧画面

<div th:with="breadcrumbs=${ { {url:'home',label:'HOME'},{url:'', label:'一覧'} } }">
  <div layout:replace="~{layouts/common::title('一覧', ${breadcrumbs})}"></div>
</div>

編集画面

<div th:with="breadcrumbs=${ { {url:'home',label:'HOME'},{url:'/list',label:'一覧'},{url:'', label:'編集'} } }">
  <div layout:replace="~{layouts/common::title('編集', ${breadcrumbs})}"></div>
</div>

 

ポイント

 

参考

テンプレート側で引数が不要な場合は、layout:replace時に引数の中で変数宣言することができます。

テンプレート

<div layout:fragment="breadcrumbs">
      <ol class="breadcrumb">
        <li th:each="breadcrumb : ${breadcrumbs}"
          th:classappend="${#strings.isEmpty(breadcrumb.url)} ? 'active' : ''">
          <a th:unless="${#strings.isEmpty(breadcrumb.url)}" th:href="@{${breadcrumb.url}}" th:text="${breadcrumb.label}"></a>
          <strong th:if="${#strings.isEmpty(breadcrumb.url)}" th:text="${breadcrumb.label}"></strong>
        </li>
      </ol>
</div>

テンプレート呼び出し画面

<div layout:replace="~{layouts/common::breadcrumbs(breadcrumbs=${ {{url:'/home',label:'HOME'},{url:'/list',label:'一覧'},{url:'',label:'編集'}} })}"></div>

 
 
いかがでしたでしょうか?
Controllerから渡す必要が無い場合などに比較的利用することが多い方法だと思います。
是非カスタマイズして利用してみてください。
 
 

ウィズテクノロジーで一緒に働きませんか?
分野を限定せず幅広い事業を展開。新しい技術の導入にも積極的に取り組んでおり、チャレンジや成長する機会が沢山。
あなたの経験・知識を活かしながら一緒にIT業界を盛り上げて行きましょう!
採用情報詳細はコチラ

WORKS

導入事例

ウィズテクノロジーは大阪を拠点に、システム開発の分野で20年の実績を持つパートナー企業です。
業務効率化やDX支援など、さまざまな課題にワンストップで対応。
経験豊富なエンジニアが、企業の成長を技術面からしっかりサポートします。

導入事例一覧を見る
導入事例一覧を見る

RECRUIT

採用情報

未来に、価値ある選択を。

All WhizzTechnologyは、期待を超える価値をともにつくり、より良い未来へ導く仲間を募集しています。