無限スクロール（スタブ実装）
一番下までスクロールすると次の項目を自動で読み込む、無限スクロールのひな形です。リストの末尾に置いた監視用の番兵要素を IntersectionObserver で監視し、それが画面に入った瞬間に追加読み込みを実行します。読み込み中はローダーとスピナーを出し、二重実行を防ぐフラグで連続発火を抑えています。
解説
一番下までスクロールすると次の項目を自動で読み込む、無限スクロールのひな形です。リストの末尾に置いた監視用の番兵要素を IntersectionObserver で監視し、それが画面に入った瞬間に追加読み込みを実行します。読み込み中はローダーとスピナーを出し、二重実行を防ぐフラグで連続発火を抑えています。この例はダミーデータを setTimeout で生成するスタブなので、実際の API 呼び出しに差し替えて使う前提です。
使いどころ
- SNS のタイムラインや商品一覧の継ぎ足し表示
- ページ送りボタンを置きたくない縦長フィード
- 件数の多い検索結果を少しずつ描画したい画面
IntersectionObserver はスクロール量を毎回計算する方式より軽く、無駄な処理が少ないのが利点です。実装では setTimeout の部分を 実際の取得処理に置き換え、データが尽きたら監視を解除する終了条件を入れてください。終わりが見えない構造になりがちなので、フッターやコンテンツ総数の見せ方にも配慮すると親切です。
使用例・適したシーン
- LP の演出強化
- 記事の読了率向上
- ストーリーテリング表現
よくある質問
ダミーデータを実際の通信に差し替えられますか
はい。読み込み処理の中で setTimeout を使ってダミー項目を作っている部分を、サーバーからデータを取得して描画する処理に置き換えてください。読み込み中フラグはそのまま二重実行の防止に使えます。
スクロール監視に IntersectionObserver を使う利点は何ですか
末尾の要素が画面に入ったかどうかをブラウザ側が効率よく判定してくれるため、スクロールのたびに位置を計算する方式より処理が軽く、なめらかに動きます。