Thymeleafで繰り返し文th:eachを使用する方法
効率的なJava学習サービスの探し方をご存知ですか？
Javaを入門レベルから勉強できるおすすめ学習サービス7選
Javaを学習したいけれどどの学習サービスを選べば良いか分からないという悩みを抱えていませんか？
Javaは市場価値が高い為、学習サービスを提供しているものも多く、条件に合うものを見つけるのに苦労しますよね。
以下の記事ではJavaを入門レベルから勉強できるおすすめ学習サービスをご紹介しています。
Spring FrameworkやThymeleafがカリキュラムに含まれているものがあるので、ぜひ参考にしてください！
Javaを入門レベルから勉強できるおすすめ学習サービス7選実行環境
| OS | macOS Catalina 10.15.1 |
| Eclipse | Photon 2018-09 |
| Java | 8 |
| Spring Tool Suit | 3.9.6 |
| Spring Boot | 2.1.13 |
| Thymeleaf | 2.1.2 |
開発および実行環境がない人は、以下の記事を参考に構築してください。
Spring BootとThymeleafを導入してHello worldを表示する方法Thymeleafで繰り返し文th:eachを使用する方法
今回は、Thymeleafで繰り返し文th:eachを使用する方法をご紹介します。
また、サンプルとして以下のようなテーブルを作成します。
リストの要素の数だけ表示するテーブルと指定した数だけ表示する（回数指定）テーブルを実装するので、ぜひ参考にしてください。
th:each
Thymeleafでは、th:each="要素格納用の変数 : ${リスト}" で繰り返し処理を実装することができます。
リストから要素を取り出し、要素格納用の変数に要素を格納して値を表示します。
th:eachを使用してテーブルを実装する
th:eachを使用してテーブルを実装する手順は以下のとおりです。
- リストの要素として使用するクラスを作成する
- Controllerクラスを作成する
- テンプレートファイルを作成する
- 動作を確認する
また、フォルダ構成は以下のとおりです。
src/main/java/com.example
├─ vo
│ └─ FruitVO.java
├─ controller
│ └─ LoopController.java
src/main/resources/templates
└─ loop.htmlリストの要素として使用するクラスを作成する
はじめに、リストの要素として使用するクラスを作成します。
今回は「FruitVO」という名前で作成します。
package com.example.vo;
public class FruitVO {
private final String cd;
private final String name;
private final String color;
public FruitVO(String cd, String name, String color) {
this.cd = cd;
this.name = name;
this.color = color;
}
public String getCd() {
return cd;
}
public String getName() {
return name;
}
public String getColor() {
return color;
}
}Controllerクラスを作成する
次に、Controllerクラスを作成します。
今回は「LoopController」という名前で作成します。
要素は4つ作成し、URLは「/loop」、テンプレートファイル名は「loop」を指定します。
package com.example.controller;
import java.util.ArrayList;
import java.util.List;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import com.example.vo.FruitVO;
@Controller
public class LoopController {
@RequestMapping("/loop")
public String sample(Model model) {
List<FruitVO> fruits = new ArrayList<FruitVO>();
FruitVO apple = new FruitVO("01", "りんご", "あか");
fruits.add(apple);
FruitVO lemon = new FruitVO("02", "レモン", "きいろ");
fruits.add(lemon);
FruitVO kiwi = new FruitVO("03", "キウイ", "みどり");
fruits.add(kiwi);
FruitVO orange = new FruitVO("04", "みかん", "オレンジ");
fruits.add(orange);
model.addAttribute("fruits", fruits);
return "loop";
}
}テンプレートファイルを作成する
Controllerクラスの作成が完了したら、テンプレートファイルを作成します。
今回は「loop」という名前で作成します。
リストの要素の数だけ表示するテーブルを実装する
リストの要素の数だけ表示するテーブルを実装する場合は、以下のようになります。
th:if="${!#lists.isEmpty(fruits)}" でリストが空でないか判断し、空でなかった場合 th:each="fruit : ${fruits}" でリストの要素を fruit という変数に格納しています。格納後 th:text="${fruit.xxx}" で値を表示しています。
<table>
<thead>
<tr>
<th>コード</th>
<th>名前</th>
<th>色</th>
</tr>
</thead>
<tbody>
<!-- fruitsが空でない場合、fruitsの要素をfruitに格納する -->
<!-- 要素の数ループする -->
<tr th:if="${!#lists.isEmpty(fruits)}" th:each="fruit : ${fruits}">
<td th:text="${fruit.cd}">/td>
<td th:text="${fruit.name}">/td>
<td th:text="${fruit.color}"></td>
</tr>
</tbody>
</table>th:Ifについては、以下の記事を参考にしてください。
Thymeleafで制御文th:if/th:switch-th:caseを使用する方法#listsについては、以下の記事を参考にしてください。
Thymeleafのユーティリティオブジェクト4選指定した数だけ表示する（回数指定）テーブルを実装する
指定した数だけ表示する（回数指定）テーブルを実装する場合は、以下のようになります。
th:each="i : ${#numbers.sequence(0, 2)}" で 0〜2 の値を i という変数に格納しています。th:if="${#lists.size(fruits) gt ${i}}" でリストの要素の数が i よりも大きいか（=表示する要素があるか）判断し、大きい場合 th:text="${fruits[${i}].xxx}" で値を表示しています。
<table>
<thead>
<tr>
<th>コード</th>
<th>名前</th>
<th>色</th>
</tr>
</thead>
<tbody>
<!-- #numbers.sequenceの値をiに格納する -->
<!-- 値は0から開始して2で終了する為、0,1,2の3回ループする -->
<tr th:each="i : ${#numbers.sequence(0, 2)}">
<!-- fruitsの要素の数が#numbers.sequenceの値より大きい場合、要素を表示 -->
<th:block th:if="${#lists.size(fruits) gt __${i}__}">
<td th:text="${fruits[__${i}__].cd}">/td>
<td th:text="${fruits[__${i}__].name}">/td>
<td th:text="${fruits[__${i}__].color}"></td>
</th:block>
</tr>
</tbody>
</table>th:Ifについては、以下の記事を参考にしてください。
Thymeleafで制御文th:if/th:switch-th:caseを使用する方法#numbersや#listsについては、以下の記事を参考にしてください。
Thymeleafのユーティリティオブジェクト4選今回は、リストの要素の数だけ表示するテーブルと指定した数だけ表示する（回数指定）テーブルを実装するので以下のようなテンプレートファイルを作成します。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Thymeleafで繰り返し文th:eachを使用する方法</title>
<style>
body {
background-color: whitesmoke;
color: #333;
}
table {
border: 1px solid #333;
border-collapse: collapse;
margin: 45px 0 0 45px;
}
th {
background-color: #333;
border: 1px solid #333;
color: white;
padding: 5px 8px;
}
td {
background-color: white;
border: 1px dotted #333;
padding: 5px 8px;
}
</style>
</head>
<body>
<!-- リストの要素の数だけ表示するテーブル -->
<table>
<thead>
<tr>
<th>コード</th>
<th>名前</th>
<th>色</th>
</tr>
</thead>
<tbody>
<!-- fruitsが空でない場合、fruitsの要素をfruitに格納する -->
<!-- 要素の数ループする -->
<tr th:if="${!#lists.isEmpty(fruits)}" th:each="fruit : ${fruits}">
<td th:text="${fruit.cd}">/td>
<td th:text="${fruit.name}">/td>
<td th:text="${fruit.color}"></td>
</tr>
</tbody>
</table>
<!-- 指定した数だけ表示する（回数指定）テーブル -->
<table>
<thead>
<tr>
<th>コード</th>
<th>名前</th>
<th>色</th>
</tr>
</thead>
<tbody>
<!-- #numbers.sequenceの値をiに格納する -->
<!-- 値は0から開始して2で終了する為、0,1,2の3回ループする -->
<tr th:each="i : ${#numbers.sequence(0, 2)}">
<!-- fruitsの要素の数が#numbers.sequenceの値より大きい場合、要素を表示 -->
<th:block th:if="${#lists.size(fruits) gt __${i}__}">
<td th:text="${fruits[__${i}__].cd}">/td>
<td th:text="${fruits[__${i}__].name}">/td>
<td th:text="${fruits[__${i}__].color}"></td>
</th:block>
</tr>
</tbody>
</table>
</body>
</html>動作を確認する
最後に、ブラウザで「http://localhost:8080/loop」にアクセスして動作を確認します。
以下のように表示されていたら、動作の確認は完了です。
お疲れさまでした
Thymeleafで繰り返し文th:eachを使用する方法をご紹介しました。
少しでも参考になれば幸いです。
ThymeleafとSpringを一度に学びたくありませんか？
ポチップ
以下の書籍は、Thymeleafを書籍で学びたい人やThymeleafと併せてSpring Frameworkを学習したい人におすすめしている書籍です。
Springについての書籍ですが、Thymeleafの基礎や基本構文から他システムとの連携等30ページほど取り上げられており、ThymeleafとSpringを一度に学べる書籍になっています。
ぜひ一度手に取ってみてください。
ポチップ
どんな記事が読みたいですか？
現在、ミルラクでは記事に関するアンケートを実施しています。
ご回答いただいた内容は今後の記事の役立てていきますので、ぜひご回答ください！