はじめに
このプロジェクトでは、コースリストにページネーション機能を実装する方法を学びます。ページネーションはフロントエンドのウェブ開発における重要な機能であり、このプロジェクトでは 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 は次の通りです。
まとめ
おめでとうございます！このプロジェクトを完了しました。LabEx でさらに多くの実験を行い、スキルを向上させることができます。
