Railsで無限スクロールの導入

使用環境
Ruby2.6.8
Rails6.1.4

完成イメージ

TwitterやYoutubeのように、ページ下層部に到達したときに次のページを自動的に読み込む機能の実装

前提

RailsアプリケーションにjQuueryの導入をしている必要があります。
jQueryの導入をしていないちょ、という方はこちらを参考に。

処理の流れ

①kaminariのインストール
②jscrollの導入
③ページネーションの実装
④無限スクロールの実装

①kaminariのインストール

おなじみgemファイルを操作してbundle installするだけです、はい。
最後の行とか、適当な場所に追加しましょう。

Gemfile

gem 'kaminari'

$ -> bundle install

②jscrollの導入

「view/application.html.erb」など、無限スクロールを実装する箇所のheadに以下の記載をしてください。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jscroll/2.4.1/jquery.jscroll.min.js"></script>

③ページネーションの実装

まずはコントローラで、viewに渡したいデータをDBから取り出します。

posts_controller.rb

def index
    @post_data = Post.all.order(created_at: :desc)
    @posts = Kaminari.paginate_array(@post_data).page(params[:page]).per(10)
end

これで「@posts」をviewに渡すことができました。次はviewファイルを変更しましょう。

posts/index.html.erb

<div class="scroll-list jscroll">
  <% @posts.each do |post| %>
    <p><%= post.name %></p>
  <% end %>
  <%= paginate @posts %>
</div>

この「<%= paginate @posts %>」は必ず書くようにしてください。ないとエラーになります。

ここまでの段階でページネーションの実装は完了しました。
最後に今回の目的である無限スクロールを実装しましょう。

④無限スクロールの実装

無限スクロールは②で導入したjscrollのおかげで以下のように記載することで、実装できます。

$(function() {
    $("無限スクロールさせたいクラス名").jscroll(
        オプションを記述できます
)
});

③で記述したhtml.erbで無限スクロールを実装する際は以下のように書くこともできます。

var jscrollOption = {
    loadingHtml: '読み込み中・・・', //記事読み込み中の表示
    autoTrigger: true, // 自動で読み込むか否か、trueで自動、falseでボタンクリックとなる。
    padding: 20, // 指定したコンテンツの下かた何pxで読み込むかを指定(autoTrigger: trueの場合のみ)
    contentSelector: '.jscroll' // 読み込む範囲の指定
};
$('.jscroll').jscroll(jscrollOption);

以上で無限スクロールの実装が完了します。
たったこれだけでUIは劇的に向上するとｐ思うので、ぜひ皆さんも無限スクロールを導入してみましょう。

参考記事

https://qiita.com/s_yasunaga/items/ab17424912ee90f853d7
https://since-inc.jp/blog/7813