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

新人

「一覧画面を作っていると、データが多くなって画面が長くなってしまいました。よく見るページ番号の表示はどうやって作るんですか？」

先輩

「それがページネーションだね。Spring MVCとThymeleafを使えば、基本的な考え方だけで実装できるよ。」

新人

「ページ番号が並んでいる仕組みが、いまいちイメージできなくて……。」

先輩

「一覧を分割して表示する仕組みとして考えると、理解しやすくなるよ。」

1. ページネーションとは何か（一覧画面での役割）

ページネーションとは、一覧画面に表示するデータを複数のページに分割し、ページ番号を使って切り替えながら表示する仕組みのことです。Spring MVCの画面開発では、検索結果や一覧表示の場面で頻繁に登場します。

例えば、商品一覧やユーザー一覧などで、すべてのデータを一度に表示してしまうと、画面が非常に長くなり、利用者が目的の情報を探しにくくなります。そこで、一定件数ごとにデータを区切り、ページ番号で移動できるようにするのがページネーション表示です。

Spring MVCのページネーションは、画面側でページ番号を表示し、どのページを表示しているかをサーバーとやり取りしながら制御します。Thymeleafを使うことで、このページ番号表示を分かりやすくHTMLとして表現できます。

初心者の方は、ページネーションを「一覧を分割して表示するための案内板」のようなものだと考えると、役割をイメージしやすくなります。

2. なぜページネーションが必要になるのか

ページネーションが必要になる最大の理由は、画面の見やすさと操作性を保つためです。データ量が増えるほど、一覧画面を一度に表示するのは現実的ではなくなります。

もしページネーションがなければ、スクロールし続けなければ目的の情報にたどり着けず、利用者にとって使いにくい画面になってしまいます。また、サーバー側でも一度に大量のデータを処理することになり、負荷が高くなる原因にもなります。

Spring MVCとThymeleafを使ったWebアプリケーションでは、表示するデータ数と画面構成を意識することが重要です。ページネーションを使うことで、必要な分だけデータを表示し、画面遷移も分かりやすく整理できます。

ページ番号が並んでいる表示は、一見すると難しそうに見えますが、実際には「数字のリストを画面に並べている」だけです。この考え方を押さえることで、Spring MVC ページネーションの理解が一気に進みます。

3. Spring MVCとThymeleafでページネーションを考える基本視点

Spring MVCとThymeleafでページネーションを実装するときは、「サーバー側でページ情報を用意し、画面側でそれをループ表示する」という視点が重要になります。

コントローラでは、現在のページ番号や総ページ数といった情報をModelに設定し、Thymeleafに渡します。Thymeleafでは、その情報を使ってページ番号を繰り返し表示します。

例えば、1ページ目から5ページ目まである場合、「1 2 3 4 5」という数字をループで表示し、それぞれにリンクを付けることでページネーションが完成します。前のページや次のページといった考え方も、この数字の並びとして整理できます。

以下は、ページ番号を表示するための非常にシンプルなThymeleafの例です。


<ul>
    <li th:each="page : ${pageList}">
        <a th:href="@{/list(page=${page})}" th:text="${page}"></a>
    </li>
</ul>

このHTMLでは、pageListというページ番号の一覧をループし、ページ番号リンクを表示しています。Thymeleaf ページ番号初心者の方は、「数字を繰り返し表示しているだけ」という点をまず理解することが大切です。

次に、コントローラ側でページ番号の一覧を用意する簡単な例を見てみましょう。


@Controller
public class PageController {

    @GetMapping("/list")
    public String list(Model model) {
        List<Integer> pageList = Arrays.asList(1, 2, 3, 4, 5);
        model.addAttribute("pageList", pageList);
        return "list";
    }
}

このように、Spring MVC ページネーションの基本は、コントローラでページ情報を作り、Thymeleafでループ表示するというシンプルな構造になっています。

初心者の方は、まず「ページ番号はデータの一種であり、一覧として扱える」という考え方を身につけることで、ページネーション表示への苦手意識がぐっと減っていきます。

4. Thymeleafのループを使ったページ番号の表示方法

ページネーション表示の中心となるのが、Thymeleafのループ処理です。Spring MVCとThymeleafでは、一覧データと同じように、ページ番号も「繰り返し表示する対象」として扱います。

Thymeleafでは、th:each属性を使うことで、コレクションの要素を一つずつ取り出しながらHTMLを生成できます。ページネーションの場合、このコレクションが「ページ番号の一覧」になります。

まず意識したいのは、「ページ番号は特別な存在ではなく、単なる数字のリストである」という点です。Spring MVC ページネーションを理解するためには、この考え方が非常に重要です。

以下は、Thymeleafでページ番号をループ表示する基本的な例です。


<nav>
    <ul>
        <li th:each="page : ${pageList}">
            <a th:href="@{/list(page=${page})}"
               th:text="${page}"></a>
        </li>
    </ul>
</nav>

この例では、pageListに含まれるページ番号を一つずつ取り出し、リンクとして表示しています。画面上では「1 2 3 4 5」といった形でページ番号が並びます。

Thymeleaf ページネーションの基本は、「th:eachでページ番号を回す」という一点に集約されます。まずはこの構文に慣れることが、初心者にとっての第一歩です。

ループ処理が理解できると、前後ページや現在ページの表現も、同じ考え方で拡張できるようになります。

5. コントローラからページ情報を渡す考え方

ページ番号を画面に表示するためには、コントローラ側でページ情報を準備し、Modelを通してThymeleafに渡す必要があります。ここでも大切なのは、「画面はModelにあるデータを表示しているだけ」という視点です。

Spring MVCでは、コントローラが画面表示のための情報をまとめて用意し、その情報をViewに引き渡します。ページネーションの場合、最低限必要なのは「ページ番号の一覧」と「現在のページ番号」です。

まずは、ページ番号の一覧をModelに設定するシンプルな例を見てみましょう。


@Controller
public class ListController {

    @GetMapping("/list")
    public String list(@RequestParam(defaultValue = "1") int page,
                       Model model) {

        List<Integer> pageList = Arrays.asList(1, 2, 3, 4, 5);
        model.addAttribute("pageList", pageList);
        model.addAttribute("currentPage", page);

        return "list";
    }
}

このコントローラでは、現在のページ番号をpageとして受け取り、ModelにcurrentPageという名前で設定しています。また、pageListには表示したいページ番号の一覧を設定しています。

Spring MVC ページ番号ループの仕組みは、「コントローラで用意した情報を、そのままThymeleafが使う」という非常にシンプルな構造です。

初心者の方は、ページネーションを「画面側で計算するもの」ではなく、「サーバー側で用意した結果を表示するもの」として捉えると、設計が分かりやすくなります。

6. 現在ページを判定して表示を切り替える基本

ページネーション表示では、「今どのページを見ているのか」を分かりやすく伝えることが重要です。そのために使われるのが、「現在ページ」という考え方です。

現在ページとは、利用者が今表示しているページ番号のことを指します。Spring MVCとThymeleafでは、この現在ページの値をModelで管理し、画面側で判定に使います。

Thymeleafでは、条件付きの表示を使うことで、現在ページだけ見た目を変えるといった表現が可能です。以下は、現在ページを判定して表示を切り替える基本例です。


<nav>
    <ul>
        <li th:each="page : ${pageList}">
            <span th:if="${page == currentPage}"
                  th:text="${page}"></span>
            <a th:if="${page != currentPage}"
               th:href="@{/list(page=${page})}"
               th:text="${page}"></a>
        </li>
    </ul>
</nav>

この例では、pageとcurrentPageを比較し、現在のページであればリンクではなくテキストとして表示しています。それ以外のページ番号はリンクとして表示されます。

このように、「現在ページかどうか」を条件で分けるだけで、ページネーションの見た目は一気に分かりやすくなります。

Spring MVC ページネーション初心者の方は、「現在ページは単なる数値であり、条件判定に使える」という点をしっかり押さえておくことが大切です。

コントローラ → Model → Thymeleaf → 表示という流れを意識しながら理解することで、ページ番号表示の仕組みが自然と整理されていきます。

7. ページネーション実装で初心者が混乱しやすいポイント

Spring MVCでページネーション表示を実装し始めた初心者が、最初につまずきやすいのは「どこで何を管理しているのか分からなくなる」という点です。ページ番号が画面に表示され、クリックすると別のページが表示されるため、画面側だけで制御しているように見えてしまいます。

しかし、ページネーションの本質は「サーバー側でページ情報を管理し、その結果を画面に表示しているだけ」です。Thymeleafはあくまで表示担当であり、ページ番号を計算したり判断したりしているわけではありません。

よくある混乱の一つが、「ページ番号はHTMLで増やしている」という誤解です。実際には、ページ番号の一覧はコントローラで用意され、それをModel経由でThymeleafに渡しています。Thymeleafでは、その一覧をth:eachでループしているだけです。

もう一つの混乱ポイントは、「現在ページの判定」です。現在ページは特別な仕組みではなく、単なる数値としてModelに入っているだけです。Thymeleafでは、その数値とループ中のページ番号を比較して表示を切り替えています。

以下は、初心者が混乱しがちな処理を整理したシンプルなコントローラ例です。


@Controller
public class SimplePageController {

    @GetMapping("/simpleList")
    public String simpleList(
            @RequestParam(defaultValue = "1") int page,
            Model model) {

        model.addAttribute("pageList", Arrays.asList(1, 2, 3));
        model.addAttribute("currentPage", page);

        return "simpleList";
    }
}

このコードを見ると分かるように、ページネーションに関する情報はすべてModelに集約されています。Spring MVC ページネーション注意点として、まずは「情報の置き場所」を整理して考えることが重要です。

8. 分かりやすいページ番号表示を作るための考え方

ページネーション表示で大切なのは、利用者が「今どこを見ているのか」「どこへ移動できるのか」を直感的に理解できることです。そのためには、ページ番号の並び方と見せ方をシンプルに保つ必要があります。

初心者のうちは、すべてのページ番号を表示しようとして複雑になりがちですが、基本は「必要な数字をループで表示する」だけで十分です。Thymeleaf ページ表示設計では、見た目よりも仕組みの分かりやすさを優先しましょう。

現在ページはリンクにせず、文字として表示するだけでも、利用者には十分伝わります。色や装飾を工夫する前に、「表示を分ける」という考え方を理解することが大切です。

以下は、表示をできるだけ分かりやすくしたページ番号表示の例です。


<nav>
    <ul>
        <li th:each="page : ${pageList}">
            <span th:if="${page == currentPage}">
                [[${page}]]
            </span>
            <a th:if="${page != currentPage}"
               th:href="@{/simpleList(page=${page})}">
                [[${page}]]
            </a>
        </li>
    </ul>
</nav>

このHTMLでは、「今見ているページは押せない」「それ以外は移動できる」というルールを、条件分岐だけで表現しています。ページ番号をループで作る理由は、こうしたルールをまとめて適用できる点にあります。

Spring MVC ページネーション初心者の方は、まず「ループで数字を並べる」「条件で表示を切り替える」という二つの考え方をセットで理解すると、実装が一気に楽になります。

9. ページネーション理解の次に学ぶべきSpring MVCの要素

ページネーション表示の基本が理解できたら、次に学ぶべきなのは「画面遷移時に情報をどう保つか」という視点です。ページ番号だけでなく、検索条件や並び順なども一緒に管理する場面が増えてきます。

ただし、初心者の段階では、すべてを一度に理解しようとする必要はありません。まずは、Modelに複数の値を入れて画面に渡せること、そしてThymeleafでそれを表示に使えることを確認しましょう。

また、リンク設計という考え方も重要になってきます。ページ番号リンクは、単なる画面遷移ではなく、「状態を持った画面遷移」です。この考え方は、Spring MVC全体を理解するうえでの土台になります。

以下は、ページ番号以外の情報も一緒に渡す準備として使えるシンプルな例です。


@Controller
public class NextStepController {

    @GetMapping("/searchList")
    public String searchList(
            @RequestParam(defaultValue = "1") int page,
            @RequestParam(required = false) String keyword,
            Model model) {

        model.addAttribute("currentPage", page);
        model.addAttribute("keyword", keyword);
        model.addAttribute("pageList", Arrays.asList(1, 2, 3, 4));

        return "searchList";
    }
}

このように、ページネーションはSpring MVCの基本要素と密接につながっています。ページ番号をループで表示できるようになった段階で、Spring MVCの画面設計は確実に一段階レベルアップしています。

ThymeleafとModelの関係を意識しながら学習を進めることで、一覧画面や検索画面の実装が、より自然に理解できるようになっていきます。