テーブルデータの表示方法（th:each + table）を完全ガイド！初心者でもわかるデータ表示の基本
新人
「Spring MVCでデータをテーブル形式で表示したいんですが、どうすればいいですか？」
先輩
「Spring MVCでは、Thymeleafのth:eachを使えば、簡単にテーブルにデータを表示できます。」
新人
「それって具体的にどういうことですか？どんな時に使うんですか？」
先輩
「よし、それじゃあth:eachの基本と、テーブル表示の方法を順番に説明していこう！」
1. th:eachとは？
Thymeleafのth:eachは、リストや配列などの繰り返し処理を行うときに使用する属性です。これを使うことで、例えば社員リストや商品一覧など、複数のデータをHTMLのテーブルやリストに簡単に表示することができます。
この属性は、Spring MVCと組み合わせてモデルからデータを受け取り、HTML上で繰り返し処理を行う際に非常に便利です。特に、ユーザー情報や商品データを画面上に一覧表示する際に役立ちます。
2. なぜth:eachを使うのか？
Webアプリケーションでは、複数のデータを一覧で表示するケースが非常に多いです。例えば、ショッピングサイトの商品リストや社員名簿、顧客リストなどが挙げられます。th:eachを使うことで、以下のようなメリットがあります。
- コードがシンプルで読みやすくなる
- HTML内で直接データをループできるので保守が簡単
- Spring MVCとの連携がスムーズ
従来のJSPタグやサーブレットを使う方法に比べ、Thymeleafは直感的にコードが書けるため、初心者にも優しいのが特徴です。
3. テーブル表示の基本構造
次に、実際にth:eachを使ってデータをテーブルに表示する基本的なHTMLコードを見てみましょう。
<table border="1">
<thead>
<tr>
<th>ID</th>
<th>名前</th>
<th>メールアドレス</th>
</tr>
</thead>
<tbody>
<tr th:each="user : ${userList}">
<td th:text="${user.id}"></td>
<td th:text="${user.name}"></td>
<td th:text="${user.email}"></td>
</tr>
</tbody>
</table>
このコードでは、モデルからuserListというリストを受け取り、その中のuserオブジェクトを順番に取り出してテーブルに表示しています。各カラムには、ユーザーのID、名前、メールアドレスが表示されます。
4. コントローラの作成方法（@Controllerを使用）
次に、Spring MVCでテーブルにデータを表示するためのコントローラを作成します。ここでは、@Controllerを使い、Thymeleafのテンプレートへデータを渡す方法を解説します。
まず、プロジェクト内にUserControllerクラスを作成し、リストデータをモデルに格納してビューに渡します。以下がその基本的なコードです。
package com.example.demo.controller;
import com.example.demo.model.User;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import java.util.Arrays;
import java.util.List;
@Controller
public class UserController {
@GetMapping("/users")
public String getUsers(Model model) {
List<User> userList = Arrays.asList(
new User(1, "山田太郎", "yamada@example.com"),
new User(2, "鈴木花子", "suzuki@example.com"),
new User(3, "佐藤一郎", "sato@example.com")
);
model.addAttribute("userList", userList);
return "user-list";
}
}
このコードでは、@GetMapping("/users")で/usersパスにアクセスがあったときにgetUsersメソッドが実行されます。ModelオブジェクトにユーザーリストuserListを追加し、Thymeleafのuser-list.htmlテンプレートにデータを渡します。
5. モデルクラスの作成方法とデータ準備
次に、ユーザー情報を扱うモデルクラスを作成します。モデルはデータの構造を定義し、コントローラで使用するために必要です。以下にUserクラスのコードを示します。
package com.example.demo.model;
public class User {
private int id;
private String name;
private String email;
public User(int id, String name, String email) {
this.id = id;
this.name = name;
this.email = email;
}
public int getId() { return id; }
public String getName() { return name; }
public String getEmail() { return email; }
}
このクラスはユーザーのID、名前、メールアドレスを持っています。コンストラクタとゲッターを定義しており、これによりコントローラからデータを渡す際にアクセスが容易になります。
6. Thymeleafでテーブルデータを表示する方法（基本的なコード解説）
コントローラからuserListを渡した後、Thymeleafのテンプレートで実際にデータを表示させます。以下がuser-list.htmlのコードです。
<!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>ID</th>
<th>名前</th>
<th>メールアドレス</th>
</tr>
</thead>
<tbody>
<tr th:each="user : ${userList}">
<td th:text="${user.id}"></td>
<td th:text="${user.name}"></td>
<td th:text="${user.email}"></td>
</tr>
</tbody>
</table>
</body>
</html>
上記のコードでは、th:eachを使用してuserList内のuserオブジェクトを順にループしています。th:textでデータを埋め込み、ID・名前・メールアドレスを表示しています。ブラウザでlocalhost:8080/usersにアクセスすると以下のように表示されます。
ID 名前 メールアドレス
1 山田太郎 yamada@example.com
2 鈴木花子 suzuki@example.com
3 佐藤一郎 sato@example.com
このように、Spring MVCとThymeleafを組み合わせることで、シンプルなコードでデータ表示が可能になります。
7. 実際にデータを表示してみよう（実行結果の確認）
これまでに作成したコントローラ、モデル、そしてThymeleafのテンプレートを組み合わせることで、ブラウザにユーザー一覧を表示できます。Pleiadesでアプリケーションを起動し、ブラウザでhttp://localhost:8080/usersにアクセスしてみましょう。
以下が実際の実行結果です。
ID 名前 メールアドレス
1 山田太郎 yamada@example.com
2 鈴木花子 suzuki@example.com
3 佐藤一郎 sato@example.com
上記のように、各ユーザーのID、名前、メールアドレスがテーブル形式で表示されます。コード内でth:eachを使用しているため、ユーザーリスト内のデータが自動的にループ処理され、HTMLに表示されます。
8. よくあるエラーとその解決方法
実際に開発を進めていくと、初心者がよくつまずくエラーに遭遇することがあります。ここでは、よくあるエラーとその解決方法をいくつか紹介します。
8.1 userListが表示されない
原因として、コントローラでモデルへのデータ追加が正しく行われていない可能性があります。特にmodel.addAttribute("userList", userList);の記述漏れがよくあります。
解決方法： コントローラ内でモデルにデータを渡しているか確認してください。
// 正しい例
model.addAttribute("userList", userList);
8.2 テンプレートが見つからないエラー
TemplateInputExceptionが表示される場合、Thymeleafのテンプレートファイル名やフォルダ構成が間違っていることが考えられます。
解決方法： テンプレートフォルダ内の配置を確認し、resources/templates/user-list.htmlのように正しい位置に配置してください。
8.3 th:eachが正しくループしない
このエラーは、th:eachの構文ミスや渡されているリストが空の場合に発生します。
解決方法： コントローラからuserListが正常に渡されているか、データが存在するか確認してください。また、th:each="user : ${userList}"の記述ミスがないかも確認しましょう。
9. 記事全体の振り返りとポイント解説
本記事では、Spring MVCとThymeleafを使用したテーブルデータ表示の基本について解説しました。以下が今回のポイントです。
- th:eachを使うことで、リストや配列データを簡単に繰り返し表示できる
- モデルクラスを作成し、データの構造を明確にすることが重要
- コントローラからモデルにデータを渡し、テンプレート側で正しく表示させる
- よくあるエラーを理解し、迅速に対処できるようにしておく
初心者にとってth:eachは最初は難しく感じるかもしれませんが、実際にコードを書いてみると理解が深まります。小さなサンプルから実践的なテーブル表示まで段階的に試すことで、確実にスキルアップできます。
まとめ
本記事では、Spring MVCとThymeleafを使って、リスト形式のデータをテーブルに表示する方法を一から丁寧に解説しました。Thymeleafのth:eachを活用することで、ユーザーリストや商品一覧などの複数データを繰り返し表示するHTMLテンプレートを、シンプルかつ保守性の高い形で実装することができます。
特に初心者の方にとって重要なのは、th:eachの書き方と、コントローラ側でModelにデータを渡す一連の流れを理解することです。モデルクラスの設計から、コントローラでのリスト生成、テンプレートでの繰り返し表示という一連のプロセスを学ぶことで、実践的なWebアプリケーション開発への第一歩を踏み出すことができます。
また、エラーが出た場合の原因と対処法についても触れました。例えばuserListが表示されないときはmodel.addAttributeの記述漏れが多く、テンプレートファイルが見つからない場合はresources/templatesの配置ミスが原因であるケースがほとんどです。こうしたトラブルにも対応できるよう、エラーメッセージの読み方にも慣れていきましょう。
さらに、ユーザー情報を表示する代表的なテーブル構造のコード例を確認しながら、th:eachでのループ処理、th:textでの値埋め込みなど、Thymeleafの基本機能を体験的に学ぶことができました。下記に改めて基本的なサンプルを掲載します。
<table border="1">
<thead>
<tr>
<th>ID</th>
<th>名前</th>
<th>メールアドレス</th>
</tr>
</thead>
<tbody>
<tr th:each="user : ${userList}">
<td th:text="${user.id}"></td>
<td th:text="${user.name}"></td>
<td th:text="${user.email}"></td>
</tr>
</tbody>
</table>
このように、Spring MVCとThymeleafを用いたテーブル表示の手法は、Web開発の基本スキルとして非常に重要です。今後はさらに動的な処理やデータベースとの連携を加えた応用的な実装にもチャレンジしていくとよいでしょう。繰り返し学びながら、着実にステップアップを目指してください。
新人
「なるほど、th:eachを使えば、ユーザー一覧みたいなデータをすごく簡単に表示できるんですね！」
先輩
「そうだね。ThymeleafはHTMLと近い見た目のまま書けるから、視覚的にも分かりやすいんだ。」
新人
「userListって、コントローラで作ってモデルに渡すのが大事なんですね。あとテンプレートの場所も注意しないと。」
先輩
「その通り。ファイル名や配置が違っているとエラーになるから、開発環境の構成にも気を配るといいよ。」
新人
「これで、今後のプロジェクトでも自信をもってデータ表示ができそうです！」
先輩
「まずはこの基本をしっかり押さえて、どんどん応用力を高めていこう！」
この記事を読んだ人からの質問
