この記事は高知工科大 Advent Calendar 2018の第６日目の記事です。
学生っぽい文調で書きます。

はじめに

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

Ruby on Railsでページネーションの話になります。
RailsでWebアプリを作るときにコンテンツを５個位に分けてページ分けするヤツを実装したいなって調べてたら、初めてページネーションって名前なの知りました。
Google検索とかAmazonとかで検索するときに２ページ目、３ページ目とかいけるアレです。

概要

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 下に配置します。
設定ファイルは自分で作るか、公式で配布されているテンプレートをダウンロードして使うかの２択です。
公式テンプレート
私は一度に５個のコンテンツを表示する設定にしているので次のような感じになってます。

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に格納されたデータを１個１個、postという変数に格納して、それを表示しています。
下はこんな感じだよっていう画像です。seedは適当に入れてます。

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>

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

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

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