【108日目】【1日20分のRailsチュートリアル】【第9章】indexページでページネーションを動作させる

Ruby on Railsチュートリアル(第3版)

今日は「9.3.3 ページネーション」から。

9.3.3 ページネーション

これで、最初のユーザーにも仲間ができました。しかし今度は逆に、1つのページに大量のユーザーが表示されてしまっています。
（中略）
これを解決するのがページネーション (pagination) というもので、この場合は、たとえば1つのページに一度に30人だけユーザーを表示するというものです。

数千になってしまうとユーザー情報をデータベースから取得するのに時間かかるしもページを表示するのにも時間かかるし良くないね。

Railsには豊富なページネーションメソッドがあります。今回はその中で最もシンプルかつ堅牢なwill_paginateメソッドを使用してみましょう。

へー、いくつもメソッドあるんだ。

will_paginateメソッドを使うためにwill_paginate gem とbootstrap-will_paginate gemをGemfileにインクルードする。

Gemfile

gem 'will_paginate',           '3.0.7'
gem 'bootstrap-will_paginate', '0.0.10'

bundle installを実行。

$ bundle install
Installing will_paginate 3.0.7
  :
Installing bootstrap-will_paginate 0.0.10
  :

will_paginateメソッドを使う準備ができました。

ページネーションが動作するには、ユーザーのページネーションを行うようにRailsに指示するコードをindexビューに追加する必要があります。
また、indexアクションにあるUser.allを、ページネーションを理解できるオブジェクトに置き換える必要もあります。

まずindexページの上下でwill_paginateメソッドを呼ぶ。

app/views/users/index.html.erb

<% provide(:title, 'All users') %>
<h1>All users</h1>

<%= will_paginate %>

<ul class="users">
  <% @users.each do |user| %>
    <li>
      <%= gravatar_for user, size: 50 %>
      <%= link_to user.name, user %>
    </li>
  <% end %>
</ul>

<%= will_paginate %>

このwill_paginateメソッドは少々不思議なことに、usersビューのコードの中から@usersオブジェクトを自動的に見つけ出し、それから他のページにアクセスするためのページネーションリンクを作成しています。

へー、メソッドに@usersオブジェクトを指定しなくていいのか。

というのも、現在の@users変数にはUser.allの結果が含まれていますが (リスト9.33)、will_paginateではpaginateメソッドを使った結果が必要だからです。

allではなくpaginateメソッドを使うらしい。

$ rails console
>> User.paginate(page: 1)
  User Load (4.7ms)  SELECT  "users".* FROM "users" LIMIT 30 OFFSET 0
   (0.5ms)  SELECT COUNT(*) FROM "users"
=> #<ActiveRecord::Relation [#<User id: 1, name: "Example User", ...

デフォルトでは30個分のUserを取得する。標準？でこんなメソッドがあるのかー

paginateを使用することで、サンプルアプリケーションのユーザーのページネーションを行えるようになります。具体的には、indexアクション内のallをpaginateメソッドに置き換えます 。

indexアクションにてUser.paginateメソッドを使うように修正。

app/controllers/users_controller.rb

  def index
    @users = User.paginate(page: params[:page])
  end

ページネーションの動作見てみよう。

サーバーを起動して

$ rails server -b $IP -p $PORT

<ローカルアドレス>/usersにアクセス。

ページの上下にページネーションが表示されてます。

3ページ目も表示できるよ。実装簡単だな～

今日の学習時間は【22分】。

次は「9.3.4 ユーザーインデックスのテスト」から。