IntersectionObserver APIとしきい値
オブザーバーを作成し、可視性のしきい値を設定します
「IntersectionObserver APIとしきい値」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。
IntersectionObserver の役割
IntersectionObserver は、要素がビューポート（または別のスクロールコンテナー）に入ったり、そこから出たりしたときにコールバックを呼び出します。これはスクロールリスナーに代わる、現代的でパフォーマンスに優れた方法です。計算はブラウザーが行い、コードは実際に表示状態が変化したときだけ実行されます。
生成
new IntersectionObserver(callback, options) でオブザーバーを生成します。交差状態が変化すると、コールバックはエントリの配列を受け取ります。options では、監視するコンテナーと、コールバックを呼び出すしきい値を制御します。
const observer = new IntersectionObserver((entries) => {
for (const entry of entries) {
if (entry.isIntersecting) {
console.log("Visible:", entry.target);
}
}
});
observer.observe(document.querySelector(".hero"));IntersectionObserverEntry
各エントリには、target（監視対象の要素）、isIntersecting（真偽値）、intersectionRatio（0〜1）、boundingClientRect、intersectionRect、time があります。表示・非表示を二値で判定する場合は isIntersecting を、表示割合に基づく処理には intersectionRatio を使用してください。
threshold オプション
{ threshold: 0.5 } を指定すると、交差率が50%をまたぐたびにコールバックが呼び出されます。[0, 0.25, 0.5, 0.75, 1] のような配列を使用すると、4分の1ごとに呼び出せます。進捗インジケーターの作成や、「表示されている割合」を報告する分析に便利です。
root オプション
デフォルトでは、オブザーバーはビューポートとの交差を測定します。root: someScrollableDiv を設定すると、内部のスクロールコンテナーを基準に測定できます。たとえば、高さが固定された div 内の仮想化リストなどに使用します。
rootMargin オプション
rootMargin: "200px" を指定すると、監視領域が上下左右に200ピクセルずつ広がります。より早く呼び出したい場合（ビューポートに入る200ピクセル前から画像の読み込みを開始する場合）や、より遅く呼び出したい場合（ビューポートを完全に通過してから呼び出す場合）に使用してください。
new IntersectionObserver(callback, {
rootMargin: "0px 0px 200px 0px",
threshold: 0
});observe と unobserve
observer.observe(element) は要素の監視を開始し、observer.unobserve(element) は停止します。コールバックが不要になったら、必ず監視を解除してください（たとえば、遅延読み込みを一度だけ実行した後など）。これによりメモリを解放できます。
disconnect
observer.disconnect() は、監視中のすべての要素の監視を停止します。コンポーネントのアンマウント時や、オブザーバーが不要になったときに呼び出してください。これにより、用途を終えた後も残り続けるオブザーバーによるメモリリークを防げます。
非同期配信
コールバックは非同期にまとめて配信されます。高速スクロール中に多数の交差状態が変化しても、要素ごとに1回ずつではなく、すべてのエントリを含む1回のコールバックが呼び出されます。スクロールイベントのたびに呼び出されるスクロールリスナーと比べて、大幅なパフォーマンス向上になります。
初回のコールバックはすぐに呼び出される
新しい要素の監視を開始すると、現在の状態を示すコールバックがほぼすぐに1回呼び出されます。これにより、監視開始時点ですでに表示されている要素も、特別な初期化処理なしで扱えます。
一般的な用途
画像の遅延読み込み、スクロールしてビューに入ったときのアニメーションの開始、無限スクロール（リストの末尾近くにセンチネルを監視）、ユーザーが実際に読んだ記事の追跡、ヒーロー領域の表示状態に基づく固定ヘッダーの切り替えなどに使用します。
理解度チェック
IntersectionObserver における threshold: 0 と threshold: 1 の違いは何ですか？
まとめ
IntersectionObserver は、組み込みのパフォーマンス最適化とバッチ処理により、要素の表示状態が変化したときにコールバックを呼び出します。表示状態を扱う処理では、スクロールリスナーの代わりに使用してください。threshold（0〜1または配列）、root（カスタムスクロールコンテナー）、rootMargin（監視領域の拡大・縮小）で設定します。特定の要素には observe/unobserve を使用し、disconnect ですべてをクリーンアップします。
よくある質問
「IntersectionObserver APIとしきい値」レッスンは無料ですか？
はい。「IntersectionObserver APIとしきい値」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。
「IntersectionObserver APIとしきい値」で何を学びますか？
オブザーバーを作成し、可視性のしきい値を設定します ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「IntersectionObserver APIとしきい値」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML Academyレッスンでコードを書いて実行できますか？
はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- IntersectionObserver APIとしきい値
- IntersectionObserverによる遅延読み込み
- 無限スクロールの実装
- スクロール連動アニメーションのセットアップ