CodeZine(コードジン)

特集ページ一覧

Railsで「Kaminari」を使ってページネーションを実装しよう

これだけは押さえておきたい! Rails開発で使えるgemパッケージ/ツール 第5回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2018/09/14 14:00
目次

Kaminariを使うための最低限の準備

 Railsアプリケーションの準備ができたら、Kaminariによるページネーションの動作を確認することができる最低限の準備を以下の通り行います。

  • ScaffoldによるArticleモデル等の作成
  • 動作確認用のデータ準備
  • Kaminari用のコード修正

ScaffoldによるArticleモデル等の作成

 ページネーションの動作確認のために、ここではタイトル(title)と本文(body)をフィールドに持つ記事(Article)モデルを作成します。ページネーションの動作確認にはRailsが提供するScaffoldの一覧(indexアクション)があれば十分なので、以下のコマンドでArticleモデル等を作成しましょう。

bin/rails g scaffold Article title:string body:text

 実行するとコントローラー、モデル、ビュー、マイグレーションファイル等が作成されます。

作確認用のデータ準備

 まずは事前準備として、データベース/テーブルの作成を以下のコマンドで行います。

bin/rails db:create db:migrate

 上記の通り、データベースの作成とテーブルの作成を一度に行うこともできます。

 次に、ページネーションの動作確認のためには多数のレコードを事前に作成する必要があります。ここでは、Railsが提供するフィクスチャ(Fixtures)を使ってarticlesテーブルにサンプルデータを入れます。

 以下のようにフィクスチャファイルを修正します。

[リスト 1]test/fixtures/articles.yml
<% 30.times do |n| %>
article<%= n %>:
  title: <%= "title#{n}" %>
  body: <%= "body#{n}" %>
<% end %>

 上記の通り、RailsのフィクスチャファイルのYAMLは、ERB形式で記述することができます。ここでは、titleとbodyの値が異なる20件のサンプルデータを入れるよう定義しています。

 フィクスチャに定義したサンプルデータをarticlesテーブルに取り込むために、以下のコマンドを実行します。

bin/rails db:fixtures:load

 上記コマンドを実行しても、標準出力には何も表示されません。ちゃんとデータが取り込まれたかを確認するには、ログ(log/development.log)を確認するか、railsコンソールで件数を確認しておきます。

 以下はrailsコンソールでの確認結果です。

bin/rails c

 ▼

Loading development environment (Rails 5.2.0)
irb(main):001:0> Article.count
   (8.7ms)  SELECT COUNT(*) FROM "articles"
=> 30

 ここまででまずはRailsアプリケーションの動作確認をしておきましょう。以下のコマンドでpumaサーバーを起動します。

bin/rails s

 「http://localhost:3000/articles」にアクセスすると以下の通り表示されます。

Articleの一覧
Articleの一覧

Kaminari用のコード修正

 これでKaminariが提供するページネーションの機能を動作確認する下準備が整いました。ここからはKaminariの動作定義を行っていきます。

 まずはgemをインストールするために、GemfileにKaminariを追記します。

[リスト 2]Gemfile
…(中略)…
gem 'bootsnap', '>= 1.1.0', require: false

gem 'kaminari'

group :development, :test do
…(中略)…

 以下のコマンドを実行し、Kaminariをインストールします。

bin/bundle

 コントローラーのindexアクションの記述を以下のように修正します。

[リスト 3]app/controllers/articles_controller.rb
  def index
    @articles = Article.page params[:page]
  end

 pageメソッドは、Kaminariが提供するメソッドで、pageというGETパラメーターにセットされた値(params[:page])を引数に取ります。指定されたページに該当するデータを取得します。なお、params[:page]が指定されない場合はデフォルトで1が指定されます。つまり1ページ目を取得します。

 内部的には、SELECT文のLIMIT/OFFSETの指定を1ページあたりの表示件数を指定されたページごとに変えてくれています。なお、Kaminariの「1ページあたりの表示件数」のデフォルト値は「25」です。

 この時点でpumaサーバーをCtrl+Cでいったん停止し、再度rails sコマンドで起動して再度一覧の「http://localhost:3000/articles」にアクセスすると以下のように25件表示されていることがわかります。

1ページ目の一覧
1ページ目の一覧

 この時点で既にページネーションの基本的な動作が実現できていることをさらに確認するために、2ページ目を意味するpageパラメーターを付与した「http://localhost:3000/articles?page=2」にアクセスすると、残りの5件が表示されることが確認できます。

2ページ目の一覧
2ページ目の一覧

 ログファイルを確認すると1ページ目にアクセスした場合のSELECT文と2ページ目にアクセスした場合のSELECT文は以下のようにLIMITに1ページあたりの表示件数である25がセットされ、OFFSETがページに即した値になっています。

[リスト 4]log/development.log
# 1ページ目にアクセスした場合のSELECT文
Article Load (0.3ms)  SELECT  "articles".* FROM "articles" LIMIT $1 OFFSET $2  [["LIMIT", 25], ["OFFSET", 0]]

# 2ページ目にアクセスした場合のSELECT文
Article Load (0.4ms)  SELECT  "articles".* FROM "articles" LIMIT $1 OFFSET $2  [["LIMIT", 25], ["OFFSET", 25]]

 次に、ビューファイルにページ送りのリンクを設置します。

[リスト 5]app/views/articles/index.html.erb
…(中略)…
</table>

<%= paginate @articles %>

<br>
…(中略)…

 paginateは、Kaminariが提供するヘルパーメソッドです。コントローラーでpageメソッドを使用して代入したインスタンス変数(@articles)を引数に指定しています。たったこれだけで、ページ送りの基本的なHTMLを動的に出力してくれます。

 表示を確認するために再度「http://localhost:3000/articles」にアクセスすると以下のようにページ送り用の表示が追加されています。

1ページ目のページ送り
1ページ目のページ送り

 同様に、2ページ目のページ送りが正しく動作するかも確認しておきましょう。2ページ目にアクセスすると以下の通り表示されます。

2ページ目のページ送り
2ページ目のページ送り

  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:これだけは押さえておきたい! Rails開発で使えるgemパッケージ/ツール

もっと読む

著者プロフィール

  • WINGSプロジェクト 竹馬 力(チクバ ツトム)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5