無限スクロールの実装
ユーザーのスクロールに合わせてコンテンツを自動的に追加読み込みします
「無限スクロールの実装」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。
パターン
無限スクロールでは、ユーザーがリストの末尾に近づくと追加のコンテンツを読み込みます。最もすっきりした実装では IntersectionObserver を使用します。リストの末尾に「センチネル」要素を置いて監視し、センチネルがビューポートに入ったら次のページを取得します。
センチネル要素
最後のリスト項目の後に、見えない <div>（または「読み込み中…」というプレースホルダー）を追加します。IntersectionObserver で監視し、交差したらユーザーが末尾近くまでスクロールした合図なので、追加データを取得します。
<ul id="feed">
<li>Post 1</li>
<li>Post 2</li>
</ul>
<div id="sentinel" aria-hidden="true"></div>オブザーバーループ
交差したら、次のページを取得し、新しい項目をレンダリングして、センチネルを配置し直します（センチネルの前に項目を追加すれば、自動的にリストの末尾に留まります）。センチネルは引き続き監視されるため、監視を解除して再監視する必要はありません。
const sentinel = document.getElementById("sentinel");
const feed = document.getElementById("feed");
let page = 1;
let loading = false;
const observer = new IntersectionObserver(async (entries) => {
if (!entries[0].isIntersecting || loading) return;
loading = true;
const items = await fetchPage(page++);
items.forEach((it) => feed.insertAdjacentHTML("beforeend", renderItem(it)));
loading = false;
});
observer.observe(sentinel);読み込み状態のガード
boolean 型の loading フラグを使うと、最初のレスポンスが返る前にユーザーが高速スクロールして複数回交差した場合でも、リクエストが重複するのを防げます。これがないと同じページが何度も取得され、項目が重複して表示されます。
データの終端
サーバーが空のページを返した場合（または「これ以上ない」と通知した場合）は、センチネルの監視を解除し、リスト末尾を示すメッセージに置き換えます。その後の交差では取得処理が呼び出されず、ユーザーには末尾に到達したことがわかります。
エラー処理
fetch を try/catch で囲んでください。エラーが発生したら loading = true のままにして、自動的に再試行されないようにします。「再試行」ボタンを表示し、押されたら loading をリセットして読み込みを再実行します。これを行わないと、ネットワーク障害によって再試行が連続して発生します。
先行読み込みのための rootMargin
rootMargin: "500px" を指定すると、ユーザーがセンチネルに到達する500ピクセル前に次の取得を開始します。項目の高さと平均スクロール速度に応じて調整してください。小さすぎるとユーザーが「まだコンテンツがありません」という状態に達し、大きすぎると必要以上に先読みすることになります。
スクロール位置の復元
ユーザーが別のページへ移動して戻ってきたときは、スクロール位置を保持するとともに、それまでに読み込んだ項目を再度レンダリングする必要があります。項目を sessionStorage または Zustand 形式のストアにキャッシュし、マウント時に復元して、記憶しておいたオフセットへ scrollTo してください。
メモリに関する考慮事項
長い無限スクロールでは、数千個の DOM ノードが蓄積します。非常に長いフィード（Twitter、Facebook など）では、ウィンドウ化と組み合わせてください。ビューポートより上の項目を DOM から削除し、上方向にスクロールしたときに復元します。react-virtual や @tanstack/virtual などのライブラリを使うと効率よく処理できます。
アクセシビリティ
無限スクロールは、フッターに簡単に到達できないキーボードユーザーやスクリーンリーダーユーザーにとって使いにくい仕組みです。代替手段として「さらに読み込む」ボタンを用意し、Home/End キーでアクセスできる実際のフッターも設けてください。新しい項目を通知する Aria-live 領域も役立ちます。
モバイルのバウンススクロール
iOS のバウンススクロールでは、画面下部付近で交差が複数回発生することがあります。読み込みガードでほとんどのケースに対応できますが、バウンス中に発生する交差の急増を除外するため、300ミリ秒のデバウンスを追加してもよいでしょう。
代替案：カーソルベースのページネーション
サーバー API は、クライアントが追跡するページ番号に依存するのではなく、「次のカーソル」を返すようにしてください。これにより、スクロール中の項目の追加や削除にも対応できます。クライアントは各リクエストでカーソルを渡し、サーバーがカーソルを返さなくなったら停止します。
知識チェック
無限スクロールのIntersectionObserverコールバックで「loading」フラグが必要なのはなぜですか？
要約
無限スクロールでは、リスト末尾のセンチネル要素にIntersectionObserverを使用します。交差したら次のページを取得して描画し、監視を継続します。loadingフラグでガードし、データの終端やエラーを適切に処理し、先読み距離に合わせてrootMarginを調整します。キーボード操作の代替手段（「さらに読み込む」ボタン）を用意し、非常に長いフィードではウィンドウ化も検討します。
よくある質問
「無限スクロールの実装」レッスンは無料ですか？
はい。「無限スクロールの実装」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。
「無限スクロールの実装」で何を学びますか？
ユーザーのスクロールに合わせてコンテンツを自動的に追加読み込みします ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「無限スクロールの実装」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML Academyレッスンでコードを書いて実行できますか？
はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。