【108日目】【1日20分のRailsチュートリアル】【第9章】indexページでページネーションを動作させる
今日は「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 ユーザーインデックスのテスト」から。