【Rails】kaminariを使用してページネーション機能を実装

## ページネーションとは
投稿一覧ページなどを複数のページに分割して表示させること。
トップページで全ての投稿を表示させると、データの読み込みに時間がかかるので、ページネーションを使う。

## kaminariとは

ページネーションを簡単に実装するためのgem。
[kaminari](https://github.com/kaminari/kaminari)

Gemfileに以下のように記述して、`bundle install`を実行すると準備完了。

```ruby:Gemfile
gem 'kaminari'
```

```ruby
$ bundle install
```





## 設定ファイルをカスタマイズする

kaminariの設定ファイルを作成

```terminal
$ rails g kaminari:config
    create  config/initializers/kaminari_config.rb
```

上記コマンドにより、config/initializers ディレクトリ直下に、以下の設定ファイルが生成される。

```ruby:config/initializers/kaminari_config.rb
# 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
```

### 設定ファイルの説明

<img width="811" alt="スクリーンショット 2020-04-17 15.58.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/576318/f08ecade-5e1b-9ca8-288b-67a910fc3de5.png">

- default_per_page     
 - 1ページあたりの表示件数(デフォルトは25レコード）
- max_per_page         
 - 1ページあたりの最大表示件数(デフォルトはnil。つまり無限）
- max_pages             
 - 最大ページ数(デフォルトはnil）
- window                
 - 現在のページから、左右何ページ分のリンクを表示させるか(デフォルトは4件)
     - 上の例では現在は9ページ目で、左右4ページずつ表示させている。
- outer_window          
 - 最初(First)と最後(Last)のページから、左右何ページ分のリンクを表示させるか(デフォルトは0件)
- left                  
 - 最初(First)のページから、何ページ分のリンクを表示させるか(デフォルトは0件)
     - 上の例では2ページ表示させている(1、2ページ目)。
- right                 
 - 最終(Last)ページから、何ページ分のリンクを表示させるか(デフォルトは0件)
     - 上の例では１ページ表示させている(17ページ目)。 
- page_method_name      
 - モデルに追加されるページ番号を指定するスコープの名前:page by default
- param_name            
 - ページ番号を渡すために使用するパラメータ名(デフォルトは`:page`)
   - `Board.page(params[:page]) `のようにparamsメソッドで取得できる。
- params_on_first_page  
 - false by default  



  
上記の例のようにカスタマイズしたコードは、以下の通り。
(※設定ファイルは`initializers`配下に存在するファイルのため、`rails s`を実行してカスタマイズ内容を読み込む必要があることに注意！）

```ruby:config/initializers/kaminari_config.rb
# frozen_string_literal: true

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


## ページネーションのデザインを変更する

ちなみにさっきの例で使ったページネーションのデザインは、ターミナルで`rails g kaminari:views bootstrap4`と実行することで、Bootstrap4のデザインに変更していた。
##### `rails g kaminari:views 〇〇(ダウンロードしたいviewテンプレート)`

```terminal
rails g kaminari:views bootstrap4
...
Running via Spring preloader in process 72502
      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
```

## ウィンドウの文字をi18nで日本語化

localesファイルに記述し、`rails s`を実行したら反映されている。

```yml:config/locales/views/paginate.ja.yml
ja:
  views:
    pagination:
      first: "最初"
      last: "最後"
      previous: "« 前"
      next: "次 »"
      truncate: "..."
```

<img width="708" alt="スクリーンショット 2020-04-17 16.22.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/576318/e6046209-7f12-b618-92b1-35bcc066a7ec.png">

## おわり
以上です。rai
正直README読んでたら簡単に実装できる内容ですね。