こんにちは、Railsエンジニアにょけん(@nyoken_box)です。
Railsのアプリケーションでなんかしらの一覧を表示したい場合、ページネーション(ページ送り機能)を用いると便利です。
下の画面の左上にあるようなやつですね。

1ページに数百件もの情報を載せるのは、見にくい上に読み込みが遅くなって不便です。
大量のデータを表示する際は、ぜひとも実装しましょう。
シンプルで使いやすいgem「will_paginate」を用いるのが、カンタンです。
①「will_paginate」をgemファイルに記載
まずは、Gemfile
に「will_paginate」を追加しましょう。
gem 'will_paginate', '~> 3.1', '>= 3.1.6'
ピンク色の部分でバージョンを指定していますが、以下の環境ではこちらの指定をしないとうまく動きませんでした。
- Rubyバージョン=「2.4.1」
- Railsバージョン=「5.2.1」
「will_paginate-bootstrap」というgemを用いて、Bootstrapでカッチョいい感じにページネーションを実装することもできます。
ただ、その場合はgemファイルがもう2つ必要ですのでご注意を。
gem 'bootstrap-sass' gem 'will_paginate', '3.0.4' gem 'will_paginate-bootstrap', '1.0.1'
gemファイルに記入を終えたら、「bundle install」を実行
$ bundle install
念のため、サーバーも再起動しましょう。
②コントローラーのallメソッドをpagenateメソッドに変更
一覧で何かを表示する際は、基本的に「〇〇.all」というメソッドを用いていると思います。
例えば、Userモデルの一覧を出力する場合であれば・・・
class UsersController < ApplicationController def index @users = User.all end
こんな感じ。
「will_paginate」を使用する場合、ここを変更する必要があります。
以下のようにしてください。
class UsersController < ApplicationController def index @users = User.paginate(page: params[:page]) end
動作はややこしいので、読みたい方だけどうぞ。
ーーー読みたい人だけーーー
まず、User.paginate
は、Userに関するデータをデータベースから30個ずつ取ってきて表示するという動作です。(30個という個数はデフォルトで決められています)
で、「どの30個を表示すればいいの?」という部分を決めているのが、(page: params[:page])
なんですね。
ここで説明をわかりやすくするために、今データベース内に100個のUserデータがあると想定してください。
これを30個ずつ分けるので、ページ数は以下のようになります。
- idが1〜30→1ページ目
- idが31〜60→2ページ目
- idが61〜90→3ページ目
- idが91〜100→4ページ目
で、params[:page]
の[:page]
では、この「何ページ目か」という情報を渡しているんですよ。
params[1]
であれば、idが1〜30番までのUserデータが取れるわけです。
で、これをさらに:page
というキーで設定して、paginate
メソッドで表示しているんですね。
なんでわざわざ:page
に情報を格納しているかというと、paginate
を使う際は、キーが:page
でその値として該当ページを示すハッシュを指定する必要があるため。
めんどくさい仕組みですね。
もっと超ざっくり説明すると、

上の画面で「2」ってとこを押すとparams[2]
という情報が送られて、2ページ目に設定されている「id31〜60のUserデータ」を表示してくれるってことです。
③index.html.erbに「will_pagenate」を実装
最後に、viewファイルを変更しましょう。
ここは超カンタンです。
ページネーションを実装したいviewファイルに、以下ピンク色の箇所を記載するだけ。
ここでは、「index.html,erb」というファイルを例にとります。
app/views/users/index.html.erb
<%= will_paginate %> <ul class="users"> <% @users.each do |user| %> <li> <%= gravatar_for user, size: 52 %> <%= link_to user.name, user %> </li> <% end %> </ul>
※<%= gravatar_for user, size: 52 %>ってとこは、アイコン画像を表示するための記述なので無視してください。
これで、以下のようにページネーションが実装できます。

ちなみに、Bootstrapを用いた場合は「<%= will_paginate %>」の部分を以下のように記述します。
<%= will_paginate renderer: BootstrapPagination::Rails %>
以下のような画面になります。
