Intersection Observerとは何ですか？

要素がビューポートや親要素の表示領域に入ったかどうかを非同期で監視できるブラウザAPI。画像の遅延読み込みや無限スクロールなど、スクロール関連の実装に欠かせない。

Intersection Observerのポイントは？

要素がビューポートに表示されたかどうかを非同期で効率的に検知できるAPI。画像の遅延読み込み（lazy loading）や無限スクロールの実装に広く使われている。scrollイベントの監視と比べてパフォーマンスが圧倒的に優れている

【インターセクションオブザーバー】

💡 「見えた？」を自動で教えてくれる、スクロール監視の優等生

📌 このページのポイント

Intersection Observerのイメージ

ひよこ

要素が画面に入ったかどうかって、スクロールイベントで調べられるんじゃないの？

ペンギン先生

できるけど、scrollイベントは1秒間に何十回も発火するから、getBoundingClientRect()を毎回呼ぶとパフォーマンスが悪いんだ。Intersection Observerはブラウザが最適なタイミングで非同期にコールバックを呼んでくれるから、メインスレッドを圧迫しないよ

ひよこ

どうやって使うの？

ペンギン先生

new IntersectionObserver(callback, options)でオブザーバーを作って、observer.observe(element)で監視対象を登録するだけだよ。要素が表示領域と交差したらコールバックが呼ばれて、交差の割合などの情報が渡されるんだ

ひよこ

画像の遅延読み込み以外にも使えるの？

ペンギン先生

たくさんあるよ。無限スクロールの「次を読み込む」トリガー、広告のビューアビリティ計測、アニメーションの発火タイミング、目次のハイライト切り替えなど、「要素が見えたら何かする」パターンすべてに使えるんだ

ひよこ

rootMarginってオプションは何に使うの？

ペンギン先生

ビューポートの検知範囲を広げたり狭めたりできるオプションだよ。たとえばrootMarginを「200px」に設定すると、画面に入る200px手前で検知してくれるから、画像のプリロードに最適なんだ。ユーザーがスクロールする前に画像を読み込み始められるよ

まとめ：ざっくりこれだけ覚えればOK！

「Intersection Observer」って出てきたら「要素が画面に見えたかを監視するAPI」と思えればだいたいOK！

📖 おまけ：英語の意味

「Intersection Observer」＝交差の監視者

💬 Intersection（交差）は、要素の領域とビューポートの領域が「交差する」＝「重なる」こと。それをObserve（監視）するAPIだよ