IntersectionObserver の基本 — 要素が見えた時のコールバック利用
Web ページで「ある要素が画面に入ったかどうか」を調べたいときに便利なのが IntersectionObserver です。
初心者は「IntersectionObserver = 要素が画面に見えたかどうかを監視する仕組み」と覚えると理解しやすいです。
基本の考え方
- 監視したい要素を指定する。
- IntersectionObserver を作成し、コールバック関数を登録する。
- 要素が画面に入ったり出たりすると、コールバックが呼ばれる。
基本のコード例
// 監視対象の要素
const target = document.querySelector("#myElement");
// コールバック関数
const callback = (entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
console.log("要素が見えた！");
} else {
console.log("要素が見えなくなった");
}
});
};
// IntersectionObserver を作成
const observer = new IntersectionObserver(callback);
// 要素を監視開始
observer.observe(target);
entry.isIntersecting→ 要素が画面に入っているかどうか。observer.observe(el)→ 要素を監視開始。
よく使うテンプレート集
一度だけ実行して監視解除
const callback = (entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
console.log("一度だけ実行");
observer.unobserve(entry.target); // 監視解除
}
});
};
オプションで監視範囲を調整
const observer = new IntersectionObserver(callback, {
root: null, // ビューポートを基準
rootMargin: "0px", // 余白
threshold: 0.5 // 50%見えたら発火
});
例題: 画像の遅延読み込み（Lazy Load）
<img data-src="photo.jpg" alt="写真" id="lazyImage" />
<script>
const img = document.querySelector("#lazyImage");
const callback = (entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
img.src = img.dataset.src; // 実際の画像を読み込む
observer.unobserve(img); // 監視解除
}
});
};
const observer = new IntersectionObserver(callback);
observer.observe(img);
</script>
- 効果: 画像が画面に入ったときだけ読み込むので、ページ表示が速くなる。
実務でのコツ
- 無限スクロールに応用: ページ下部の要素を監視して「次のデータを読み込む」処理を追加できる。
- 広告やアニメーション: 要素が見えた瞬間にアニメーションを開始するなどに使える。
- パフォーマンスに優しい: スクロールイベントを毎回処理するより効率的。
練習問題（要素が見えたら色を変える）
const box = document.querySelector("#box");
const callback = (entries) => {
if (entries[0].isIntersecting) {
box.style.backgroundColor = "lightgreen";
} else {
box.style.backgroundColor = "lightgray";
}
};
const observer = new IntersectionObserver(callback);
observer.observe(box);
直感的な指針
- IntersectionObserver = 要素が見えたかどうかを監視する仕組み。
- コールバックで「見えた」「見えなくなった」を判定。
- Lazy Load や無限スクロールに応用できる。
- 初心者は「色を変える」「画像を読み込む」で練習すると理解が深まる。
これを覚えれば「要素が画面に入った瞬間に処理を実行」できるようになり、モダンな Web アプリでよく使われる仕組みを簡単に実装できます。