React + TypeScript + vte.cxで簡単なWebアプリを作ってみた② ページネーション編

# はじめに
前回作った[React + TypeScript + vte.cxで簡単なWebアプリを作ってみた①基本的なCRUDアプリ](https://qiita.com/cawauchi/items/c40db4b1a8ae1569c77b)
vte.cxのページネーション機能を使って今回はReactでページネーションを機能を実装しました。

# 今回作ったアプリ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/660329/b0dd5643-de76-0ad4-8b70-03e795300a21.png)

前回作ったアプリを基にページネーション機能の実装を行いました。

# ページネーション is 何
ざっくり言うとブログとかでページ数を区切るためのものです。
![](https://www.leadplus.net/hs-fs/hubfs/pagination.jpg?width=800&name=pagination.jpg)

こんな感じのですがほとんどの人がネット上でみたことがあると思います。

実装する以前はただ情報を見つける時の労力を減らすためだけのものだと思っていたのですが今回実装してみてそれ以外の良い効果もあるのだと初めて気づくことができました。

前回のアプリを見てみましょう。
登録した情報をページに分けることなくそのままずらっと表示させています。
>前回のページネーション実装前の情報一覧
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/660329/d571636b-6f31-3419-099e-b67a34d86acb.png)

でもこれってデータが少ない時は問題ないですけどアプリによっては登録件数1000件,2000件下手したら1万件とか全然ザラだと思います。

それをそのまま全件表示してしまうと読み込みにもめちゃめちゃ時間がかかりますし、1万件のデータの中から7434件目のデータを見るといった時にページ分けしてないと見つけるのにめちゃめちゃ時間が掛かっちゃったりして精神的にもデータの負荷的にも時間的にもかなり地獄なわけです。

と言うことでいろいろな負荷を減らすためのページネーションを実装しました。

余談ですが
ページ = pageなので
ページネーション = pag「e」nation
だと思って途中までずっとそう書いていたのですが正しくは
pag「i」nationらしいです笑

# Pagination.tsx(ページの切り替えを担当するコンポーネント)
今回は前回作成したUserInfo.tsxコンポーネントをいじるのに加えて、Pagination.tsxと言うコンポーネントを作りました。

まずページネーションのロジックを管理しているPagination.tsxコンポーネントの全体図です

```Pagination.tsx
import * as React from 'react'
import { useState, useEffect, useRef } from 'react'

interface Props {
    sum: number
    per: number
    onChange: (e: { page: number }) => void
}

const Pagination = (props: Props) => {
    const [currentPage, setPage] = useState(1)
    const isFirstRender = useRef(true)

    // 初期にはuseEffectでprops.onChangeを実行しないようにしている
    useEffect(() => {
        if (isFirstRender.current) {
            isFirstRender.current = false
            return
        }
        // currentPageに変化があったときに親コンポーネントにcurrentpage番号を渡す
        props.onChange({ page: currentPage });
    }, [currentPage])

    const totalPage: number = Math.ceil(props.sum / props.per)
    // 切り上げをしていてtotalPageが4.3などだった場合5にしている
    const totalPageArray: number[] = Array.from(new Array(totalPage)).map((_, i) => i++);
    // 「前へ」ボタンを押したときの処理
    const handleBack = (): void => {
        //1ページ目の場合の処理
        if (currentPage === 1) {
            return
        }

        setPage(currentPage - 1)
    }

    // 「次へ」ボタンを押したときの処理
    const handleForward = (): void => {
        //最後のページで押したときの処理
        if (currentPage === totalPage) {
            return
        }

        setPage(currentPage + 1)
    }

    // 「最初」ボタンを押したときの処理
    const handleToFirstPage = (): void => {
        setPage(1)
    }

    // 「最後」ボタンを押したときの処理
    const handleToLastPage = (): void => {
        setPage(totalPage)
    }

    //ページボタンを押したときの処理
    const handleMove = (page: number): void => {
        setPage(page)
    }

    return (
        <>
            <button onClick={handleToFirstPage}>最初へ</button>
            <button onClick={handleBack}>&laquo;前へ</button>
            {totalPageArray.map(page => {
                // 配列に格納されている番号は0スタートなので最初に+1している
                page++
                return page === currentPage ? (
                    <span style={{ cursor: 'pointer', margin: '0 5px' }} key={page} onClick={() => handleMove(page)}>
                        {page}
                    </span>
                ) : (
                        <span style={{ cursor: 'pointer', margin: '0 5px' }} key={page} onClick={() => handleMove(page)}>{page}</span>
                    )
            })}
            <button onClick={handleForward}>次へ&raquo;</button>
            <button onClick={handleToLastPage}>最後へ</button>
        </>
    )
}

export default Pagination

```

ページネーションでは上記のサイトを参考にしました。
[React + Hooksで作るページネーションコンポーネント](https://qiita.com/akashixi/items/d92496eb0cc71e78ddf9)

ページネーションコンポーネントで必要な情報は、

ページ件数と1ページあたりどのくらいの件数を載せるか

この2点だけです。

今回は1ページあたり5件、総件数20件数未満で取得していますがもしこの総件数が300件でも1万件でもちゃんと動作されるようになっています。

例えば総件数30件、1ページには8件のせたいとします。

こうするとページ数は何ページになると思いますか？

30(総件数) ÷　8(1ページあたりの件数)

と最初は計算しましたがこれだと答えが3.75となってしまいます。
小数点が出てしまうと、ページ数がおかしいことになってしまいます。

そこで今回は
ceilメソッドを使って切り上げています。

[Math.ceil( ) Javascript公式サイト](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/ceil)

```tsx
const totalPage: number = Math.ceil(props.sum / props.per)
```

こうすることで

30(総件数) ÷　8(1ページあたりの件数)

とした時、3.75を切り上げて4ページとしてくれます。
これで正しいページ表示ができます。

データを登録や消去した時に総件数が変わります。

これでページ数が導けました。

でもこれだけではダメで、ページネーションは
```1,2,3,4,5```このように連番に表示される必要があります。

どうするかと言うと```Array.form()```を使います。


```tsx
// 連番の生成
// 配列はそれぞれの場所が `undefined` で初期化されるため、
// 以下の `v` のの値は `undefined` になる
Array.from({length: 5}, (v, i) => i);
// [0, 1, 2, 3, 4]
```

[Array.from( ) Javascript公式サイト](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/from)

公式を参考にしました。

このコンポーネントでは

```tsx
const totalPageArray: number[] = Array.from(new Array(totalPage))
.map((_, i) => i++);
```
とすることで

```tsx
const totalPageArray = [1,2,3.....n]
```

上記のような連番の数字が入った配列を作ることができています。

これを

```tsx
return (
        <>
            {totalPageArray.map(page => {
                // 配列に格納されている番号は0スタートなので最初に+1している
                page++
                return page === currentPage ? (
                    <span style={{ cursor: 'pointer', margin: '0 5px' }} key={page} onClick={() => handleMove(page)}>
                        {page}
                    </span>
                ) : (
                        <span style={{ cursor: 'pointer', margin: '0 5px' }} key={page} onClick={() => handleMove(page)}>{page}</span>
                    )
            })}
    )
```
として
map関数を使い、totalPageArrayに入っている数字の数だけ

```HTML
<span onClick={() => handleMove(page)}>1</span>
<span onClick={() => handleMove(page)>2</span>
<span onClick={() => handleMove(page)>3</span>
```

といったタグを作っています。このタグにはonClickイベントが入っており、押下するとそのタグが持っている数字(ページ)を引数にしたページネーション操作をすることができます。

# UserInfo.tsx(情報の一覧表示をするコンポーネント)

```UserInfo.tsx
import * as React from 'react'
import { useState, useEffect, useContext, useRef } from 'react'
import axios from 'axios'
import UserList from './UserList'
import { Store } from './App'
import Pagination from './Pagination'

const UserInfo = () => {
    const [users, setUsers] = useState([])
    const [sumPageNumber, setSumPageNumber] = useState(0)
    const [currentPage, setCurrentPage] = useState(1)
    const { dispatch } = useContext(Store)

    // 1ページに表示させる件数
    const displayPage = 5

    // コンポーネントマウント後に以下のページインデックスを作成する関数が実行される
    // 初期描画の実行
    useEffect(() => {
        getTotalFeedNumber()
    }, [])

    // 初期描画後
    // 最初にページインデックスを作成終了後、handlePaginateで1ページを指定している
    const mounted = useRef(false)
    useEffect(() => {
        if (mounted.current) {
            handlePaginate(1)
            console.log('useEffect作動sumPageNumber')
        } else {
            mounted.current = true
        }
    }, [sumPageNumber])


    //ページの取得処理
    let retryCount = 0
    // この処理をgetTotalFeedNumberを処理したときに実行したい
    //page番号を使ってAPIを叩く処理
    const handlePaginate = async (page: number) => {
        const LIMIT_RETRY_COUNT = 10
        try {
            dispatch({ type: 'SHOW_INDICATOR' })
            axios.defaults.headers['X-Requested-With'] = 'XMLHttpRequest'

            await axios.get(`/d/users?n=${page}&l=${displayPage}`).then((res) => {
                if (res && res.data && res.data.length) {
                    setUsers(res.data)
                }
                setCurrentPage(page)
            }).then(() => {
                retryCount = 0
                dispatch({ type: 'HIDE_INDICATOR' })
            })

        } catch (e) {
            if (e.response.data.feed.title === 'This process is still in progress. Please wait.') {
                retryCount++
                console.log(retryCount)
                if (retryCount < LIMIT_RETRY_COUNT) {
                    handlePaginate(page)
                } else {
                    dispatch({ type: 'HIDE_INDICATOR' })
                    alert('error:' + e)
                    alert('Process error')
                }
            }

            if (e.response.data.feed.title === 'Please make a pagination index in advance.') {
                retryCount++
                console.log(retryCount)
                if (retryCount < LIMIT_RETRY_COUNT) {
                    handlePaginate(page)
                } else {
                    dispatch({ type: 'HIDE_INDICATOR' })
                    alert('error:' + e)
                    alert('Not create pagination index')
                }
            }
        }
    }

    // paginationIndexを作成する処理
    const getTotalFeedNumber = async () => {
        try {
            dispatch({ type: 'SHOW_INDICATOR' })
            axios.defaults.headers['X-Requested-With'] = 'XMLHttpRequest'

            await axios.get(`/d/users?_pagination=1,4&l=${displayPage}`).then((res) => {
                setSumPageNumber(res.data.feed.subtitle)
            }).then(() => {
                dispatch({ type: 'HIDE_INDICATOR' })
            })
        } catch (e) {
            alert('error:' + e)
        }
    }

    return (
        <>
            <p>総件数:<span style={{ color: 'blue' }}>{sumPageNumber}</span>件</p>
            <p>現在<span style={{ color: 'blue' }}>{currentPage}</span>ページ目</p>
            <UserList info={users} getFormData={getTotalFeedNumber} />
            <Pagination sum={sumPageNumber} per={displayPage} onChange={e => handlePaginate(e.page)} />
        </>
    )
}

export default UserInfo
```

今回はページを分けての表示になります。
コンポーネントのレンダリング時に少し細工が必要になります。

Ajax通信をする際にページを分けて情報を取得する必要があります。

この情報の取得方法は[公式ドキュメント](https://vte.cx/documentation.html#index06)に記載されています。

ページを分けて取得するには2回の通信が必要になります。

####1回目の通信

```tsx
await axios.get(`/d/users?_pagination=1,4&l=5`)
```
ここではインデックスを貼ると言う作業をします。

このインデックスを貼るという表現がAPIを叩くという表現と同じくらい初心者からするとイメージできない言葉になっているので調べてみました。

#INDEXを貼る is 何
まずINDEXという言葉からです。
>作るとデータ参照が速くなるやつ
大量のレコードが入っているテーブルから1行のレコードを検索するのに
頭から順番に検索したら時間がかかります。
INDEXを作成すると、データテーブルとは別に検索用に最適化された状態でデータが保存されます。
このINDEXを使うことで、目的のレコードを迅速に見つけて取り出すことが可能になります。

引用元:[MySQLでインデックスを貼る時に読みたいページまとめ(初心者向け）](https://qiita.com/C058/items/1c9c57f634ebf54d99bb)

このINDEXを作ることをINDEXを貼ると言います。

例えばめちゃめちゃ分厚い辞書の中から必要な情報にアクセスするにはかなり時間がかかるし疲れます。
でももしそれが自分に必要そうな情報だけがのっているポケットサイズの辞書だとするとかなり見つかりやすくなります。

![](https://s3-ap-northeast-1.amazonaws.com/goodspress/cms/wp-content/uploads/2018/01/0124-poch-3-539x720.jpg)

右がインデックスを貼らずのそのままのデータ
左がインデックス

ちなみにこのインデックスは1個だけでなく、何個も作ることができます。

#### 2回目の通信
```tsx
await axios.get(`/d/users?n=1&l=5`)
```
nにはインデックスのうち欲しいページの数字を
lにはページの件数をそれぞれ記入します。

### ※1回目と2回目のlの数字が違うとエラーを起こしてしまうので必ず統一しましょう。

UserInfo.tsxでは

#### 1回目のAjax通信

```UserInfo.tsx
await axios.get(`/d/users?_pagination=1,4&l=${displayPage}`).then((res) => {
                setSumPageNumber(res.data.feed.subtitle)
            })
```
```await axios.get(`/d/users?_pagination=1,4&l=${displayPage}`)```によりそのインデックスの件数を取得することができます。今回thenを使ってresという引数で渡したあとにsumPageNumberというstateに格納しています。

#### 2回目のAjax通信

```UserInfo.tsx
await axios.get(`/d/users?n=${page}&l=${displayPage}`).then((res) => {
                if (res && res.data && res.data.length) {
                    setUsers(res.data)
                }
                setCurrentPage(page)
            })
```
```await axios.get(`/d/users?n=${page}&l=${displayPage}`)```により、今度はそのインデックスにあるページのデータを取得することができています。
先ほどのようにthenを使ってresという引数で渡したあとにusersというstateに格納しています。

として1回目と2回目の1ページあたりの件数を

```tsx
const displayPage = 5 
```
とすることで共通の数字に必ずなるようにしています。

ではインデックス周りの説明ができたので、ページネーションコンポーネントとどのように組み合わせて作動させているのか説明していきます。

UserInfoコンポーネントでは

```UserInfo.tsx
const [users, setUsers] = useState([])
const [sumPageNumber, setSumPageNumber] = useState(0)
const [currentPage, setCurrentPage] = useState(1)
```

として３つのstateを管理しています。
1つめは前回でも使ったusersのデータを格納しているstate
2つめは総件数
3つめは現在何ページにいるのかを管理しています。

まずuseEffectで

```tsx
    useEffect(() => {
        getTotalFeedNumber()
    }, [])
```

getTotalFeedNumber()というメソッドを初回レンダリング時のみ作動させています。

```tsx
const getTotalFeedNumber = async () => {
        try {
            dispatch({ type: 'SHOW_INDICATOR' })
            axios.defaults.headers['X-Requested-With'] = 'XMLHttpRequest'

            await axios.get(`/d/users?_pagination=1,4&l=${displayPage}`).then((res) => {
                setSumPageNumber(res.data.feed.subtitle)
            }).then(() => {
                dispatch({ type: 'HIDE_INDICATOR' })
            })
        } catch (e) {
            alert('error:' + e)
        }
    }
```

これは先ほど説明したインデックスを貼るメソッドあり、総件数を取得しています。

次に

```tsx
    const mounted = useRef(false)
    useEffect(() => {
        if (mounted.current) {
            handlePaginate(1)
            console.log('useEffect作動sumPageNumber')
        } else {
            mounted.current = true
        }
    }, [sumPageNumber])
```
useEffectでsumPageNumberに変化があった時にhandlePaginateメソッドが作動するようになっています。

こちらのuseEffectは初回レンダリング時に作動しないようにuseRefというhookを使って制御しています。
この制御をしないと初期レンダリングの際にgetTotalFeedNumberが作動し、sumPageNumberの数値が変わり、最初のページ表示時の挙動がおかしくなってしまいます。

ではsumPageNumberに変化があった時に作動するhandlePaginateメソッドを見てみましょう。

```tsx
const handlePaginate = async (page: number) => {
        const LIMIT_RETRY_COUNT = 10
        try {
            dispatch({ type: 'SHOW_INDICATOR' })
            axios.defaults.headers['X-Requested-With'] = 'XMLHttpRequest'

            await axios.get(`/d/users?n=${page}&l=${displayPage}`).then((res) => {
                if (res && res.data && res.data.length) {
                    setUsers(res.data)
                }
                setCurrentPage(page)
            }).then(() => {
                retryCount = 0
                dispatch({ type: 'HIDE_INDICATOR' })
            })

        } catch (e) {
            if (e.response.data.feed.title === 'This process is still in progress. Please wait.') {
                retryCount++
                console.log(retryCount)
                if (retryCount < LIMIT_RETRY_COUNT) {
                    handlePaginate(page)
                } else {
                    dispatch({ type: 'HIDE_INDICATOR' })
                    alert('error:' + e)
                    alert('Process error')
                }
            }

            if (e.response.data.feed.title === 'Please make a pagination index in advance.') {
                retryCount++
                console.log(retryCount)
                if (retryCount < LIMIT_RETRY_COUNT) {
                    handlePaginate(page)
                } else {
                    dispatch({ type: 'HIDE_INDICATOR' })
                    alert('error:' + e)
                    alert('Not create pagination index')
                }
            }
        }
    }
```
このメソッドはページネーションをするものなのですが、もしページネーションをするときにインデックスが貼られていなかった場合、最大10回のAjax通信のリトライをするようになっています。

handlePaginateの引数は

```tsx
await axios.get(`/d/users?n=${page}&l=${displayPage}`)
```

この```${page}```部分に入ります。
こうすることで欲しいページの情報をusersに格納することができます。

```tsx
return (
        <>
            <Pagination sum={sumPageNumber} per={displayPage} onChange={e => handlePaginate(e.page)} />
        </>
    )
```

PaginationコンポーネントにはpropsでhandlePaginate(e.page)を渡しており、Paginationコンポーネントの持っているstateであるcurrentPageの値が変わるごとにuseEffectで```props.onChange({page:currentPage})```
として引数である現在のページ番号を親に渡しています。

```tsx
const Pagination = (props: Props) => {
    const [currentPage, setPage] = useState(1)

    const isFirstRender = useRef(true)

    // 初期にはuseEffectでprops.onChangeを実行しないようにしている
    useEffect(() => {
        if (isFirstRender.current) {
            isFirstRender.current = false
            return
        }
        // currentPageに変化があったときに親コンポーネントにcurrentpage番号を渡す
        props.onChange({ page: currentPage });
    }, [currentPage])
```

このようにすることで現在のページネーションの番号のデータが逐一取得できるようになっています。