新人と先輩の会話形式で理解しよう

新人

「Thymeleafで変数にリストやマップを入れて、それを画面に表示させたいのですが、どうすればいいですか？」

先輩

「Spring MVCの@Controllerでモデルにリストやマップを渡して、Thymeleafで受け取って表示するのが基本のやり方です。」

新人

「モデルにどうやってリストやマップを入れるのかがまだよくわかりません。実際のコード例はありますか？」

先輩

「もちろんあります。まずはThymeleafが何か、そして変数にリストやマップを入れる考え方から説明しましょう。」

1. Thymeleafとは何か

ThymeleafはJavaのサーバーサイドテンプレートエンジンで、主にSpring MVCのWebアプリケーションでHTMLを動的に生成するために使われます。Pleiades環境でGradleを使って開発するときにも、Springの@Controllerから渡したデータをThymeleafテンプレートで簡単に表示できます。

Thymeleafの特徴は、HTMLの中に直接特別な属性を追加して動的な処理を行うことができる点です。例えば、変数を表示したり、繰り返し処理でリストを表示したりすることができます。

Spring MVCのコントローラでモデルに値を入れておけば、Thymeleafで簡単にその値を使えます。これがThymeleafの大きな利点の一つです。

2. 変数にリストやマップを格納する基本的な考え方

Thymeleafの変数には単純な文字列や数値だけでなく、Javaのリスト（List）やマップ（Map）も格納して扱えます。Spring MVCの@Controllerクラスでモデルにこれらのデータを追加し、Thymeleafテンプレートで表示します。

例えば、モデルにリストを追加すると、Thymeleafのテンプレート側でそのリストをループして表示することができます。同様にマップを渡せば、キーを使って値を取り出して表示も可能です。

この方法を使うことで、複数のデータを効率よく画面に表示できるため、Webアプリケーションの開発において非常に役立ちます。

具体的には、@ControllerのメソッドでModelオブジェクトを使い、model.addAttribute("変数名", データ)という形でリストやマップを追加します。Thymeleafのテンプレートでは、th:eachでリストの繰り返し処理や、th:textでマップの値の表示を行います。

3. Springの@Controllerでリストやマップをモデルに追加する方法

Spring MVCの@Controllerでは、Modelオブジェクトを使ってビューに渡すデータをセットします。リストやマップのような複雑なデータ構造もモデルに追加でき、Thymeleafで簡単に使えます。Pleiades環境でGradleを使ったプロジェクトでも、同じ方法で問題なく動作します。

具体的には、model.addAttribute("変数名", データ)で、リストやマップをモデルに登録します。例えば、ユーザー名のリストや商品のマップなどをコントローラ内で作成し、それをThymeleafに渡せます。


import java.util.List;
import java.util.Map;
import java.util.HashMap;
import java.util.Arrays;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class SampleController {

    @GetMapping("/sample")
    public String showSample(Model model) {
        // リストの作成
        List<String> userList = Arrays.asList("佐藤", "鈴木", "高橋");

        // マップの作成
        Map<String, String> productMap = new HashMap<>();
        productMap.put("A001", "ノートパソコン");
        productMap.put("B002", "スマートフォン");
        productMap.put("C003", "タブレット");

        // モデルに追加
        model.addAttribute("users", userList);
        model.addAttribute("products", productMap);

        return "sampleView";
    }
}

この例では、showSampleメソッドでリストとマップを作成し、モデルにそれぞれusersとproductsという名前で追加しています。これにより、Thymeleafのテンプレートでusersとproductsを変数として使えます。

4. Thymeleafテンプレート内でリストをループ処理して表示する方法

Thymeleafでリストの内容を表示したい場合、th:each属性を使って繰り返し処理を行います。上記のコントローラから渡されたusersリストを例に見てみましょう。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>リスト表示サンプル</title>
</head>
<body>
    <h2>ユーザー一覧</h2>
    <ul>
        <li th:each="user : ${users}" th:text="${user}">ユーザー名</li>
    </ul>
</body>
</html>

このテンプレートでは、th:each="user : ${users}"でモデルのusersリストの要素を一つずつ取り出し、th:text="${user}"で各ユーザー名をリストアイテムとして表示しています。これにより、画面に「佐藤」「鈴木」「高橋」というユーザー名の一覧が表示されます。

この方法は、Pleiadesで作成したGradleプロジェクトでもそのまま使え、Spring MVCモデルの変数をThymeleafで安全かつ簡単に扱えます。

5. マップの値をThymeleafで取得して表示する方法

マップの値をThymeleafで表示するには、キーを指定してアクセスします。先ほどのコントローラで渡したproductsマップを例に解説します。

マップのすべてのエントリを繰り返し表示する場合もth:eachを使い、entry.keyやentry.valueでキーと値を取得します。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>マップ表示サンプル</title>
</head>
<body>
    <h2>商品一覧</h2>
    <table border="1">
        <thead>
            <tr><th>商品コード</th><th>商品名</th></tr>
        </thead>
        <tbody>
            <tr th:each="entry : ${products.entrySet()}">
                <td th:text="${entry.key}">コード</td>
                <td th:text="${entry.value}">商品名</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

この例では、products.entrySet()を繰り返し処理し、各エントリのキー（商品コード）と値（商品名）をテーブルのセルに表示しています。これにより、商品コードと商品名の一覧をわかりやすく画面に表示できます。

Spring MVCのモデルにマップを渡してThymeleafで扱う際、この書き方は非常に便利で、Pleiadesの環境でも問題なく動作します。

6. 実践例：リストとマップを組み合わせてThymeleafで表示する応用例

ここまでの説明で、リストやマップをSpring MVCのモデルに追加し、Thymeleafで表示する基本を理解できたと思います。次はリストとマップを組み合わせて使う応用例を見てみましょう。実際のWebアプリでは、商品一覧に商品コードと名前だけでなく、カテゴリーや価格など複数の情報を扱うことが多いです。

今回は商品コードをキー、商品の詳細情報をマップの値として持ち、それらをリストで管理するイメージです。これにより複雑なデータ構造もThymeleafで扱いやすくなります。


import java.util.List;
import java.util.Map;
import java.util.ArrayList;
import java.util.HashMap;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class ProductController {

    @GetMapping("/products")
    public String showProducts(Model model) {
        List<Map<String, Object>> productList = new ArrayList<>();

        Map<String, Object> product1 = new HashMap<>();
        product1.put("code", "A001");
        product1.put("name", "ノートパソコン");
        product1.put("price", 120000);
        product1.put("category", "電子機器");
        productList.add(product1);

        Map<String, Object> product2 = new HashMap<>();
        product2.put("code", "B002");
        product2.put("name", "スマートフォン");
        product2.put("price", 80000);
        product2.put("category", "電子機器");
        productList.add(product2);

        model.addAttribute("productList", productList);
        return "productView";
    }
}

このコントローラでは、複数の商品の詳細情報をそれぞれマップに格納し、それらをリストにまとめてモデルに渡しています。Thymeleafテンプレートでこの複雑な構造をループで展開して表示していきます。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>商品詳細一覧</title>
</head>
<body>
    <h2>商品詳細一覧</h2>
    <table border="1">
        <thead>
            <tr>
                <th>商品コード</th>
                <th>商品名</th>
                <th>価格</th>
                <th>カテゴリー</th>
            </tr>
        </thead>
        <tbody>
            <tr th:each="product : ${productList}">
                <td th:text="${product.code}">コード</td>
                <td th:text="${product.name}">名前</td>
                <td th:text="${product.price}">価格</td>
                <td th:text="${product.category}">カテゴリー</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

このテンプレートは、productListの中の各マップをproductとして受け取り、キーを指定して各セルに値を表示しています。こうすることで、Thymeleaf変数の応用的な使い方が理解でき、複雑なリストやマップの組み合わせも簡単に表示可能です。