独立系プログラマーのノウハウ

【プログラミング】ページネーションってなに?

【プログラミング】ページネーションってなに?

こんにちは、徳田です。

今回は「ページネーションとは何か?」について解説したいと思います。

皆さんは「ページネーション」という言葉を聞いたことがありますか?
聞いたことは無いとしても、きっと一度は実物を見たことがあると思います。

この記事で分かること


・ページネーションとは何か?
・ページネーションの実例
・ページネーションの仕組み

【目次】
  • ・結論から言うと
    ・ページネーションとは?
    ・様々なタイプのページネーション実例
    ・ページネーションの仕組み
    ・まとめ


結論から言うと


ページネーションとは、これです。



Googleの検索ページや、Amazonの商品一覧ページなど、一覧ページの下部には大体付いていますよね。

皆さんも様々なページで目にしたことがあると思います。

ページネーションとは?


ページネーションとは、画面に多くの情報を一覧表示する際、複数のページに区切って表示する仕組みです。
(ページングとも呼ばれます。)

画面に数百件ものデータが一度に表示されると、もの凄いスクロール量になって見づらいですし、画面の読み込み速度も遅くなってしまいます。

そこで、一覧系の画面では、基本的に1ページごとに適度な件数に分けて表示します。

1ページに何件表示するかは、Webサービスの種類や実際に表示するデータの種類によって異なりますので、自分でWebサービスを作る場合はユーザー目線に立って使いやすい件数を設定しましょう。


例えば、Googleの検索結果の場合は1ページ10件(広告除く)という設定になっています。




様々なタイプのページネーション実例


ページネーションは一般的に「前のページへ」「次のページへ」「指定のページにジャンプ」といったパーツで構成されています。




これらのボタンの表示方法もサイトによって様々です。

いくつか実例を見てみましょう。


①Googleの検索結果ページ
「前へ」「指定ページジャンプ」「次へ」という構成。



指定ページジャンプの部分は、現在のページ番号を中心として10件程度表示させる仕組みになっています。

例)現在のページが10ページの場合
5 6 7 8 9 [10] 11 12 13 14
(前5ページ、後4ページを表示)


②Amazonの商品一覧ページ
「前へ」「1ページ目へジャンプ」「指定ページジャンプ」「最終ページ」「次へ」という構成。



こちらは、現在のページ番号の前後のみ(合計3件)を表示。
ただ、1ページ目に戻るボタンが固定で表示されています。

また、ジャンプは出来ませんが「最終ページ番号(画像例では307)」も表示されており、どのくらいのページ数があるのかを確認することが出来るようになっています。


③Gmailのメール一覧ページ
「<(前へ)」「>(次へ)」ボタンと、「現在表示している件数」/「全データ件数」という構成。

こちらはかなりシンプルですね。
ページネーションパーツ自体も画面下部ではなく、上部に設置しています。


④Google Analyticsのデータ一覧ページ
「<(前へ)」「>(次へ)」というボタンと、「現在表示している件数」/「全データ件数」に加えて、「入力ボックスに直接ページ番号を入力して移動」という構成。


また、「表示する行数」を自分で変更出来るようになっています。


管理系や検索系の画面では、このように表示件数を自分で変更出来るようになっているサービスも多いですね。
多少読み込みに時間がかかっても良いので一気に見たい、といった場合に便利です。

ページネーションの仕組み


具体的な仕組みとしては、プログラムがデータベースからデータ一覧を取得する際に「データの何件目から、何件分を取得する」という指定を毎回行っています。

ユーザーがページネーションのボタンを押すと、「何ページ目を表示するのか」という情報がパラメーターとしてプログラムに渡され、それを元にデータ全件の「何件目」から「何件分取得する」という指定条件を毎回算出しています。

例)3ページ目を表示する場合(1ページの表示件数は10件)
【取得開始番号】21件目から
【取得件数】10件分

取得開始番号の計算は、「前のページ(この例だと2ページ目)」×「1ページの表示件数(10件)」+ 「1」になります。(2 x 10 + 1 = 21)


このように、ユーザーから指定されたページ番号を元に、取得する条件を算出してデータベースからデータを取得し、毎回画面をリアルタイムで作っています。

まとめ


ページネーションは機能としては小さいですが、どんなWebサービスにも大抵付随してくる機能の1つです。

こういった細かい機能は設計時には見落としてしまいがちですが、しっかりこだわっておくことで、ユーザーの使い勝手(ユーザービリティ)が変わってきます。

こういったところまで考慮できるかどうかがプロとアマの違いになります。

なお、最近ではページネーションパーツを設置せずに、ユーザーが画面を下にスクロールしたら自動的に次を読み込むような設計になっているサイトもあります。

例えば、ブログサイトの記事一覧などで、画面を一番下までスクロールすると自動的に新しい記事が読み込まれて、どんどん下に追加されていくような形です。

これは、仕組み的にはユーザーが画面を最下部までスクロールするタイミングで「Ajax」という方法を用いて次の記事をバッググラウンドで読み込み、自動的に表示しています。

この方法なら、ユーザーがページ移動のためにボタンをクリックする必要がないため、画面をざっとスクロールしながら見ていくようなタイプのサイト(ブログやニュースサイトなど)には適したページネーション設計だと思います。

Webサービスの画面を作る際には、表示させるデータの種類、読み込み速度、ユーザービリティなどを考慮し、適切なページネーションを組み込むようにしましょう!


この記事を読んだ人はこんな記事も読んでいます。