無限スクロール
ユーザーのスクロールに合わせてコンテンツを追加で読み込みます。
「無限スクロール」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。
無限スクロールとは
無限スクロールでは、次のページをクリックする代わりに、ユーザーがリストの末尾に近づくと自動的にコンテンツを追加で読み込みます。ソーシャルフィードや検索結果でよく使われています。
センチネルパターン
最も整理された手法では、センチネルを使用します。これはリストの末尾に配置する空の要素です。センチネルが表示範囲に入ったら、次のデータを取得して追加します。
// Markup pattern:
// <ul id="feed"> ...items... </ul>
// <div id="sentinel"></div> <!-- trigger element -->センチネルの監視
Intersection Observer でセンチネルを監視します。センチネルは最後の項目の後ろにあるため、その可視性からユーザーが末尾に到達したことが分かります。
const sentinel = document.getElementById('sentinel');
const observer = new IntersectionObserver(onIntersect, {
rootMargin: '200px' // load a bit early
});
observer.observe(sentinel);読み込みのトリガー
コールバック内で isIntersecting を確認します。値が true なら、次のページのデータを読み込みます。
function onIntersect(entries) {
entries.forEach(entry => {
if (entry.isIntersecting) {
loadMoreItems();
}
});
}ページの追跡
ページ番号のカウンターを保持し、読み込みごとに次の範囲のデータを取得します。取得に成功したらカウンターを増やします。
let page = 1;
async function loadMoreItems() {
const items = await fetchPage(page);
appendItems(items);
page++;
}二重読み込みの防止
コールバックは繰り返し呼び出されることがあります。loading フラグを使い、読み込み中に新しい取得が始まらないようにします。
let loading = false;
async function loadMoreItems() {
if (loading) return;
loading = true;
const items = await fetchPage(page);
appendItems(items);
page++;
loading = false;
}新しい項目の追加
取得した項目をセンチネルの前に追加します。こうするとセンチネルが増え続けるリストの末尾に残り、次の読み込みをトリガーできる状態になります。
function appendItems(items) {
const feed = document.getElementById('feed');
items.forEach(item => {
const li = document.createElement('li');
li.textContent = item.title;
feed.appendChild(li);
});
}末尾での停止
サーバーからこれ以上データが返されなくなったら、オブザーバーを切断して読み込みを停止します。これにより、空のリクエストが延々と送られるのを防ぎます。
const items = await fetchPage(page);
if (items.length === 0) {
observer.disconnect(); // no more data
return;
}rootMargin が役立つ理由
余裕のある rootMargin（たとえば 200px）を設定すると、ユーザーが実際に末尾へ到達する前に読み込みを開始できます。そのため、目に見える待ち時間なしに新しい項目が滑らかに表示されます。
new IntersectionObserver(onIntersect, {
rootMargin: '300px' // begin loading well before the end
});アクセシビリティに関する注意
無限スクロールは、キーボードやスクリーンリーダーのユーザーを閉じ込めたり、フッターを隠したりする可能性があります。フォールバックとして手動の「さらに読み込む」ボタンを用意し、ARIA のライブリージョンで新しいコンテンツを適切に通知することを検討してください。
一連の流れ
Intersection Observer を使った無限スクロールでは、センチネルを配置し、監視し、表示されたらデータを読み込んで追加します。さらに、重複した読み込みを防ぎ、データがなくなったら切断します。スクロール位置の計算は必要ありません。
確認問題
無限スクロールについての理解度を確認します。
まとめ
無限スクロールを実装しました。
- リストの後ろにセンチネル要素を配置します。
- Intersection Observer で監視します。
- 交差したら次のページを取得して追加します。
loadingフラグを使って重複した取得を防ぎます。- データが尽きたら切断します。
次は、スクロールをトリガーにしたアニメーションです。
よくある質問
「無限スクロール」レッスンは無料ですか？
はい。「無限スクロール」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。
「無限スクロール」で何を学びますか？
ユーザーのスクロールに合わせてコンテンツを追加で読み込みます。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
JavaScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「無限スクロール」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJavaScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。