【Spring Boot】Thymeleafの中でListやMapを生成する方法
公開日：2020年04月13日
カテゴリー：Java, Spring Boot
ThymeleafだけでListやMapを生成して利用する方法をご紹介します。
▼ 目次
List、Mapの生成方法
Listを生成する場合
${{ }}の中にカンマ区切りの値を設定します
${ { value,value,value } }
|
1 2 3 |
<div th:each="val : ${ { 'ノック','フック','パンチ' } }"> <p th:text="${val}"></p> </div> |
【結果】
ノック
フック
パンチ
フック
パンチ
Mapを生成する場合
${{ }}の中に「key:value」をカンマ区切りで設定します
${ {key:value, key:value} }
|
1 2 3 4 5 |
<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} } }
|
1 2 3 4 5 |
<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:日高
78:平田
84:日高
利用例
Controllerから渡さずに、Thyeleafだけで生成するシーンは限られそうですが、
弊社では「パンくずリスト」のテンプレートに、各画面からMapのListを渡して利用しています。
利用時のサンプル（パンくずリスト）
テンプレート
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<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> </div> |
テンプレート呼び出し画面
一覧画面
|
1 2 3 |
<div th:with="breadcrumbs=${ { {url:'home',label:'HOME'},{url:'', label:'一覧'} } }"> <div layout:replace="~{layouts/common::title('一覧', ${breadcrumbs})}"></div> </div> |
編集画面
|
1 2 3 |
<div th:with="breadcrumbs=${ { {url:'home',label:'HOME'},{url:'/list',label:'一覧'},{url:'', label:'編集'} } }"> <div layout:replace="~{layouts/common::title('編集', ${breadcrumbs})}"></div> </div> |
ポイント
- タイトル、パンくずリストの部分は共通部品をテンプレートに切り出す
「layout:fragment=”title(title, breadcrumbs)”」の箇所 - 各画面からパンくずリストの共通部品を呼び出す
「layout:replace=”~{layouts/common::title(‘xx’, ${breadcrumbs})}”」の箇所 - Thymeleafの変数にパンくずのMap/Listをセットする
「th:with=”breadcrumbs=${ { {url:’xx’,label:’xx’},{url:”, label:’oo’} } }」の箇所 - ${bredcrumbs}は変数宣言しているので引数にしなくても利用できるが、テンプレート側からの可読性を上げるために引数で渡している
参考
テンプレート側で引数が不要な場合は、layout:replace時に引数の中で変数宣言することができます。
テンプレート
|
1 2 3 4 5 6 7 8 9 |
<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> |
テンプレート呼び出し画面
|
1 |
<div layout:replace="~{layouts/common::breadcrumbs(breadcrumbs=${ {{url:'/home',label:'HOME'},{url:'/list',label:'一覧'},{url:'',label:'編集'}} })}"></div> |
いかがでしたでしょうか？
Controllerから渡す必要が無い場合などに比較的利用することが多い方法だと思います。
是非カスタマイズして利用してみてください。
ウィズテクノロジーで一緒に働きませんか？
分野を限定せず幅広い事業を展開。新しい技術の導入にも積極的に取り組んでおり、チャレンジや成長する機会が沢山。
あなたの経験・知識を活かしながら一緒にIT業界を盛り上げて行きましょう！
採用情報詳細はコチラ
