kaminariでページネーションを導入 #Rails

Ruby on Rails
このエントリーをはてなブックマークに追加
Pocket

こんにちは、未経験からITエンジニアへの転職を目指しているごんにんごんです。

今日は”ページネーション”について書きたいと思います。

はじめに

ページネーションに行き着いたのは訳がありまして。現在制作しているオリジナルアプリでは、トップページにユーザーの投稿を一覧表示させています。

「ちゃんと投稿できたか？」とか「データベースに保存されたか？」とか、テストを続けていたら、サンプルの投稿でトップページが埋まってしまったのです。

これは見づらいな、、、と考えたとき、“ページネーション”を知ったというわけです。

ページネーション(Pagination)とは

googleがわかりやすい例で、検索ページの一番下に表示されているやつです。

kaminari gemについて

Railsには“Kaminari”というページネーションを簡単に実装してくれるgemが提供されています。

Kaminariを用いてページネーションを実装

gemの導入から、bootstrapを用いたページネーションの見た目の装飾まで説明します。

ちなみに環境は以下のとおり。

導入環境

ruby 2.6.5p114 (2019-10-01 revision 67812) [x86_64-darwin21]
Rails 6.0.4.7
kaminari (1.2.2)
bootstrap5-kaminari-views (0.0.1)

STEP1. Gemの追加とbundle install

# Gemfile
gem 'kaminari'

# Terminal
bundle install

STEP2. kaminariの設定

gemが入ったところで、ページネーションの設定ファイルを生成しましょう。

#Terminal
rails g Kaminari:config

生成されたconfig/initializers/kaminari_config.rbを開きます。

このファイルでページネーションをどんなレイアウトにするか決めることができます。今回は1ページあたりに表示するレコード数を10としたいので、一番上の項目のコメントアウトを外して、以下記述しておきます。

  Kaminari.configure do |config|
    config.default_per_page = 10
  end

STEP3.ページネーションを表示させる

Controllerで、ページネーションを表示させたいデータに以下追加します。

なお、今回は冷蔵庫の投稿データ(@boxes)にページネーションをつけています。

# app/controllers/boxes.rb
def index
  # paginationのために、page(params[:page])を追加
  @boxes = Box.includes(:user).order("created_at DESC").page(params[:page])
end

コントローラーに追加した“.page(params[:page])”について補足します。

kaminari gemの導入により、boxesコントローラーのindexアクションの際に、pageというパラメータもくっ付いてくるようになりました。

つまり、どのページがクリックされたかという情報がparamsに乗せてコントローラーに送られるので、params[:page]で取得しているということです。

次に、ページネーションを表示させるviewに、paginationヘルパーを記述します。このヘルパーによって、画面にpaginationリンクが表示されます。

<%= paginate @boxes %>

どのように表示されるでしょうか？

・・・なんだか味気ないですね。そんな時はbootstrapで装飾してあげましょう。

Bootstrap

STEP4. ページネーションを彩る #bootstrap

まずはじめにアプリ全体にbootstrapを適用させるために、app/views/layouts/application.html.erbの<head>タグ内に以下コードを追加しましょう。

<head>
 ~省略~
    <%# bootstrapをアプリケーション全体に適応させる %>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

次にページネーションにbootstrapを適用させるため、以下gemをインストールします。

# Gemfile
gem 'bootstrap5-kaminari-views', '~> 0.0.1'

# Terminal
bundle install

STEP4の最後でviewファイルに記述したpatinationヘルパーを以下のように書き換えます。

  <%= paginate @boxes, theme: 'bootstrap-5' %>

theme: ‘bootstrap-5’を加えることで、ページネーションにbootstrapのcssが適応されます。

終わりに

ページネーションを導入するだけで、ページがすっきりしました。

bootstrapのthemeにもさまざま種類があるみたいなので、アプリケーションの色合いに合わせて変えてみることもできますよ！

ぜひやってみてください〜

参考文献

【Rails】kaminariの使い方をざっくりまとめてみた kaminariを使用してbootstrap5でCSSを追加する – Qiita
シェアする
ツイートする