ページネーション　kaminari

kaminariとは？

Railsでページネーションを利用するためによく利用されているgemのことです。

ページネーションとは？

ページネーションとは、レコード件数が一定数を超えた場合に複数のページに分割して表示するようにすることです。
一覧画面ではほとんどの確率で実装されています。
下記の写真に使われているのがページネーションです。 f:id:Mekun:20210714051312p:plain

なぜページネーションが必要なの？

トップページは、画像や文章、関連する情報などを大量に表示していることが多いため、その分ブラウザを表示し終わるまでに時間がかかってしまいます。そうなると、ユーザーにとって使い勝手が悪くなり、ストレスに感じてしまいます。
このような問題を避けるためによく利用される方法がページネーションです。
情報を分割して表示することで、ユーザーにとって使いやすいようにできます。

ページネーション実装の大まかな流れ

kaminariのインストール
コントローラーにページネーションのコードを書く
ページネーションの表示
表示数の設定
デザインの調整

kaminari gem のインストール

まずはkaminariを利用するために、Gemfileに以下の行を追加します。

gem 'kaminari', '1.1.1' 　# rails5系なのでバージョン　１.１.１を使用します。

その後bundleコマンドを実行してkaminari gem をインストールします。

$ bundle install

Gemfile.lockに以下の行が追加されます。

 kaminari (1.1.1)
      activesupport (>= 4.1.0)
      kaminari-actionview (= 1.1.1)
      kaminari-activerecord (= 1.1.1)
      kaminari-core (= 1.1.1)
    kaminari-actionview (1.1.1)
      actionview
      kaminari-core (= 1.1.1)
    kaminari-activerecord (1.1.1)
      activerecord
      kaminari-core (= 1.1.1)
    kaminari-core (1.1.1)

ページネーション定義

これでkaminariが定義しているメソッドを使うことができます。

def index
  @objects = Object.page(params[:page])
end

ページネーション表示

ページネーションを実装させたいviewファイルに下記のコードを記述します。

<%= paginate @objects %>

kaminariの設定

表示件数の設定を行いたいので、設定ファイルを作成します。

$ rails g kaminari:config

上記のコマンドで、config/initializers配下に以下の設定ファイルが作成されます。

# frozen_string_literal: true

Kaminari.configure do |config|
  # config.default_per_page = 25
  # config.max_per_page = nil
  # config.window = 4
  # config.outer_window = 0
  # config.left = 0
  # config.right = 0
  # config.page_method_name = :page
  # config.param_name = :page
  # config.max_pages = nil
  # config.params_on_first_page = false
end

config.default_per_page = 25この部分が表示件数の設定なので25の部分を書き換えると、表示件数を変更することができる。

デザインの調整

kaminariが提供するジェネレータで、テーマ(Thema)と呼ばれるデザインの種類を指定して、好みの形のパーシャルテンプレートを生成できます。
今回はbootstrap4というテーマのパーシャルプレートを生成してみます。次のコマンドをコンソールで実行します。

$ rails g kaminari:views bootstrap4

実行すると下記のような出力がされ、app/views/kaminari配下にいくつかビューテンプレートファイルが追加されます。

% rails g kaminari:views bootstrap4
Running via Spring preloader in process 43697
      downloading app/views/kaminari/_first_page.html.erb from kaminari_themes...
      create  app/views/kaminari/_first_page.html.erb
      downloading app/views/kaminari/_gap.html.erb from kaminari_themes...
      create  app/views/kaminari/_gap.html.erb
      downloading app/views/kaminari/_last_page.html.erb from kaminari_themes...
      create  app/views/kaminari/_last_page.html.erb
      downloading app/views/kaminari/_next_page.html.erb from kaminari_themes...
      create  app/views/kaminari/_next_page.html.erb
      downloading app/views/kaminari/_page.html.erb from kaminari_themes...
      create  app/views/kaminari/_page.html.erb
      downloading app/views/kaminari/_paginator.html.erb from kaminari_themes...
      create  app/views/kaminari/_paginator.html.erb
      downloading app/views/kaminari/_prev_page.html.erb from kaminari_themes...
      create  app/views/kaminari/_prev_page.html.erb

サーバーを再起動して、http://locallhost:3000にアクセスします。
テンプレートファイルが適用され、ナビゲーション部分の見た目が変更されます。

今回のまとめ

kaminariは、ページネーションを簡単に実装できるgem
ページネーションは、複数ページに分けて掲載するコンテンツを表示させるようにしたもの
ページネーションの見た目を変える場合は、コマンド実行してapp/viewsフォルダに追加されたkaminariを変更する必要がある

参考にしたサイト

【Rails】 kaminariの使い方をマスターしよう！ | Pikawaka - ピカ1わかりやすいプログラミング用語サイト