ライブラリで簡単に無限スクロールを実現 JS/jQuery/PHP/PDO/MySQLを使用して #JavaScript

jQueryライブラリの infinite-scroll を利用します。

HTML, JS

まずはHTMLおよびJavaScriptの部分。

注意点としてはloadNext.phpと記述する部分で追加部分を読み込むわけだが、ここにpage=1のような数値が必須である点。その数字を読み込むごとに増やしていく前提でこのライブラリは作られている。ここは自動で増えていく。

そのため、この例のようにpage=1としておけば勝手に次はpage=2として自動で読み込んでくれる。便利なんだが不便なんだか分からんが。

timeline.html

<div class="container">
    <!--ここには既存のコンテンツ（最初に表示されるコンテンツ）-->
    <div>すでに読み込まれているコンテンツ</div>
    <div>すでに読み込まれているコンテンツ</div>
    <div>すでに読み込まれているコンテンツ</div>

    <!-- 無限スクロールで読み込みたいところ -->
    <div>
      <a class="pagination__next" href="loadNext.php?page=1"></a>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://unpkg.com/infinite-scroll@4/dist/infinite-scroll.pkgd.min.js"></script>
<script>
$('.container').infiniteScroll({ //.containerはHTML側で指定しているwrapper的なところ。
  // options
  path: '.pagination__next', //必須。ここにスクロールしてきたら読み込まれるようにするため。
  append: '.loaded-contents', //必須。これはloadNext.phpで出力するHTMLのクラス名。表示したいところにこのクラスを記述
  debug: true, //任意。
});
</script>

PHP

次はphp

loadNext.php

// DBとの接続
// PDO
$host = "hoge";
$db = "hoge";
$user = "hoge";
$password = "hoge";
try {
$pdo = new PDO("mysql:host=$host;dbname=$db", $user, $password);
} catch (PDOException $pe) {
  die("Could not connect to the database $db :" . $pe->getMessage());
}
// SQL
$sql =  "SELECT *
         FROM hoge_table
         LIMIT 10";
$stmt = $pdo->prepare("{$sql}");
$stmt->execute();
$response_array = $stmt->fetchAll(PDO::FETCH_ASSOC);

//表示
echo "<div class='loaded-contents'>";
foreach ($response_array as $each_response) {
  echo "<p>{$each_response}</p>";
}
echo "<div class='pagination__next'>
        <a href='loadNext.php?page=2'></a> //本来はこのpageの数値は適宜変える必要あり
      </div>";
echo "</div>";

注意点

script部分のoptionsとHTMLやPHPでの対応を確認しないとミスる
page=1とかの数値を動かしていく部分はこの記事では書いていないので適宜書いてください。PHPではpageパラメータの数値を受け取ってからDBから取得すればOK
その他optionsはこちらを参照

感想。
使いづらい。ドキュメント適当すぎる。クラス名を変えないと意味不明。他にメンテナンスされている無限スクロール系のライブラリが無いから仕方なくこれを使った。