はじめに
掲示板とブックマーク一覧画面にページネーションを実装します。
1ページあたり20件の掲示板を表示するようにしましょう。
ページネーションとは?
コンテンツの量が増えていくと、1つのページに大量のコンテンツが表示されるので読み込み速度が遅くてなってしまいます。また、スクロールするのも大変になります。これを解決するのがページネーションというもので、例えば1つのページに一度に20件表示するようにページを分割します。
ページネーションによるメリット
・情報量が多くなることによる読み込み速度の低下を避けることができる
・ページ読了に必要とされるスクロール量を軽減する
・ユーザーが現在の居場所を把握しやすくなる

必要な作業
- 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
ページネーションを表示させる
コントローラで設定したインスタンス変数をpaginate
ヘルパーメソッドに渡してViewファイルに埋め込みます。
<%= paginate @boards %>
<%= paginate @bookmark_boards %>
ページネーションのデザイン変更
1. フレームワークのデザインを適用させる
ジェネレートコマンドによって、任意のテンプレートファイルを選択して適用させることができます。
$ rails g kaminari:views THEME
THEME
任意のテンプレートファイル
このコマンドはkaminari_themes
というリポジトリから指定したテーマのテンプレートファイルをフェッチしています。
以下の記事から他のスタイルも参考にしてみてください。

今回は事前に使用しているBootstrap4のスタイルを採用します。
$ rails g kaminari:views bootstrap4
2. 手動で見た目を変える
また、フレームワークデザインを使わない場合、自分でCSSを当てることもできます。
$ rails g kaminari:views default
このコマンドによってapp/views
フォルダにkaminari
が追加されます。
そのフォルダの中にページネーションの部分のhtmlが記述さていますので、そちらで変更を行ってください。
まとめ
- ページネーションは、1つのページに掲載するコンテンツ数を制限して表示させるもの
- railsではkaminariというgemを使って簡単にページネーションを実装できる
- ページネーションの設定を変えるに場合は、コマンドを実行して生成されたファイルを生成する
- ページネーションの見た目を変える場合は、コマンド実行してフレームワークを適用させる
終わりに
kaminariによって非常に簡単にページネーションを実装させることができました。自分で設定を変えてみてどう変化するか試してみましょう。
参考記事





コメント