Rails コース

Gem入門2

前章に引き続き、movieプロジェクトに新しい機能を追加しながら、代表的なgemの使い方を学びましょう。今回は「ページネーション(ページ送り、ページ割り)」です。
現在、worksのindexページには登録されている複数の映画作品が並んでいますが、その登録が100、200と増えていった時、全てを一つのページで表示させるととても縦に長いページになり、閲覧しにくくなことが想定されます。ページネーションはそれらを複数のページに分割して表示させる機能で、データの一覧を表示させるindexページなどでよく利用されます。

今回はworksのindexページにページネーションを実装しましょう。indexページを最初に開いた時に表示される作品は「9作品」とし、下部に設置したページのリンクをめくるごとに、次の9作品が閲覧できるようにします。

ページネーションの実装には、gem「kaminari」を利用します。
bootstrapとの相性もよく、シンプルなコードで実装できるため、広く利用されているgemです。
早速Gemfileに以下を追記し、bundle installを実行しましょう。

gem 'kaminari'

controllerを編集

次に、works_controllerを編集します。indexアクションを定義している部分を以下のように書き換えます。

@works = Work.all.page(params[:page]).per(9)

公式ドキュメントによると、pageは「何ページ目を表示させるか」を指示する部分です。特定のページ数ではなくユーザーが指定したページを表示させるためには、後ほど設置するページリンクから与えられるparamsを使って、ユーザーが指定するページ数のデータを受け取る必要がありそうです。ユーザーが指定するページ数を表示させるには、.page(params[:page])とします。
perは「1ページに何件のworkを表示させるか」を指示する部分です。今回は1ページあたり9作品を表示させるため、.per(9)とします。

viewを編集

次に、worksのindexページを編集します。ページネーションを実際に表示させたい場所に、以下を追加してください。

=paginate @works

一度ブラウザで確認してみましょう。ページネーションがきちんと表示されましたか?

この教材はメンバー専用です

メンバー専用の教材にアクセスするには、
ハッカーIDでログインしてください。

or