Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
17
Help us understand the problem. What is going on with this article?
@white0221

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

More than 1 year has passed since last update.

この記事は高知工科大 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

17
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
white0221
プログラミングで自分がはまったところについてまとめたいなって思ってます。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
17
Help us understand the problem. What is going on with this article?