サービス

技能：エンジニア

技能：デザイナー

技能：ビジネス職

技能：バックオフィス

ジャンル

<blockquote>
<p>この記事は、<a href="https://qiita.com/advent-calendar/2021/dmm" target="_blank">DMMグループAdvent Calendar 2021</a>の14日目の記事です。</p>
</blockquote>

<p>こんにちは。DMMのプラットフォーム(以下PFと略称)事業本部所属の<a href="https://speakerdeck.com/kuwabarakuwabara" target="_blank">佐々木勝春</a>と申します。</p>

<p>私が所属するチームでは現在「DMMポイントクラブ」というDMMのポイントを獲得したりチャージしたり、履歴の確認などができるアプリ(iOS/AndroidとWeb)を運営しております。私はこの両システムのサーバーサイドの開発とWeb版のフロントの開発を担当しております。</p>

<p><a href="https://lp.pointclub.dmm.com/" target="_blank">DMMポイントクラブ｜lp.pointclub.dmm.com</a></p>

<p>&nbsp;</p>

<p>今回はこちらのWeb版<a href="https://www.pointclub.dmm.com/" target="_blank">ポイントクラブ</a>のポイント管理ページにある<strong>ポイント履歴一覧のページネーションを実装する際に工夫した点</strong>についてご紹介させていただきます。</p>

<h2>Web版ポイントクラブのフロントエンドのシステム構成概要</h2>

<p>前提として、まずWeb版ポイントクラブのシステム構成の概要について簡単に説明いたします。 フロントエンドの実装にUIライブラリであるReactを採用していて、 インフラ環境はAWSのCloudFrontとS3を活用してファイルを配信しています。</p>

<p><a href="https://ja.reactjs.org/" target="_blank">React &ndash; ユーザインターフェース構築のための JavaScript ライブラリ｜ja.reactjs.org</a></p>

<h3>本題</h3>

<h2>ポイント履歴一覧のページネーションのデザイン案</h2>

<p>ユーザーのポイントの獲得・消費などのポイント使用履歴一覧や保有しているポイントの有効期限の一覧を、下記のポイント利用情報のセクションで表示します。ポイントの履歴を複数表示するためにページネーションを活用しています。</p>

<p><img alt="f:id:dmmadcale2021:20211207044620j:plain" height="822" src="https://image.dmm-corp.com/f2r8r299kf3sjjxmdnka55t54us6" width="1026" /></p>

<p style="text-align: center;">ポイント利用情報のデザイン原案</p>

<p>&nbsp;</p>

<p style="text-align: center;">&nbsp;</p>

<figure title="ポイント利用情報のデザイン原案">&nbsp;</figure>

<h2>サービス間のシステム構成</h2>

<p>ここで具体的なシステム構成について見ていきます。 上記ポイント履歴情報を取得するにあたって、ブラウザ側でポイントクラブチームで開発したバックエンドのAPIにリクエストして情報を取得し、その結果を表示に利用しています。 ポイントクラブAPI内部ではDMMのPFをはじめとする各マイクロサービスにリクエストを行なうことでデータのやり取りを行なっています。その一つであるDMMポイントに関する機能を提供するポイントAPIにリクエストを行いポイント情報履歴を取得して、それをポイントクラブAPIでクライアント側に適切な形式に加工してあげて返却する構成になっています。</p>

<p><img alt="f:id:dmmadcale2021:20211207044917p:plain" height="652" src="https://image.dmm-corp.com/pu24vxe39rr8f2trq10lggpxqc94" width="928" /></p>

<p style="text-align: center;">システム構成概念図(システムのグルーピングや認証ゲートウェイなどは省略)</p>

<p>&nbsp;</p>

<p style="text-align: center;">&nbsp;</p>

<figure title="システム構成概念図(システムのグルーピングや認証ゲートウェイなどは省略)">&nbsp;</figure>

<p>&nbsp;</p>

<h2>ページネーション実装にあたっての課題</h2>

<p>上述の外部サービスのポイントAPIの利用にあたって一つの課題となったのがポイントの履歴の取得件数が<strong>最大で50件</strong>までという制限でした。 上述のWeb版のポイント履歴のデザインの原案としてはページネーションのページのあるページ数分(今回は4ページ分)ページを表示して、それ以上のページデータを保有している場合は三点リーダで省略表示した後最後のページの数を表示するようなデザイン案でした。</p>

<p>しかし、最大取得件数の制限より上記デザイン原案の最大ページ数の表示の実現が困難になりました。</p>

<p><img alt="f:id:dmmadcale2021:20211207045205p:plain" height="485" src="https://image.dmm-corp.com/bwjgdm8c5z9jo7ddps7nap1gznot" width="836" /></p>

<h2>対応策</h2>

<p>最後のページ数は取得できないものの、下記のようにある指定の表示幅のページ数を表示して(今回の場合は4ページ分)、 それ以上のページ数のデータがある場合は三点リーダーで省略表示し、ページネーション押下毎にページ表示幅以降のデータを取得してきて表示する方法を考えました。この方法であればポイントAPIでの取得最大件数の制約下でも実装できることが分かりました。</p>

<p><img alt="f:id:dmmadcale2021:20211207045421p:plain" height="847" src="https://image.dmm-corp.com/2zdq6g6ao4ur8xzzey8wffjddos3" width="797" /></p>

<p style="text-align: center;">ページネーションデザイン修正案</p>

<p>&nbsp;</p>

<p style="text-align: center;">&nbsp;</p>

<figure title="ページネーションデザイン修正案">&nbsp;</figure>

<h2>対応策の実装方法検討</h2>

<p>上記の対応策を実装するにあたって考慮点がいくつかありました。 各ページインデックス毎のデータを管理しなければならず、また複数ページ表示のためにあらかじめデータを取得しておく必要がありました。 また、ページネーションのクリックイベント時にデータ取得でAPIリクエストする際に、それまでのポイントクラブの実装ではAPIリクエストによるデータ取得用ライブラリの<code>SWR</code>をラップしてHook関数化したものを利用していました。しかし、Hook関数のルールではJavaScript関数内部からHook関数を直接呼ぶことができず、ページネーション実装の部分だけデータ取得のこの実装形式を統一できないなど、もやもやする部分がありました。</p>

<p><a href="https://swr.vercel.app/ja" target="_blank">データ取得のための React Hooks ライブラリ &ndash; SWR｜swr.vercel.app</a></p>

<pre>
<code>const handlePaginate = (selectedItem: { selected: number }) =&gt; {
  const { data } = usePointHistory() // JavaScript関数内部からはHook関数は呼べない
  setCurrentPage(selectedItem.selected);
};</code></pre>

<p><a href="https://ja.reactjs.org/docs/hooks-rules.html#only-call-hooks-from-react-functions" target="_blank">フックのルール &ndash; React</a></p>

<h2>useSWRInfiniteを活用</h2>

<p>ページネーション の実装に関して調査した結果、上述のデータ取得ライブラリ<code>SWR</code>の１機能としてページネーション実装用に&nbsp;<code>useSWRInfinite</code>&nbsp;というモジュールが提供されていることが分かりました。 下記で詳細を見ていきますが、このモジュールを使うことでとても簡単にページネーション関連を実装できることが分かりました。</p>

<p><a href="https://swr.vercel.app/ja/docs/pagination" target="_blank">ページネーション &ndash; SWR｜swr.vercel.app</a></p>

<h2>useSWRInfinite定義</h2>

<pre>
<code>import useSWRInfinite from 'swr/infinite'

// ...
const { data, error, isValidating, mutate, size, setSize } = useSWRInfinite(
  getKey, fetcher?, options?
)</code></pre>

<h4>引数</h4>

<p><code>getKey</code>ページのインデックス(ページ数)と全ページのデータを引数に取る関数でレスポンスとしてページのキーを返します。&nbsp;<code>fetcher</code>は<code>useSWR</code>と同様にデータをフェッチするための<code>Promise</code>を返す関数を指定します。&nbsp;<code>options</code>も<code>useSWR</code>と同様の設定に加えて、下記のページネーション特有のオプションがあります。</p>

<ul>
	<li><code>initialSize</code>&nbsp;= 1: 最初にロードするページ数</li>
	<li><code>revalidateAll</code>&nbsp;= false: 常にすべてのページに対して再検証を試みる設定</li>
	<li><code>revalidateFirstPage</code>&nbsp;= true: 常に最初のページに対して再検証を試みる設定</li>
	<li><code>persistSize</code>&nbsp;= false: 最初のページのキーが変更されたときに、ページサイズを 1 （またはセットされていれば initialSize）にリセットしない</li>
</ul>

<h4>レスポンス</h4>

<p>上記レスポンスの&nbsp;<code>data</code>,&nbsp;<code>error</code>,&nbsp;<code>isValidating</code>,&nbsp;<code>mutate</code>&nbsp;に関しては<code>useSWR</code>&nbsp;と基本同じ内容のため割愛します。</p>

<p>それ以外のレスポンス<code>size</code>に関して、フェッチ後に返されうる想定ページ数の値で、&nbsp;<code>setSize</code>は初回以降のページのデータを取得していく際にAPIリクエストに指定するページ数をセットする関数です (ex: ページ数2のデータを取得したい場合&rarr;&nbsp;<code>setSize(2)</code>を実行します)</p>

<p>さらなるAPIの詳細については下記を参考ください。 下記以降でWeb版ポイントクラブでのポイント履歴のページネーションの実装例を具体的に見ていきます。</p>

<p>参考&nbsp;<a href="https://swr.vercel.app/ja/docs/pagination#useswrinfinite" target="_blank">https://swr.vercel.app/ja/docs/pagination#useswrinfinite</a></p>

<h2>ポイント履歴一覧での実装例</h2>

<p>下記は<code>useSWRInfinite</code>を利用したAPIリクエスト用のHook関数の定義です。 (import文や変数宣言部分など諸々省略して本質的な部分のみ簡略的に記載しています)</p>

<h4>データ取得用Hook関数定義</h4>

<pre>
<code>import { useState, useEffect } from 'react';
import useSWRInfinite from 'swr/infinite'

const usePointHistory = (
  fromUnixTime: number,
  toUnixTime: number
): PointHistoryListResponse =&gt; {
   const { data, size, setSize } = useSWRInfinite&lt;FetchPointHistoryResponse&gt;(
    (pageIndex: number, previousPageData: FetchPointHistoryResponse | null) =&gt; {
      if (previousPageData &amp;&amp; !previousPageData.length) return null;
      return `/v1/points/history?page=${pageIndex}&amp;per=10&amp;from=${fromUnixTime}&amp;to=${toUnixTime}`;
    },
    pointClubAPIFetcher,
    {
      initialSize: 5, // プリフェッチで事前に5ページ分初回ページロード時にデータを取得する
    }
  );

  const [res, setRes] = useState&lt;PointHistoryListResponse&gt;({
    pointHistoryList: [],
    page: 0,
  });

  useEffect(() =&gt; {
    if (!data) return;

    setRes({
      pointHistoryList: data,
      page: size,
      setPage: setSize,
    });
  }, [data, size, setSize]);

  return res;
};

export default usePointHistory;</code></pre>

<p>下記部分で&nbsp;<code>useSWRInfinite</code>を呼び出しています。 第一引数の<code>getKey</code>部分には現在のページインデックスに加えて、前ページのデータを引数にとる関数が指定されているため、インデックスとカーソルベースの両方のタイプのページネーションの実装に活用できます。 第二引数にデータ取得用<code>Fetcher</code>関数を指定して、第三引数で<code>option</code>を指定しています。&nbsp;<code>option</code>で<code>{initialSize: 5}</code>を指定することにより初回レンダー時にデフォルトの1ページ分ではなく5ページ分のデータをあらかじめAPIリクエストして習得してくれるようになります。</p>

<pre>
<code>const { data, size, setSize } = useSWRInfinite&lt;FetchPointHistoryResponse&gt;(
    (pageIndex: number, previousPageData: FetchPointHistoryResponse | null) =&gt; {
      if (previousPageData &amp;&amp; !previousPageData.length) return null;
      return `/v1/points/history?page=${pageIndex}&amp;per=10&amp;from=${fromUnixTime}&amp;to=${toUnixTime}`;
    },
    pointClubAPIFetcher,
    {
      initialSize: 5,
    }</code></pre>

<p><img alt="" height="143" src="https://image.dmm-corp.com/bbv10hmob89sscm8o4703jnlvq2t" width="384" /></p>

<p style="text-align: center;">ブラウザでの初回ページ遷移時のリクエストログ</p>

<p style="text-align: center;">&nbsp;</p>

<figure title="ブラウザでの初回ページ遷移時のリクエストログ">&nbsp;</figure>

<p>&nbsp;</p>

<p>そしてレスポンスに関して、レスポンスデータを格納する<code>data</code>と、取得したページ数を返す&nbsp;<code>size</code>,そして次ページ以降取得するページ数をセットするための<code>setSize</code>関数を受け取ります。 注目の点として<code>data</code>の構造が各ページ数をキーにそのレスポンスを配列で格納する二重配列の構造になっています。</p>

<pre>
<code>// `data` はこのようになります
[
  // 1ページ目のAPIリクエストのレスポンスを格納
  [
    { id: 'xxxx', pointAmount: 500, ... },
    { id: 'xxxx', pointAmount: 200, ... },
    { id: 'xxxx', pointAmount: 400, ... },
    ...
  ],
  // 2ページ目
  [
    { id: 'xxxx', pointAmount: -300, ... },
    { id: 'xxxx', pointAmount: 600, ... },
    { id: 'xxxx', pointAmount: 50, ... },
    ...
  ],
  ...
]</code></pre>

<h4>ポイント履歴一覧(ページネーション)コンポーネント</h4>

<p>上記のHook関数を利用してポイント履歴一覧を表示するコンポーネントが下記になります。</p>

<pre>
<code>import React, { useState } from 'react';
import PointHistoryListItem from '../HistoryPointListItem';
import styles from './index.module.scss';
import Paginate from '../Paginate';
import usePointHistory from '../../hooks/usePointHistory';

const HistoryPointList: React.FC = () =&gt; {
  const [currentPage, setCurrentPage] = useState(0);
  const { pointHistoryList, page, setPage } = usePointHistory(fromUnixTime, toUnixTime);

  let totalItems = 0; // 全ページでのポイント履歴の総件数
  for (let i = 0; i &lt; pointHistoryList.length; i += 1) {
    totalItems += pointHistoryList[i].length;
  }

  const handlePaginate = (selectedItem: { selected: number }) =&gt; {
    setCurrentPage(selectedItem.selected);
    if (setPage) {
      setPage(page + 1);
    }
  };


  return (
    &lt;&gt;
      &lt;div className={styles.area_list}&gt;
        &lt;ul className={styles.box_list}&gt;
          &lt;li&gt;
            {pointHistoryList[currentPage].map((item) =&gt; (
                  &lt;PointHistoryListItem
                    key={item.id}
                    points={item.points}
                    totalPoint={item.totalPoint}
                  /&gt;
                ))
              }
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div className={styles.paginate_wrapper}&gt;
        &lt;Paginate
          pageCount={totalItems / listItemCountPerPage}
          handlePaginate={handlePaginate}
        /&gt;
      &lt;/div&gt;
    &lt;/&gt;
  );
};

export default HistoryPointList;</code></pre>

<p>下記部分でページネーションデータ取得用のHook関数を呼び出しています。</p>

<pre>
<code>const { pointHistoryList, page, setPage } = usePointHistory(fromUnixTime, toUnixTime);</code></pre>

<p>hook関数のレスポンス<code>pointHistoryList</code>からページネーション全体でのポイント履歴の件数を計算しています。</p>

<pre>
<code>  let totalItems = 0; // 全ページでのポイント履歴の総件数
  for (let i = 0; i &lt; pointHistoryList.length; i += 1) {
    totalItems += pointHistoryList[i].length;
  }</code></pre>

<p>そしてページネーションのイベントハンドラを下記で定義しています。 現在のページ数をステートで定義し(<code>currentPage</code>),イベントハンドラで<code>SetState</code>でページ数を更新しています。 さらに、指定されたページ数でポイント履歴一覧取得APIのリクエストを行うように&nbsp;<code>setPage</code>でページ数を設定します。 ここで指定したページのデータを既に取得済みの場合は<code>SWR</code>の方でよしなにキャッシュから値を返すようにしてくれます。</p>

<pre>
<code>const handlePaginate = (selectedItem: { selected: number }) =&gt; {
  setCurrentPage(selectedItem.selected);
  if (setPage) {
    setPage(page + 1);
  }
};</code></pre>

<h3>まとめ</h3>

<p>データ取得ライブラリ<code>SWR</code>の１モジュールである&nbsp;<code>useSWRInfinite</code>を活用することでページネーションが楽に実装する点についてみていきました。&nbsp;<code>SWR</code>はキャッシュをうまく有効活用してくれたり、リクエストでエラーが発生した場合の再検証の実装が楽にできたりとAPIリクエスト周りの処理をとても簡潔に実装できます。</p>

<p>明日<a href="https://qiita.com/advent-calendar/2021/dmm" target="_blank">DMMグループAdvent Calendar 2021</a>15日目は oda-daisuke さんです。</p>

<h3>宣伝</h3>

<p>DMMポイントクラブ(スマホアプリ版)では現在下記のキャンペーンを実施中です。 DMMポイントを活用してDMMの多種多様なサービスを体験してください。</p>

<p><a href="https://lp.pointclub.dmm.com/cp/202112-pointclub-jumbo" target="_blank">1等10,000ptが当たる！ポイントクラブジャンボ｜lp.pointclub.dmm.com</a></p>

<p><a href="https://lp.pointclub.dmm.com/cp/creditcard-charge" target="_blank">アプリからのクレジットカードチャージで+3%ポイント還元！｜lp.pointclub.dmm.com</a></p>


SWRを活用してページネーションの実装を工夫した話

シェア

関連する求人

関連する記事