Posted at

Railsでpagyを使ったページネーション

この記事は高知工科大 Advent Calendar 2018の第6日目の記事です。

学生っぽい文調で書きます。


はじめに

こんにちは。Qiitaに投稿しようかなと温めていたネタを、どうせならアドカレに載せちゃおう的な感じで書きます。最初は温めてたんですが放置したら冷めちゃったんで温め直しました。


Ruby on Railsでページネーションの話になります。

RailsでWebアプリを作るときにコンテンツを5個位に分けてページ分けするヤツを実装したいなって調べてたら、初めてページネーションって名前なの知りました。

Google検索とかAmazonとかで検索するときに2ページ目、3ページ目とかいけるアレです。


概要

Ruby on Railsでのページネーションに「pagy」というgemを用いて実装します。

github: https://github.com/ddnexus/pagy


あと、pagyだと味気ないのでササッとBootstrapで装飾します。


pagyについて

Railsのページネーションにはkaminariとかwill_pagenateというgemを使うのが一般的?らしいんですがpagyはそれらと比べて"速く"、"省メモリ"、"シンプル"かつ"効率的"というベンチマーク結果が出ているらしいです。

ちなみに私はpagyしか使ったことありません。


環境

Ruby 2.5.1

Rails 5.2.1
pagy 1.1.0


実装

実際の導入手順書いていきます。最後にgithubのリンク貼るのでそちらの確認もどうぞ


Install


Gemfile

gem 'pagy'


Gemfileにpagyを追加して、bundle installをします。


bash

$ bundle install



Config

pagyを使うための設定をします。


  • 一度に表示するコンテンツの数

  • Bootstrapのrequire

などです。

設定ファイルとして pagy.rb を config/initializers 下に配置します。

設定ファイルは自分で作るか、公式で配布されているテンプレートをダウンロードして使うかの2択です。

公式テンプレート

私は一度に5個のコンテンツを表示する設定にしているので次のような感じになってます。


config/initializers/pagy.rb

# pagy config file

Pagy::VARS[:items] = 5


Controller

pagyを導入したいcontrollerに次の文を記述します。

あ、言い忘れましたが、私のアプリケーションに導入した際の例で説明していきます。


app/controllers/pages_controller.rb

class PagesController < ApplicationController

include Pagy::Backend

次にモデルを引数に入れてpagyを使います!


app/controllers/pages_controller.rb

  def posts

@pagy, @posts = pagy(Post.all)
end

@pagyには、paginationの何か(わかってない)が、@postsにはモデルアクションの結果(Post.all)が格納されます。


View

viewで画面表示周りをいじります。

まず、helperに次の文を記述します。


app/helper/pages_helper.rb

module PagesHelper

include Pagy::Frontend
end

次に、viewで個々の表示とpagyの設定をします。


app/views/pages/show.html.erb

<% @posts.each do |post| %>

<p><%= post.name %></p>
<ul>
<li><%= post.content %></li>
</ul>
<% end %>
<%== pagy_nav(@pagy) %>

@postsに格納されたデータを1個1個、postという変数に格納して、それを表示しています。

下はこんな感じだよっていう画像です。seedは適当に入れてます。

スクリーンショット 2018-12-03 16.07.13.png


Bootstrap

一応これで完成ですが味気ないのでBootstrapでちゃちゃっとそれっぽくしたいですね

まず、RailsにBootstrapを適用させます。

RailsのBootstrap覚え書き

この記事から適用させちゃってください。

あとはpagyにbootstrap用の文を追加していきます。


config/initializers/pagy.rb

require 'pagy/extras/bootstrap'



app/views/pages/show.html.erb

<div class="d-flex justify-content-left mb-2">

<%== pagy_nav_bootstrap(@pagy) %>
</div>

こんな雰囲気になると思います。

スクリーンショット 2018-12-03 16.41.56.png


SearchResult

小見出し思いつかなくてわけのわからない小見出しになってしまいました。反省してます。

@pagyにpaginationの何かが入るってゆってたんですけど、検索結果の件数とかわかります。

if @pagy.vars[:count] > 0

# 検索結果がある
else
# 検索結果がゼロ
end

こんなことをコントローラに書いたりビューの中に書いたりしていろいろできるのではないかと思います。


終わりに

画像を全然載せないので分かりづらかったかもしれないです。

自分の実装した範囲でしか説明できてないのでpagyの深い使い方とか、まだまだあるんじゃないかと思います。

個人的にpagyのbootstrap適用が一番手こずりました。たしか。

今回の実装手順をGithubにあげてます。

https://github.com/white0221/pagy

区切りごとにコミットで分けたつもりなのでよければご参考にしてください。

それではRuby on Railsにpagyの適用方法でした。

開発の助けになれば幸いです。


参考資料

https://qiita.com/junara/items/eb85559547f87c8cb6b3

https://techracho.bpsinc.jp/hachi8833/2018_06_05/57481