2021年9月10日現場Rails Chapter7-7 ページネーション

9/9朝会の続き

前回にモデルファイルで実装したimportメソッドを使用して CSVデータをインポート出来るボタンを実装していきます。

# app/controllers/tasks_controller.rb
def import
  current_user.tasks.import(params[:file])
  redirect_to tasks_url, notice: "タスクを追加しました"
end

# routes.rb
resources :tasks do
  post :confirm, action: :cofirm_new, on: :new
  post :import, on: :collection
end

# tasks/index.html.slim
= link_to 'エクスポート', tasks_path(format: :csv), class: 'btn btn-primary mb-3'

= form_tag import_tasks_path, multipart: true, class: 'mb-5' do
  = file_field_tag :file
  = submit_tag "インポート", class: 'btn btn-primary'

form_withのmultipartオプション

モデルと紐づかないform_with使用時にファイルや画像データを送信する場合に指定するオプションです。この場合のform_withで、multipart:trueと指定しないと、ファイル名を記述した際に、文字列として認識されてしまいます。

現場Railsではモデルと紐づかない場合にのみ使用する旧form_withのforn_tagを使用しているため、ファイルや画像データを送信するのであればmultipart: trueの設定が必要です。

form_with #=> form_tagとform_forが合体したもの。
form_tag #=> フォームのデータの送り先に、モデルを指定しない。
form_for #=> フォームのデータの送り先に、モデルを指定する。

これでTaskをインポートする機能の実装が完了しました。

7-7 ページネーション

ページネーションとは？

表示したいレコードがとても膨大にある時に、そのレコードを一度に全て表示するのではなく、複数のページに分けて表示させる機能です。そのようにすることで、見つけたいレコードを見つけやすくするとともに、表示するデータがそれほど多くないので、処理速度も落ちることはありません。Railsでは、kaminariというgemがページネーションを提供しています。

まずkaminariをインストールします。その後、pageというスコープを使います。
↓現場で使えるRuby on Railsのコード例

# app/controllers/tasks_controller.rb

# params[:page]にページ番号が入ります。
def index
  @q = current_user.tasks.ransack(params[:q])
  @tasks = @q.result(distinct: true).page(params[:page])
end

7-7-3 ビューにページネーションのための情報を表示する

paginateヘルパー

現在どのページを表示しているのかの情報
他のページに移動するためのリンク

page_entries_infoヘルパー

全データが何件なのかといった情報

# app/views/tasks/index.html.slim

.mb-3
  =paginate @tasks
  =page_entries_info @tasks

動作を確認するためにはそれなりにデータが必要になるためコンソールで以下のように実行します。また、初期データを入れる際に、コンソールではなくseed-fuを使うやり方もあります。seed-fuの使い方

> user = User.find(1)
> 100.times {|i|user.tasks.create!(name: "サンプルタスク#{i}")}

(※)kaminariが内部で用意してくれている翻訳ファイルは英語なので、日本語にしたい場合は翻訳する必要があります。

7-7-5 デザインの調整

paginateヘルパーが表示に利用するパーシャルテンプレートをアプリケーション内に用意し、自分でカスタマイズすることでデザインを好きなように調整することができます。 kaminariの提供するジェネレータで生成しますが、テーマ(Thema)と呼ばれるデザインの種類を指定できます。利用できるテーマの一覧はgithubから確認できます。

$ bin/rails g kaminari:views 指定したいファイル名

一度に表示する件数を変更する

kaminariでは、1ページに25件までのデータを表示するという設定がデフォルトで指定されていますが、その表示件数を変更する方法もあります。その方法は、以下の3つです。

1. perスコープを使用する方法

perスコープ kaminariで提供されているスコープです。1ページあたりに表示する件数を指定することが出来ます。perスコープに引数として渡した数字が、1ページあたりに表示する件数として反映されます。

# タスク一覧機能だけ、1ページあたり50件のデータを取得したい
# indexアクション内にperスコープを用いて、表示件数を変更する
def index
    
  # @tasks = @q.result(distinct: true).page(params[:page])部分を変更
  @tasks = @q.result(distinct: true).page(params[:page]).per(50)

end

2. paginates_perを使って、モデルごとの表示件数を指定する方法

# taskモデルの1ページのデフォルト表示件数を50件に指定します
# app/models/tasks.rb内に記述
class Task < ApplicationRecord
  paginates_per 50
    
  ~省略~
end

3. configファイルを設定する方法

Kaminari全体としての表示件数のデフォルトを変更します。下記のコマンドで、Kaminariの設定ファイルが生成されます。

$ bin/rails g kaminari:config

この設定ファイル内に、表示件数の設定を記述します。

# config/initializers/kaminari_config.rb
Kaminari.configure do |config|
  # ここではデフォルトの表示件数を10件に設定しています。
  config.default_per_page = 10
  
  ~省略~
end

参照

Action View Form Helpers
https://guides.rubyonrails.org/form_helpers.html#uploading-files
GitHub kaminari_themes
https://github.com/amatsuda/kaminari_themes GitHub kaminari https://github.com/kaminari/kaminari railsで初期データを入れる(seed-fuの使い方) https://qiita.com/ko2ic/items/be96e450a33d631e0059

６時だョ!!全員集合!!

Rails・JavaScrictを中心にアウトプットします。