ReactJS - ページネーション：ビギナーズガイド

こんにちは、未来のReact開発者さんたち！今日は、ReactJSのページネーション世界へのエキサイティングな旅を始めます。codingの経験がなくても心配しないでください - 私があなたの親切なガイドとして、すべてをステップバイステップで説明します。コーヒーを一杯取り、一緒に潜り込んでみましょう！

ページネーションとは？

コードに飛び込む前に、まずページネーションとは何かを理解しましょう。あなたが本を読んでいるとします。すべてのページを一度に見せるのではなく、本は管理しやすいチャンクに分けられています。これが、あなたのウェブコンテンツに対してページネーションが行うことです！

ウェブ開発では、ページネーションは大量のデータをより小さく、管理しやすい部分に分ける技術です。本に複数のページがあり、それぞれのページがコンテンツの一部を表示するのと同じです。

Reactでページネーションを使う理由

さて、あなたはきっと「ページネーションを使う意味は何だろう？」と思っていますよね。ここで小さな話をします。

昔々、あるReactアプリが10,000項目を単一のページに表示しようとしました。その可怜しいアプリは苦しみ、噴き出し、最終的にクラッシュし、ユーザーを苛立たせました。しかし、英雄のページネーションが現れて、10,000項目を10項目ずつのきれいなページに分けました。アプリはスムーズに動作し、ユーザーは喜び、皆が幸せに暮らしました。

この話の教訓は何かというと、ページネーションは以下の点で役立ちます：

1. パフォーマンスの向上
2. ユーザー体験の向上
3. ナビゲーションの容易さ

Reactでページネーションを始める

「なぜ」を理解したので、コードに手を付けてみましょう！

ステップ1：プロジェクトの設定

まず、新しいReactプロジェクトを作成します。まだしていない場合は、コンピュータにNode.jsとnpm（Nodeパッケージマネージャー）をインストールしてください。そして、ターミナルを開き、以下のコマンドを実行します：

npx create-react-app react-pagination-demo
cd react-pagination-demo
npm start

これで新しいReactプロジェクトが作成され、開発サーバーが起動します。

ステップ2：必要なパッケージのインストール

このチュートリアルでは、人気のあるページネーションライブラリ「react-paginate」を使います。インストールしましょう：

npm install react-paginate

ステップ3：シンプルなページネーションコンポーネントの作成

まず、「src」フォルダに「Pagination.js」という新しいファイルを作成し、以下のコードを追加します：

import React, { useState, useEffect } from 'react';
import ReactPaginate from 'react-paginate';

const Pagination = ({ data, itemsPerPage }) => {
const [currentItems, setCurrentItems] = useState([]);
const [pageCount, setPageCount] = useState(0);
const [itemOffset, setItemOffset] = useState(0);

useEffect(() => {
const endOffset = itemOffset + itemsPerPage;
setCurrentItems(data.slice(itemOffset, endOffset));
setPageCount(Math.ceil(data.length / itemsPerPage));
}, [itemOffset, itemsPerPage, data]);

const handlePageClick = (event) => {
const newOffset = (event.selected * itemsPerPage) % data.length;
setItemOffset(newOffset);
};

return (
<>
<div className="items-list">
{currentItems.map((item, index) => (
<div key={index}>{item}</div>
))}
</div>
<ReactPaginate
breakLabel="..."
nextLabel="次 >"
onPageChange={handlePageClick}
pageRangeDisplayed={5}
pageCount={pageCount}
previousLabel="< 前へ"
renderOnZeroPageCount={null}
/>
</>
);
};

export default Pagination;

これを分解すると：

1. 必要な依存関係をインポートします。
2. Paginationコンポーネントを作成し、dataとitemsPerPageをプロパティとして受け取ります。
3. useStateフックを使って現在の項目、ページ数、項目のオフセットを管理します。
4. useEffectフックを使って、現在のページに基づいて表示する項目を計算します。
5. handlePageClick関数は、ユーザーがページ番号をクリックしたときにオフセットを更新します。
6. 現在の項目とReactPaginateコンポーネントをレンダリングします。

ステップ4：ページネーションコンポーネントの使用

さて、PaginationコンポーネントをApp.jsで使います：

import React from 'react';
import Pagination from './Pagination';
import './App.css';

function App() {
const data = Array.from({ length: 100 }, (_, i) => `項目 ${i + 1}`);

return (
<div className="App">
<h1>React ページネーション デモ</h1>
<Pagination data={data} itemsPerPage={10} />
</div>
);
}

export default App;

ここでは、100項目の配列を作成し、Paginationコンポーネントに渡し、itemsPerPageを10に設定しています。

ステップ5：スタイルの追加

ページネーションを少し魅力的に見せるために、基本的なスタイルを追加します。以下をApp.cssに追加してください：

.App {
text-align: center;
font-family: Arial, sans-serif;
}

.items-list {
margin-bottom: 20px;
}

ul {
list-style-type: none;
padding: 0;
}

li {
display: inline-block;
margin: 0 5px;
}

li a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;
border: 1px solid #ddd;
}

li a:hover {
background-color: #ddd;
}

li.active a {
background-color: #4CAF50;
color: white;
border: 1px solid #4CAF50;
}

結論

そして、ここまでで簡単だが効果的なページネーションシステムを作成しました！ページネーションは、ピザを切るのと同じで - コンテンツをより消化しやすく、ユーザーにとって楽しみにするものです。

以下に、私たちが学んだことを簡単にまとめます：

概念	説明
ページネーション	大量のデータを小さく、管理しやすい部分に分ける技術
react-paginate	簡単に使えるページネーションコンポーネントを提供するReactライブラリ
useState	フункциональコンポーネント内で状態を管理するためのReactフック
useEffect	コンポーネント内でサイドエフェクトを実行するためのReactフック

Reactを学び続ける中で、あなたはページネーションをカスタマイズし、改善する多くの方法を見つけるでしょう。もしかしたら検索機能を追加するかもしれませんし、もっと複雑なデータフェッチシステムを作成することもあるかもしれません。可能性は無限です！

覚えておいてください、React（または他のプログラミングスキル）をマスターする鍵は練習です。ですから、このコードを試してみて、ものを壊し、間違った場所を見つけて学びましょう。それが私たちが開発者として成長する方法です。

ハッピーコーディング、そしてあなたのReactアプリが常に完璧にページネーションされることを祈っています！

Credits: Image by storyset