無限スクロール（IntersectionObserver） — const obs = new IntersectionObserver(cb); obs.observe(el)
Web ページで「下までスクロールすると自動で次のデータを読み込む」仕組みを 無限スクロール と呼びます。
初心者は「IntersectionObserver = 要素が画面に見えたかどうかを監視する仕組み」と覚えると理解しやすいです。
基本の考え方
- 監視対象の要素（el） を用意する（例: ページの一番下にダミー要素を置く）。
- IntersectionObserver で「要素が画面に入ったか」を監視。
- 入ったらコールバック関数（cb）が呼ばれる。
- そこで「次のデータを読み込む」処理を実行。
基本のコード例
// 監視対象の要素（ページ下部に置く）
const sentinel = document.querySelector("#sentinel");
// コールバック関数
const callback = (entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
console.log("要素が見えた！次のデータを読み込む");
loadMore(); // データ追加処理
}
});
};
// IntersectionObserver を作成
const obs = new IntersectionObserver(callback);
// 要素を監視開始
obs.observe(sentinel);
function loadMore() {
const list = document.querySelector("#list");
for (let i = 0; i < 5; i++) {
const item = document.createElement("div");
item.textContent = "アイテム " + Math.random().toString(36).slice(2);
list.appendChild(item);
}
}
よく使うテンプレート集
監視対象を複数指定
const targets = document.querySelectorAll(".watch");
targets.forEach(el => obs.observe(el));
オプションで監視範囲を調整
const obs = new IntersectionObserver(callback, {
root: null, // ビューポートを基準
rootMargin: "0px", // 余白
threshold: 0.5 // 50%見えたら発火
});
一度だけ監視して解除
const callback = (entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
console.log("一度だけ実行");
observer.unobserve(entry.target);
}
});
};
例題: 無限スクロールで記事を追加
<div id="articles"></div>
<div id="sentinel"></div>
<script>
const sentinel = document.querySelector("#sentinel");
const callback = (entries) => {
if (entries[0].isIntersecting) {
addArticles();
}
};
const obs = new IntersectionObserver(callback);
obs.observe(sentinel);
function addArticles() {
const container = document.querySelector("#articles");
for (let i = 0; i < 3; i++) {
const article = document.createElement("p");
article.textContent = "記事 " + Date.now();
container.appendChild(article);
}
}
</script>
- 効果: ページ下部の
#sentinelが見えるたびに記事が追加される。
実務でのコツ
- 監視対象は「ページ下部のダミー要素」にするのが定番。
- API と組み合わせる:
fetchでサーバーからデータを取得して追加。 - パフォーマンスに注意: 無限スクロールは便利だが、ユーザーがどこまで見たか分かりにくいので「ページ番号リンク」と併用することもある。
練習問題（画像ギャラリーの無限スクロール）
function loadImages() {
const gallery = document.querySelector("#gallery");
for (let i = 0; i < 4; i++) {
const img = document.createElement("img");
img.src = `https://picsum.photos/200?random=${Math.random()}`;
gallery.appendChild(img);
}
}
const sentinel = document.querySelector("#sentinel");
const obs = new IntersectionObserver(entries => {
if (entries[0].isIntersecting) loadImages();
});
obs.observe(sentinel);
直感的な指針
- IntersectionObserver = 要素が見えたかどうかを監視する仕組み。
- 無限スクロール = 下まで来たら次のデータを追加。
- 監視対象はページ下部のダミー要素。
- 初心者は「リスト追加」「記事追加」「画像追加」で練習すると理解が深まる。
これを覚えれば「スクロールに応じて自動でコンテンツを追加」できるようになり、モダンな Web アプリでよく使われる無限スクロールを実装できます。