先生と生徒の会話形式で理解しよう

生徒

「Railsで記事の一覧ページを作ったんですが、全部一気に表示されてしまって見づらいです…」

先生

「それならページネーション（ページ分割）を使いましょう。1ページに表示する件数を制限することで、見やすくなる上に、読み込み速度も改善されますよ。」

生徒

「それって難しいんですか？何かライブラリを使うんですか？」

先生

「Railsには、kaminariやpagyという便利なページネーションライブラリがあります。使い方も簡単なので、順番に見ていきましょう！」

1. ページネーションとは？なぜ必要？

ページネーション（pagination）とは、たとえば「全100件」のデータを「10件ずつ」で「ページを分けて表示」する仕組みのことです。

すべてを一度に表示すると、ページが縦に長くなってしまったり、読み込みが遅くなったりします。ユーザー体験（UX）の向上やパフォーマンス改善のためにも、ページネーションはとても大切です。

2. kaminariでページネーションを実装する方法

kaminari（カミナリ）はRailsで人気のページネーションライブラリです。Gemを追加するだけで簡単に使えます。


# Gemfile
gem 'kaminari'

その後、次のコマンドでインストールします。


$ bundle install

コントローラでは次のように書くだけです。


# app/controllers/posts_controller.rb
class PostsController < ApplicationController
  def index
    @posts = Post.order(created_at: :desc).page(params[:page]).per(10)
  end
end

page(params[:page])で現在のページを指定し、per(10)で1ページあたりの表示件数を決めます。

3. ビューでページリンクを表示する

一覧画面の下に「前へ」「次へ」などのページリンクを出すには、ビューに次のように書きます。


<%= paginate @posts %>

これだけでページリンクが自動で表示されます。

4. pagyで高速なページネーション

pagy（ペイジー）は、より高速で軽量なページネーションライブラリです。大量データにも強く、最近では人気が高まっています。


# Gemfile
gem 'pagy'

インストール後、ApplicationControllerに次の行を追加します。


class ApplicationController < ActionController::Base
  include Pagy::Backend
end

コントローラ側では次のように書きます。


class PostsController < ApplicationController
  def index
    @pagy, @posts = pagy(Post.order(created_at: :desc), items: 10)
  end
end

ビューでは以下のように書きます。


<%= pagy_nav(@pagy) %>

5. ソート機能で並び順をコントロールする

記事を「新しい順」「古い順」「タイトル順」などで並び替えたい場合、ソート（sort）機能を追加しましょう。

URLに?sort=created_at_descのようにパラメータをつけて、コントローラで処理します。


class PostsController < ApplicationController
  def index
    order_option = case params[:sort]
                   when 'title_asc'
                     { title: :asc }
                   when 'title_desc'
                     { title: :desc }
                   else
                     { created_at: :desc }
                   end
    @pagy, @posts = pagy(Post.order(order_option), items: 10)
  end
end

ビュー側ではリンクをつけて、並び替えできるようにします。


<%= link_to '新しい順', posts_path(sort: 'created_at_desc') %>
<%= link_to 'タイトル順', posts_path(sort: 'title_asc') %>

これでUX（ユーザー体験）も向上し、一覧ページの操作性がよくなります。

6. ページネーションとソートはセットで使おう

ページネーションとソートは、一覧ページのUX（使いやすさ）とパフォーマンス（速さ）を両立するために、非常に重要です。

kaminariやpagyのどちらを使っても、見やすくて軽快なページが作れます。特に記事や商品など、データがたくさんあるアプリでは必須の機能になります。

初心者でもすぐに導入できるので、ぜひ自分のRailsアプリで試してみてください。

まとめ

Railsで大量のデータを扱う一覧ページを作成するとき、ページネーションやソート機能がどれほど重要かを改めて振り返ると、情報の扱い方や見せ方がアプリ全体の印象を左右することに気づきます。特に、かみなりのように直感的に導入できるkaminari、そして高性能で軽量なpagyは、初心者でも扱いやすく、一覧表示の快適さを大きく向上させる道具としてとても頼りになります。ページを分割する構造があるだけで、画面の見やすさ、読み込み速度、そしてデータ操作のしやすさが大幅に改善されます。また、並び替えを自在に行えるソート機能と組み合わせることで、利用者が望む順番で情報を確認できるようになり、より自然な操作感を実現できます。実際にアプリケーションを運用する場面を想像すると、記事一覧や商品一覧など、さまざまな場面でページネーションとソートを併用する必要が生まれます。Railsではこの二つを簡潔なコードで扱うことができ、柔軟にレイアウトへ組み込める点も魅力です。これまでの学びを踏まえ、以下のようなコードを使えば、より洗練されたページ表示が実現できます。

サンプルプログラム（ページネーションとソートの組み合わせ）


# app/controllers/posts_controller.rb
class PostsController < ApplicationController
  def index
    order_option = case params[:sort]
                   when 'title_asc'
                     { title: :asc }
                   when 'title_desc'
                     { title: :desc }
                   else
                     { created_at: :desc }
                   end

    @pagy, @posts = pagy(Post.order(order_option), items: 10)
  end
end


<div class="sort-links">
  <%= link_to '新しい順', posts_path(sort: 'created_at_desc') %>
  <%= link_to '古い順', posts_path(sort: 'created_at_asc') %>
  <%= link_to 'タイトル昇順', posts_path(sort: 'title_asc') %>
  <%= link_to 'タイトル降順', posts_path(sort: 'title_desc') %>
</div>

<div class="pagination-area">
  <%= pagy_nav(@pagy) %>
</div>

このような構成にすることで、ページ遷移と並び替えが自然につながり、閲覧する人が迷わず操作できるUIが整います。Railsで扱えるデータが増えれば増えるほど、こうした仕組みの重要性が大きくなり、アプリの品質を左右する基盤ともいえます。ページネーションとソートは単なる補助機能ではなく、情報の伝え方を整えるための大切な柱です。これらを取り入れたことで、一覧ページの操作性が向上し、細かな改善がアプリ全体の使いやすさへとつながっていくはずです。

先生と生徒の振り返り会話

生徒

「今日の内容を通して、ページネーションとソートって一覧ページには欠かせない仕組みなんだなって実感しました。特に、kaminariもpagyもすぐ使えるところがありがたいです。」

先生

「そうですね。どちらのライブラリも取り入れやすく、Railsの開発を快適にしてくれます。それに、並び替えと組み合わせることでページの見やすさと操作性が大きく変わります。」

生徒

「実際にサンプルコードを読みながら動かすと、意外とシンプルで驚きました。ページを切り替えられるだけで、画面の印象もずいぶん変わるんですね。」

先生

「その通りです。ページネーションやソートはユーザーが快適に情報へアクセスできるようにするための工夫です。今回学んだコードを活かして、より見やすいアプリを作ってみてください。」

生徒

「はい！次はもっと多いデータでも快適に動くページを作れるように挑戦してみます！」