【Railsの便利gem】will_paginateでページネーションを実装する手順は？

こんにちは、Railsエンジニアにょけん（@nyoken_box）です。

Railsのアプリケーションでなんかしらの一覧を表示したい場合、ページネーション（ページ送り機能）を用いると便利です。

下の画面の左上にあるようなやつですね。

１ページに数百件もの情報を載せるのは、見にくい上に読み込みが遅くなって不便です。

大量のデータを表示する際は、ぜひとも実装しましょう。

シンプルで使いやすいgem「will_paginate」を用いるのが、カンタンです。

①「will_paginate」をgemファイルに記載

まずは、Gemfileに「will_paginate」を追加しましょう。

gem 'will_paginate', '~> 3.1', '>= 3.1.6'

ピンク色の部分でバージョンを指定していますが、以下の環境ではこちらの指定をしないとうまく動きませんでした。

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個ずつ分けるので、ページ数は以下のようになります。

で、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」というファイルを例にとります。

<%= 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 %>

以下のような画面になります。