Gemを使ったページネーションの追加方法

<!-- wp:heading -->
<h2>ページネーションとは</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>縦に長いページがあった時、複数のページに分割して表示で切るようにするすることで、Googleサイトを例にすると一番下に出てくるページ数のことです。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>下図に参考画像載せます。</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":615,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://toyohiro.xyz/wp-content/uploads/2020/07/4c89a6da802be173e1914be853d0c4c4.png" alt="" class="wp-image-615"/></figure>
<!-- /wp:image -->

<!-- wp:heading -->
<h2>Railsを使ってページネーションを追加するには</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Gemをインストールしてページネーション機能を簡単に追加することができますのでこれから手順を書いていきます。</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>追加手順</h3>
<!-- /wp:heading -->

<!-- wp:heading {"level":4} -->
<h4>①Gemfileに「gem kaminari」を記述して、ターミナルで「bundle install」する</h4>
<!-- /wp:heading -->

<!-- wp:loos-hcb/code-block {"fileName":"Gemfile"} -->
<div class="hcb_wrap"><pre class="prism undefined-numbers lang-plane" data-file="Gemfile"><code>#一番下の行に記述し保存する
gem &#39;kaminari&#39;</code></pre></div>
<!-- /wp:loos-hcb/code-block -->

<!-- wp:loos-hcb/code-block {"fileName":"ターミナル"} -->
<div class="hcb_wrap"><pre class="prism undefined-numbers lang-plane" data-file="ターミナル"><code>$ bundle install</code></pre></div>
<!-- /wp:loos-hcb/code-block -->

<!-- wp:heading {"level":4} -->
<h4>②「rails s」で仮想サーバーを立ち上げる</h4>
<!-- /wp:heading -->

<!-- wp:loos-hcb/code-block {"fileName":"ターミナル"} -->
<div class="hcb_wrap"><pre class="prism undefined-numbers lang-plane" data-file="ターミナル"><code>$ rails s</code></pre></div>
<!-- /wp:loos-hcb/code-block -->

<!-- wp:heading {"level":4} -->
<h4>③コントローラーファイルに「kaminari」の専用メソッドを記述する</h4>
<!-- /wp:heading -->

<!-- wp:loos-hcb/code-block {"fileName":"tweets_controller.rb"} -->
<div class="hcb_wrap"><pre class="prism undefined-numbers lang-plane" data-file="tweets_controller.rb"><code>def index
  @tweets = Tweet.page(params[:page]).per(5)
end</code></pre></div>
<!-- /wp:loos-hcb/code-block -->

<!-- wp:paragraph -->
<p>上記のコードでtweetテーブルからindexメソッドでデータを取得して５件までは１ページ目にそれ以降を２ページ目に表示する内容をインスタンス変数（@tweets）に代入する。</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>専用メソッドの解説</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><strong><em>pageメソッド</em></strong>：ページネーションにおけるページ数の指定でビューにリクエストを送る時に「params」に「pageと言うキーが追加」され、それが値となる。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong><em>perメソッド</em></strong>：１ページあたりに表示する件数の指定。引数の値がそのまま表示数となります。（今回は５件）</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4>④ビューファイルを編集し、必要なページにページネートが表示されるようにする。</h4>
<!-- /wp:heading -->

<!-- wp:loos-hcb/code-block {"fileName":"index.html.erb"} -->
<div class="hcb_wrap"><pre class="prism undefined-numbers lang-plane" data-file="index.html.erb"><code> &lt;%= paginate(@tweets) %&gt;</code></pre></div>
<!-- /wp:loos-hcb/code-block -->

<!-- wp:paragraph -->
<p>コントローラーからの変数（@tweets）を引数として与えることでpageメソッドとperメソッドの引数からデータが渡されてページネーションが表示される。</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>まとめ</h2>
<!-- /wp:heading -->

<!-- wp:list -->
<ul><li>ページネーションとは１ページに表示する件数を決めて納まりきらない時は、次ページに表示させる機能</li><li>Railsならgemを使って簡単に実装ができる。</li><li>gem kaminari専用メソッドがある。</li></ul>
<!-- /wp:list -->