【Rails】自動で次のページへ！！jscrollによるページネーションの無限スクロール

[![Image from Gyazo](https://i.gyazo.com/7e58c42cbc05292450420481355e2caf.gif)](https://gyazo.com/7e58c42cbc05292450420481355e2caf)

# 自動で次のページに移行
ページネーションを実装して思うことは、最近は次へボタンなんて存在せず、スクロールするとどんどん新しい商品やツイートが表示されたりするということだ。

今回はそれを実装する。
使うのは、gem'kaminari'（ページネーション機能） + プラグイン”jScroll”（無限スクロール）である。

### まずはgem'kaminari'でページネーションを実装

参考になるページはここです。
[【Rails初心者】ページネーションを実装して自分好みにデザインを変える](https://qiita.com/rio_threehouse/items/313824b90a31268b0074)

```ruby:Gemfile
gem 'kaminari'
```

gemを追記したら

```:ターミナル
$ bundle install
```

インストールが完了したら、コントローラーに記述する。

```ruby:products_controller.rb
class UsersController < ApplicationController
  def index
    @products = Product.order(created_at: "DESC").includes(:host).page(params[:page]).per(1)
     #.page(params[:page]).per(1)は１ページ、１つのproductだけ表示の意味
  end
end
```

次はページネーションの次へ、戻るなどのボタンを表示させる。

```haml:index.haml
= render 'shared/main-header'
.container-fluid
  .row.py-5.w-100
    = render 'shared/side'
    .col-8.main
      .jscroll
        = render partial: 'user', collection: @products, as: "product", class: "jscroll"
        .skill-list
          = paginate @products # ここを追加するだけ
          
```

これでページネーションの実装完了です。

### kaminariは遅いので、加工します。
kaminariは便利ですが、読み込みが10秒ぐらいかかって非常に重い。
だから、記述を変えます。

[参考になるサイト:巨大レコードのkaminariページネーションは工夫が必要](https://thr3a.hatenablog.com/entry/20180313/1520902569)

```ruby:products_controller.rb
class UsersController < ApplicationController
  def index
    @products = Product.order(created_at: "DESC").includes(:host).page(params[:page]).without_count.per(1)
    # .without_countを追加しています
  end
end
```

.without_countを追加することで、本来のkaminariの機能は使えなくなります。
次へボタンと戻るボタンは表示可能です。

```haml:index.haml
= render 'shared/main-header'
.container-fluid
  .row.py-5.w-100
    = render 'shared/side'
    .col-8.main
      .jscroll
        = render partial: 'user', collection: @products, as: "product", class: "jscroll"
        .skill-list
          // = paginate @products これを削除して、下記を追加
          = link_to_prev_page @products, '前のページ', class: "prev"
          = link_to_next_page @products, '次のページ', class: "next"
```

これで戻るボタンと次へボタンを表示させました。
1秒ほどで、ページを開けるようになりましたね！！

では、本題の下にスクロールすると、勝手に次のページに移行するようにしましょう！！


## 無限スクロール

### jScrollのインストール

#### CDNで追加する場合

スクリプトを読み込ませて簡単に導入しましょう！

```haml:application.html.haml
%head
  %script{src: "https://cdnjs.cloudflare.com/ajax/libs/jscroll/2.4.1/jquery.jscroll.min.js"}
```

#### 直接JSファイルを導入する場合
[jscrollのGithub](https://github.com/pklauzinski/jscroll/tree/master)からダウンロードしよう。

ZIPファイルを解答したら、
jquery.jscroll.min.jsをasset/javascripts配下におきます。

そしたら、jScrollを読み込ませるようにします

```js:assets/javascripts/application.js
//= require jquery.jscroll.min.js 
```

##### 実はここが失敗が起こりやすい箇所です！！！！
解説します
私は下記のようにしてます

```js:application.js
//= require jquery
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .
//= require jquery.jscroll.min.js
//= require popper
//= require bootstrap-sprockets
```

重要なのはここです。

```js:application.js
//= require jquery
//= require jquery.jscroll.min.js
```

これだけだとエラーなく利用できます。

```js:エラー
Uncaught TypeError: $(...).jscroll is not a function
// 「.jscrollってイベント処理なんて、知らねえぞええぞゴラアアアアアアア！！」と怒られます。これに苦戦しましたね。
```

間違えて下記にしてしまうと使えません

```js:失敗例
//= require jquery
//= require jquery.jscroll.min.js
//= require jquery3
```

//= require jquery と //= require jquery3が入っていて、
エラーが起こるパターンです。
もしも複数入っている場合、片方消しましょう。

### jQueryで無限スクロールの処理作成
では続きを進めていきます。
それではjQueryで無限スクロールの処理を作成します。


```js:jscroll用のjs
$(document).on('turbolinks:load', function() {
  $('.jscroll').jscroll({
    // 無限に追加する要素は、どこに入れる？
    contentSelector: '.jscroll', 
    // 次のページにいくためのリンクの場所は？ ＞aタグの指定
    nextSelector: 'a.next',
    // 読み込み中の表示はどうする？
    loadingHtml: '読み込み中'
  });
});
```
これでdiv.jscrollをスクロールすると.jscrollに次のページの要素を追加するよ。ということになります

詳しいオプションは下記のサイトが参考になります。
[無限スクロールのプラグイン「jScroll」の使い方](https://idotdesign.net/blog/web/js/endless-scroll-jscroll/)


これで完了です！！
エラーが難しかったですが、原因がわかってよかったです。


## 参考リンク
### kaminari系
[【Rails初心者】ページネーションを実装して自分好みにデザインを変える](https://qiita.com/rio_threehouse/items/313824b90a31268b0074)
[gem'kaminari'のオプション](http://nekorails.hatenablog.com/entry/2018/10/15/005146)
[参考になるサイト:巨大レコードのkaminariページネーションは工夫が必要](https://thr3a.hatenablog.com/entry/20180313/1520902569)
### 無限スクロール系
[kaminari + jscrollを使った無限スクロールの実装](https://qiita.com/s_yasunaga/items/ab17424912ee90f853d7)
[無限スクロールのプラグイン「jScroll」の使い方](https://idotdesign.net/blog/web/js/endless-scroll-jscroll/)
[Github:jscroll](https://github.com/pklauzinski/jscroll/tree/master)