ホーム>技術

Thymeleafで繰り返し文th:eachを使用する方法

当サイトはアフィリエイト広告を利用しています。

目次

効率的なJava学習サービスの探し方をご存知ですか？

Javaを学習したいけれどどの学習サービスを選べば良いか分からないという悩みを抱えていませんか？
Javaは市場価値が高い為、学習サービスを提供しているものも多く、条件に合うものを見つけるのに苦労しますよね。
以下の記事ではJavaを入門レベルから勉強できるおすすめ学習サービスをご紹介しています。
Spring FrameworkやThymeleafがカリキュラムに含まれているものがあるので、ぜひ参考にしてください！

Javaを入門レベルから勉強できるおすすめ学習サービス7選

実行環境

OSmacOS Catalina 10.15.1
EclipsePhoton 2018-09
Java8
Spring Tool Suit3.9.6
Spring Boot2.1.13
Thymeleaf2.1.2

開発および実行環境がない人は、以下の記事を参考に構築してください。

Spring BootとThymeleafを導入してHello worldを表示する方法

Thymeleafで繰り返し文th:eachを使用する方法

今回は、Thymeleafで繰り返し文th:eachを使用する方法をご紹介します。

また、サンプルとして以下のようなテーブルを作成します。
リストの要素の数だけ表示するテーブルと指定した数だけ表示する（回数指定）テーブルを実装するので、ぜひ参考にしてください。

サンプルのキャプチャ

th:each

Thymeleafでは、th:each="要素格納用の変数 : ${リスト}" で繰り返し処理を実装することができます。
リストから要素を取り出し、要素格納用の変数に要素を格納して値を表示します。

th:eachを使用してテーブルを実装する

th:eachを使用してテーブルを実装する手順は以下のとおりです。

  1. リストの要素として使用するクラスを作成する
  2. Controllerクラスを作成する
  3. テンプレートファイルを作成する
  4. 動作を確認する

また、フォルダ構成は以下のとおりです。

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を一度に学べる書籍になっています。
ぜひ一度手に取ってみてください。

Spring徹底入門 Spring FrameworkによるJavaアプリケーション開発
翔泳社
¥1,980 （2022/07/18 00:00時点 | Amazon調べ）
Amazonで見る
Kindleで見る

どんな記事が読みたいですか？

現在、ミルラクでは記事に関するアンケートを実施しています。
ご回答いただいた内容は今後の記事の役立てていきますので、ぜひご回答ください！