LaravelのpaginateとInfinite Scrollを使い、データベース内のデータを無限スクロールで表示する

TwitterやFacebookのような、画面をスクロールしたら続きが読み込まれるUIってどうやって実装するんだろ。

と思って調べたらInfinite ScrollというJavaScriptのライブラリが見つかりました。

てことで、今回はLaravelのpaginateと無限スクロール用ライブラリのInfinite Scrollを使い、データベース内のデータを無限スクロールで表示する方法を説明します。

この記事の内容

1 Infinite Scrollとは？
2 Infinite Scroll(バージョン3)を読み込む
3 Infinite Scrollの関数を呼びだす。
4 Infinite Scrollの仕様に合わせてHTMLを書く
5 コントローラでpaginateを取得しビューに渡す。

Infinite Scrollとは？

まずInfinite Scrollについて。

これは、画面を下にスクロールすると続きのページを表示する、いわゆる「無限スクロール」のUIを簡単に実装できるJavaScriptのライブラリです。

以下が公式のサイト。
https://infinite-scroll.com/

使い方は覚えてしまえば簡単です。

必要なのは以下の手順。

jsを読み込む。
jsでInfinite Scrollの関数を呼びだす。
Infinite Scrollの仕様に合わせてHTMLを書く。
コントローラでpaginateを取得しビューに渡す。

ざっくり、そんな感じです。

Infinite Scroll(バージョン3)を読み込む

jqueryとInfinite Scrollを読み込みます。

Infinite Scrollはバージョン3を使っています。

バージョン2は使い方が全然違うので、要注意です。

それぞれのWebサイトからjsをダウロードし、Laravelプロジェクトのpublic/js/に配置します。

resources/js/app.js に以下を追記し、2つのjsを読み込みます。

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
  <head>
    （略）
    <script src="{{ asset('js/jquery.min.js') }}"></script>
    <script src="{{ asset('js/infinite-scroll.pkgd.min.js') }}"></script>

Infinite Scrollの関数を呼びだす。

無限スクロールしたいページのHTMLに以下を追加します。

<script>
var infScroll = new InfiniteScroll( '.scroll_area', {
  path : ".pagination a[rel=next]",
  append : ".post"
});
</script>

“.pagination a[rel=next]” はLaravelのpaginateが出力するリンクの形に合わせています。

Infinite Scrollの仕様に合わせてHTMLを書く

HTMLは以下のようにします。

$posts にコントローラ側で取得したデータベースのデータ入ってると思ってください。

<section class="scroll_area"
  data-infinite-scroll='{
    "path": ".pagination a[rel=next]",
    "append": ".post"
  }'
>
  @foreach($posts as $key => $post)
    <div class="post">
      <h3>{{ $post->title }}</h3>
      <p>{{ $post->text }}</p>
    </div>
  @endforeach
</section>
{{ $posts->links() }}

コントローラでpaginateを取得しビューに渡す。

コントローラ側は以下のようにします。

はいどん。

public function index()
{
    $data['posts'] = Posts::orderBy('created_at', 'desc')
        ->simplePaginate(10);
    return view('index', $data);
}

これで無限スクロールが動くようになります。

simplePaginate()を使い、ビュー側では$posts->links()を呼ぶ事で「次のページ」のリンクが出力されます。

この「次のページ」のリンクをInfinite Scrollが読み取り、続きのコンテンツをドキュメントに追加してくれます。

以上、参考になると嬉しいです。