新・Servlet/JSP入門編6:コアライブラリ2 - 繰り返し処理 c:forEach | プログラミング学習サイト【paizaラーニング】

※有料会員になるとこの動画をご利用いただけます

＃08:コアライブラリ2 - 繰り返し処理 c:forEach

このチャプターでは、繰り返し処理に使用する c:forEach について学習します。

入力コード

【PostBean】

package jp.paiza.bean;

import java.io.Serializable;
import java.util.*;
import java.sql.*;

public class PostBean implements Serializable {
    
    private int id;
    private int accountId;
    private String userId;
    private String content;
    private Timestamp createdAt;
    private Timestamp updatedAt;
    
    public PostBean() {
    }
    
    public PostBean(int id, int accountId, String userId, String content, Timestamp createdAt, Timestamp updatedAt) {
        setId(id);
        setAccountId(accountId);
        setUserId(userId);
        setContent(content);
        setCreatedAt(createdAt);
        setUpdatedAt(updatedAt);
    }
    
    public int getId() {
        return this.id;
    }
    
    public void setId(int id) {
        this.id = id;
    }
    
    public int getAccountId() {
        return this.accountId;
    }
    
    public void setAccountId(int accountId) {
        this.accountId = accountId;
    }
    
    public String getUserId() {
        return this.userId;
    }
    
    public void setUserId(String userId) {
        this.userId = userId;
    }
    
    public Timestamp getCreatedAt() {
        return this.createdAt;
    }
    
    public void setCreatedAt(Timestamp createdAt) {
        this.createdAt = createdAt;
    }
    
    public Timestamp getUpdatedAt() {
        return this.updatedAt;
    }
    
    public void setUpdatedAt(Timestamp updatedAt) {
        this.updatedAt = updatedAt;
    }
    
    public String getContent() {
        return this.content;
    }
    
    public void setContent(String content) {
        this.content = content;
    }
}

【PostModel】

package jp.paiza.model;

import java.util.*;
import java.time.*;
import jp.paiza.bean.*;
import java.sql.*;
import jp.paiza.bean.AccountBean;

public class PostModel {

    public List<PostBean> findAll() {
        PostBean[] p = {
            new PostBean(
                    1,
                    1,
                    "kyoko", 
                    "おはよう",
                    Timestamp.valueOf(LocalDateTime.of(2025, 1, 1, 13, 0)), 
                    Timestamp.valueOf(LocalDateTime.of(2025, 1, 1, 13, 0))),
            new PostBean(
                    2,
                    1,
                    "kyoko", 
                    "こんにちは",
                    Timestamp.valueOf(LocalDateTime.of(2025, 2, 1, 13, 0)), 
                    Timestamp.valueOf(LocalDateTime.of(2025, 2, 1, 13, 0))),
            new PostBean(
                    3,
                    1,
                    "kyoko", 
                    "こんばんは",
                    Timestamp.valueOf(LocalDateTime.of(2025, 3, 1, 13, 0)), 
                    Timestamp.valueOf(LocalDateTime.of(2025, 3, 1, 13, 0)))
        };
        ArrayList<PostBean> l = new ArrayList<>(Arrays.asList(p));
        return l;
    }
}

【PostServlet】

package jp.paiza.servlet;

import java.io.*;
import jakarta.servlet.*;
import jakarta.servlet.http.*;
import jakarta.servlet.annotation.*;
import jp.paiza.model.PostModel;
import jp.paiza.bean.AccountBean;

@WebServlet("/posts")
public class PostServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse res)
        throws ServletException, IOException {
        
        doPost(req, res);
    }
    
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse res)
        throws ServletException, IOException {

        PostModel p = new PostModel();
        req.setAttribute("posts", p.findAll());
            
        RequestDispatcher d = 
            req.getRequestDispatcher("/WEB-INF/jsp/posts.jsp");

        d.forward(req, res);
    }
}

【LoginServlet】

package jp.paiza.servlet;

import java.io.*;
import java.util.*;
import java.time.*;
import java.time.format.*;
import jakarta.servlet.*;
import jakarta.servlet.annotation.*;
import jakarta.servlet.http.*;
import jp.paiza.model.*;

@WebServlet("/login")
public class LoginServlet extends HttpServlet {
            
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse res) 
        throws ServletException, IOException {
        
        RequestDispatcher d = 
            req.getRequestDispatcher("/WEB-INF/jsp/login-input.jsp");
        
        d.forward(req, res);
    }
    
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse res) 
        throws ServletException, IOException {
        
        req.setCharacterEncoding("UTF-8");

        String userId = req.getParameter("user-id");
        String password = req.getParameter("password");

        req.getSession().invalidate();
        
        LoginModel m = new LoginModel();
        
        if (m.login(userId, password)) {
            req.getSession().setAttribute("account", m.find(userId));
            RequestDispatcher d = 
                req.getRequestDispatcher("/WEB-INF/jsp/login-result.jsp");
            d.forward(req, res);
        } else {
            res.sendRedirect("login");
        }
    }
}

【posts.jsp】

<%@ page contentType="text/html; charset=UTF-8" import="jp.paiza.bean.PostBean"%>
<%@ taglib prefix="c" uri="jakarta.tags.core" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>投稿一覧</title>
    <link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<jsp:include page="header.jsp" />
<div class="page-background">
    <div class="content-container">
        <h1>投稿一覧</h1>
        <table>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>日時</th>
                    <th>ユーザーID</th>
                    <th>投稿内容</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>
</body>
</html>

【style.css 追記】

.content-container {
    width: 100%;
    max-width: 800px;
    background-color: white;
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    padding: 2rem;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

table th, table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
    white-space: nowrap;
}

table td:last-child {
    white-space: normal;
}

table thead th {
    background-color: #f9fafb;
    font-weight: 600;
    color: #6b7280;
    font-size: 0.8rem;
    text-transform: uppercase;
}

table tbody tr:hover {
    background-color: #f9fafb; 
}

.user-info {
    font-weight: bold;
    color: #111827;
    margin-bottom: 0.75rem;
}

完成コード

【index.jsp】

<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="c" uri="jakarta.tags.core" %>
<%
%>
<html>
<body>
<c:forEach var="i" begin="0" end="5">
    <p>${i}. body content</p>
</c:forEach>
</body>
</html>

【posts.jsp】

<%@ page contentType="text/html; charset=UTF-8" import="jp.paiza.bean.PostBean"%>
<%@ taglib prefix="c" uri="jakarta.tags.core" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>投稿一覧</title>
    <link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<jsp:include page="header.jsp" />
<div class="page-background">
    <div class="content-container">
        <h1>投稿一覧</h1>
        <table>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>日時</th>
                    <th>ユーザーID</th>
                    <th>投稿内容</th>
                </tr>
            </thead>
            <tbody>
            <c:forEach var="post" items="${posts}">
                <tr>
                    <td>${post.id}</td>
                    <td>${post.createdAt}</td>
                    <td>${post.userId}</td>
                    <td>${post.content}</td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
    </div>
</div>
</body>
</html>

【c:forEach】

コレクションを反復処理したり、指定された回数だけ繰り返し処理をするために使用します。

構文には主に2つの形式があります。

<c:forEach var="変数名" begin="開始するインデックス" end="終了するインデックス">
    body content
</c:forEach>
<c:forEach var="変数名" items="反復対象のコレクション">
    body content
</c:forEach>

API

Jakarta Standard Tag Library
https://jakarta.ee/ja/specifications/tags/

Jakarta Expression Language
https://jakarta.ee/ja/specifications/expression-language/

プログラミング学習 > 新・Servlet/JSP入門編 > 新・Servlet/JSP入門編6: アクションタグについて学習しよう > コアライブラリ2 - 繰り返し処理 c:forEach

新・Servlet/JSP入門編6: アクションタグについて学習しよう

＃08:コアライブラリ2 - 繰り返し処理 c:forEach

入力コード

完成コード

関連講座

API