JavaScriptのInfinite Scrollプラグインについて現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptのInfinite Scrollプラグインについて解説しています。Infinite Scrollプラグインを使うと、無限スクロールを実装することができます。基本の記述方法と処理の仕組みを学びましょう。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

JavaScriptのInfinite Scrollプラグインについて、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

 

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

Infinite Scrollプラグインについて詳しく説明していくね!

大石ゆかり

お願いします!

 

目次

 

Infinite Scrollプラグインとは

JavaScriptで作られている複数のページをつなげて表示するプラグインです。

 

[PR] フロントエンドで挫折しない学習方法を動画で公開中

Infinite Scrollプラグインを使ってできること

複数のページの情報を画面の下に追加して表示することで、遷移をせずにスクロールの動きだけでコンテンツが閲覧できます。
次のページが存在する限りずっとスクロールできます。

また、追加されるページは、タイトルやフッター部分などを含めたページ全体ではなく、指定したコンテンツ部分だけなのでスクロールの動作にあわせて情報をスムーズに閲覧できます。

 

Infinite Scrollプラグインの使い方

主な作業は下記の3つです。
わずかな記述でスクロールでコンテンツが追加されるようになります。
1、Infinite Scroll.jsを読み込む
2、追加するコンテンツのHTMLの要素に、class属性で名前をつける
3、JavaScriptで追加するページのコンテンツを指定する

Infinite Scrollのサイトで、詳細なドキュメントの確認ができます。

 

実際に書いてみよう

オプションの指定方法によって、いろいろな形のコンテンツに対応できます。
今回はなるべく少ない記述で簡単に実装する例を紹介します。

まずは、Infinite Scroll.jsを読み込みます。
サイトからダウンロードしてパスを記述しても良いですが、
CDNというネットワーク上から直接リンクするURLがInfinite Scrollのサイトに記載されているのでこちらを使うのが楽です。

下記のscriptタグを記述するだけで読み込みできます。

<script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.min.js"></script>

次にHTMLの要素を準備します。
後でJavaScriptで指定するので、追加する要素を囲っている要素と、追加する要素にclass属性の名前をつけます。
名前はわかりやすいものを自由につけて構いません。
下記のような形になります。

<div class="container">
  <div class="targetContents">
    <!-- ここの要素が追加される対象になります。 -->
  </div>
</div>

ここでは、追加する要素を囲っているdiv要素にclass名をcontainerとつけています。そして、追加する要素になるdiv要素にclass名をtargetContentsとつけています。

追加する要素は複数用意することもできます。複数の場合は、同じclass属性の名前をつけてください。

次にJavaScriptの記述です。
InfiniteScrollをnewで生成して、第一引数に追加するコンテンツを囲った要素、第2引数にオプションを指定します。
下記のような形です。

new InfiniteScroll( '.container',{
  path: 'page{{#}}.html',
  append: '.targetContents',
});

第一引数では、HTMLで設定した追加する要素を囲うdivにつけたclass名の.containerを渡しています。
JavaScriptでElementを取得して渡しても同じ動作になります。
第2引数では、pathで次のページのURLを指定します。
指定方法はいくつかありますが、URLが〜2.html 〜3.htmlと数が増えるような形になっている場合は
{{#}} と記述することで、{{#}}の箇所が2から1つずつ増やした数字に置き換わったURL文字列になります。
URLの文字列が数字が増えるようなものではなく、バラバラな場合は関数を渡すことで対応できます。
例えば、下記のような関数を作成して関数名をpathに指定することで自由なURLを連続してつなげることができます。
this.loadCountに読み込みをおこなった回数が格納されているので、これとURLを格納した配列を対応させています。

function getNextURL(){
let nextURLArray = [
'index.html',
'about.html',
'help.html',
'contact.html'
];
  return nextURLArray[ this.loadCount ];
}

appendでは、追加する要素につけたclass属性の名前を指定します。

これで、スクロールするごとに次のページの指定したコンテンツが追加されて表示されます。
オプションの指定方法を変えることで、ボタンで次のページを読み込ませたり、最後のページで読み込みをとめたりといった動作もできます。

 

まとめ

Infinite Scrollを使ってコンテンツをスクロールでつなげて表示する方法を紹介しました。

 

監修してくれたメンター

横山茂雄(よこやましげお)

フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。

言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。