ページネーション機能 | フロントエンド Web 開発 | コース概要

はじめに

このプロジェクトでは、コースリストにページネーション機能を実装する方法を学びます。ページネーションはフロントエンドのウェブ開発における重要な機能であり、このプロジェクトでは JSON ファイルからデータを取得し、ページネーション形式でデータを表示し、前ページと次ページの機能を実装するプロセスを学びます。

👀 プレビュー

🎯 タスク

このプロジェクトでは、以下のことを学びます。

Axios ライブラリを使用して JSON ファイルからデータを取得する方法
コースデータをページネーション形式で表示し、1 ページに 5 件のアイテムを表示する方法
前ページと次ページのボタンの機能を実装する方法
適切な場合（最初のページと最後のページ）に前ページと次ページのボタンを無効にする方法
現在のページ番号と総ページ数を表示するようにページネーション表示を更新する方法

🏆 達成目標

このプロジェクトを完了した後、以下のことができるようになります。

Axios を使用して JSON ファイルからデータを取得する
コースリストにページネーション機能を実装する
前ページと次ページのボタンとのユーザーインタラクションを処理する
現在のページに基づいてボタンを条件付きで無効にする
現在のページと総ページ数を表示するように UI を更新する

プロジェクト構造のセットアップ

このステップでは、プロジェクトファイルと構造をセットアップします。以下の手順に従ってこのステップを完了させてください。

プロジェクトフォルダを開きます。ディレクトリ構造は次の通りです。

├── css
│   └── bootstrap.css
├── index.html
└── js
    ├── axios.js
    ├── carlist.json
    └── index.js

この構造において：

css/bootstrap.css は、プロジェクトで使用される Bootstrap のスタイルファイルです。
index.html は、メインのウェブページです。
js/carlist.json は、リクエストに必要なデータファイルです。
js/axios.js は、リクエストに使用される Axios のファイルです。
js/index.js は、完成させる必要がある JavaScript ファイルです。

WebIDE の右下隅にある Go Live ボタンをクリックして、プロジェクトを実行します。

次に、VM の上部にある「Web 8080」を開き、手動でページを更新すると、ページが表示されます。効果は次の通りです。

JSON ファイルからデータを取得する

このステップでは、carlist.json ファイルからデータを取得し、data 変数に格納する方法を学びます。

js/index.js ファイルを見つけ、// TODO: Requesting data from the carlist.json file コメントを見つけます。
axios.get() メソッドを使用して、./js/carlist.json ファイルからデータを取得します。
データが取得されたら、data 変数に格納します。
アイテムの総数を 1 ページあたりのアイテム数（5）で割ることで、最大ページ数を計算します。この値を maxPage 変数に格納します。
showPagination() 関数を呼び出し、maxPage と pageNum（デフォルトでは 1 に設定されています）を引数として渡して、現在のページ番号と総ページ数を表示します。
getPageData() 関数を呼び出し、data を引数として渡して、最初のページ（アイテム 1 - 5）のデータを取得します。これを pageData 変数に格納します。
renderHtml() 関数を呼び出し、pageData を引数として渡して、最初のページの HTML をレンダリングします。

あなたのコードは次のようになるはずです。

let data;
let pageData;
// TODO: Requesting data from the carlist.json file
axios.get("./js/carlist.json").then((res) => {
  data = res.data;
  maxPage = Math.ceil(data.length / 5);
  showPagination(maxPage, pageNum);
  pageData = getPageData(data);
  renderHtml(pageData);
});

前ページ機能の実装

このステップでは、前ページボタンの機能を実装する方法を学びます。

前ページボタンのクリックイベントハンドラー (prev.onclick) を見つけます。
イベントハンドラーの中で、まず次ページボタンから disabled クラスを削除します (next.classList.remove("disabled"))。
pageNum 変数を 1 減らして、前のページに移動します。
pageNum が 1 以下の場合、最初のページにいることを意味するので、前ページボタンに disabled クラスを追加し (this.classList.add("disabled"))、pageNum を 1 に設定します。
showPagination() 関数を呼び出し、maxPage と pageNum を引数として渡して、ページネーション表示を更新します。
getPageData() 関数を呼び出し、data を引数として渡して、現在のページのデータを取得します。これを pageData 変数に格納します。
renderHtml() 関数を呼び出し、pageData を引数として渡して、現在のページの HTML をレンダリングします。

あなたのコードは次のようになるはずです。

// Click on the previous page
let prev = document.getElementById("prev");
prev.onclick = function () {
  // TODO
  next.classList.remove("disabled");
  pageNum--;
  if (pageNum <= 1) {
    this.classList.add("disabled");
    pageNum = 1;
  }
  showPagination(maxPage, pageNum);
  pageData = getPageData(data);
  renderHtml(pageData);
};

次ページ機能の実装

このステップでは、次ページボタンの機能を実装する方法を学びます。

次ページボタンのクリックイベントハンドラー (next.onclick) を見つけます。
イベントハンドラーの中で、まず前ページボタンから disabled クラスを削除します (prev.classList.remove("disabled"))。
pageNum 変数を 1 増やして、次のページに移動します。
pageNum が maxPage 以上の場合、最後のページにいることを意味するので、次ページボタンに disabled クラスを追加し (this.classList.add("disabled"))、pageNum を maxPage に設定します。
showPagination() 関数を呼び出し、maxPage と pageNum を引数として渡して、ページネーション表示を更新します。
getPageData() 関数を呼び出し、data を引数として渡して、現在のページのデータを取得します。これを pageData 変数に格納します。
renderHtml() 関数を呼び出し、pageData を引数として渡して、現在のページの HTML をレンダリングします。

あなたのコードは次のようになるはずです。

// Click on the next page
let next = document.getElementById("next");
next.onclick = function () {
  // TODO
  prev.classList.remove("disabled");
  pageNum++;
  if (pageNum >= maxPage) {
    this.classList.add("disabled");
    pageNum = maxPage;
  }
  showPagination(maxPage, pageNum);
  pageData = getPageData(data);
  renderHtml(pageData);
};

これで、コースリストのページネーション機能の実装が完了しました。前ページと次ページのボタンをクリックして、コースデータが正しく表示されることを確認できます。

すべての機能が完了した gif は次の通りです。