[Rails] kaminariを使って掲示板にページネーションを実装する

はじめに

掲示板とブックマーク一覧画面にページネーションを実装します。

1ページあたり20件の掲示板を表示するようにしましょう。

ページネーションとは?

コンテンツの量が増えていくと、１つのページに大量のコンテンツが表示されるので読み込み速度が遅くてなってしまいます。また、スクロールするのも大変になります。これを解決するのがページネーションというもので、例えば1つのページに一度に20件表示するようにページを分割します。

ページネーションによるメリット

・情報量が多くなることによる読み込み速度の低下を避けることができる

・ページ読了に必要とされるスクロール量を軽減する

・ユーザーが現在の居場所を把握しやすくなる

https://i.gyazo.com/0fe9f27f2f684b8fb006f0a1da89a0db.png — google検索結果のページネーションリンク

必要な作業

kaminariの導入
コントローラにページネーションのコードを追記する
ページネーションを表示させる
ページネーションのデザイン変更

kaminariの導入

railsではkaminariというgemを使用します。

1. Gemfileに追加

Gemfileに記述し、インストールしましょう。

gem 'kaminari', '1.1.1'

$ bundle install

2. kaminariの仕様

a. 基本的な使い方

コントローラ側にこのようなコードを記述します。

@users = User.order(:name).page(params[:page])

View側で paginate というヘルパーメソッドを呼びます。

<%= paginate @users %>

b. page メソッド

kaminariを導入することで使えるようになるメソッドです。このメソッドは、「何ページ目を表示させるか」と言う感じで、ページネーションにおけるページ数を指定します。viewで使うヘルパーメソッド paginate からリクエストする際、paramsの中にpageというキーが追加されて、その値にpaginate がview側で指定したページ番号となってコントローラに送られます。コントローラ側で扱う際はparams[:page] という形で取得できます。

c. per メソッド

kaminariを導入することで使えるようになるメソッドです。このメソッドは1ページあたりに表示する件数を設定します。perメソッドの引数として渡した数値が、View側での1ページあたりに表示する件数になります。

d. paginate メソッド

こちらのヘルパーをviewに埋め込むことで、簡単にページネーションリンクが生成されます。

3. ページネーションの設定ファイルを生成する

下記のジェネレータコマンドによって、デフォルトの設定ファイルをconfig / initializersディレクトリに生成することができ、ファイルを編集します。

$ rails g kaminari:config

生成されたファイルを見てみましょう。

# frozen_string_literal: true
Kaminari.configure do |config|
  config.default_per_page = 20  # ここの数値に修正を加えましょう
  # config.max_per_page = 25   
  # config.window = 4
  # config.outer_window = 0
  # config.left = 0
  # config.right = 0
  # config.page_method_name = :page
  # config.param_name = :page
  # config.params_on_first_page = false
end

今回は1ページあたり20件の掲示板が表示されるようにしたいので、数値を修正しましょう。

また、各々のメソッドのデフォルト値は公式リファレンスより、このようになっています。

default_per_page      # 25 by default
# 1ページあたりの表示件数(デフォルトは25レコード）

max_per_page          # nil by default
# 1ページあたりの最大表示件数(デフォルトはnil。つまり無限）

max_pages             # nil by default
# 最大ページ数(デフォルトはnil）

window                # 4 by default
# 現在のページから、左右何ページ分のリンクを表示させるか(デフォルトは4件)

outer_window          # 0 by default
# 最初(First)と最後(Last)のページから、左右何ページ分のリンクを表示させるか(デフォルトは0件)

left                  # 0 by default
# 最初(First)のページから、何ページ分のリンクを表示させるか(デフォルトは0件)

right                 # 0 by default
# 最終(Last)ページから、何ページ分のリンクを表示させるか(デフォルトは0件)

page_method_name      # :page by default
# モデルに追加されるページ番号を指定するスコープの名前:page by default

param_name            # :page by default
# ページ番号を渡すために使用するパラメータ名(デフォルトは:page)

params_on_first_page  # false by default
# デフォルトでは、最初のページでparamsを無視する。フィルター機能などをparamsを利用して実装していた場合に、問題が起きる場合があり、その解決策としてのメソッド。
[参考](https://nekorails.hatenablog.com/entry/2018/10/15/005146)

コントローラにページネーションのコードを追記する

設定が終わったので早速 page メソッドを適用させたいアクションに使ってみましょう。

def index
  @boards = Board.all.includes(:user).order(created_at: :desc).page(params[:page])
end

def bookmarks
  @bookmark_boards = current_user.bookmark_boards.includes(:user).order(created_at: :desc).page(params[:page])
end