Intersection Observer API（交差オブザーバーAPI）とは？使い方とポイントの解説【JavaScript】

Intersection Observer API（交差オブザーバーAPI）とは？

Intersection Observer API（交差オブザーバーAPI）は、要素がビューポート（表示領域）にどの程度表示されているかを効率的に監視するためのAPIです。
このAPIを活用することで、要素が画面に表示されるときや非表示になったときにアニメーションやアクションを実行することができます。

Intersection Observer API（交差オブザーバーAPI）は、要素がビューポートの交差を非同期で監視しているため、ブラウザのパフォーマンスを最適化します。

また、コールバック関数が要素がビューポートの交差タイミングで呼ばれるため、従来のスクロールイベントのように頻繁に処理を行う必要がなく、リソースの節約につながります。
ビューポートのサイズや要素の表示領域を設定することもでき、より柔軟な制御が可能です。

これにより、ユーザーの体験を向上させながら、よりスムーズなパフォーマンスを実現できます。

Intersection Observer API（交差オブザーバーAPI）の 基本的な記述

以下の記述は、インスタンス生成とコールバック関数の定義をしています。
監視する要素がビューポートと交差された時にコールバック関数が呼び出されます。

const options = {
    root: null,
    rootMargin: '0px',
    threshold: 0
};
const observer = new IntersectionObserver((entries, obs) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            console.log('要素がビューポートに入りました');
        } else {
            console.log('要素がビューポートから出ました');
        }
    });
}, options);
observer.observe(elements);

インスタンス生成とコールバック

"entries”は配列で、監視対象のすべての要素のIntersectionObserverEntryオブジェクトが含まれてます。
各オブジェクトには、要素の表示状態や位置情報が含まれています。

"entry” 各IntersectionObserverEntryオブジェクトには、"isIntersecting”（要素がビューポートと交差しているか）、"boundingClientRect”（要素の位置とサイズ）、"intersectionRect”（要素とビューポートの交差領域）などの情報が含まれています。

コールバックの呼び出し条件

"IntersectionObserver”は、以下の条件でコールバックを呼び出します。
どのような条件でコールバックが呼び出されるかを細かく制御できます。

const options = {
    root: null,
    rootMargin: '0px',
    threshold: 0
};

root

ビューポートとして使用される要素を指定します。
デフォルトは“null”でブラウザのビューポート（画面全体）が使用されます。

rootMargin

ビューポートの外側に追加のマージンを指定します。
"rootMargin”は、ビューポートの境界に対してオフセットを設定するために使用されます。単位は「px」や「%」で指定できます。

指定の仕方はCSSの"margin”と同じように指定することができます。
※0の場合でも「0px」と記述をしないとエラーになります。

threshold

要素がビューポートにどの程度表示さているかを示す閾値（いきち）を設定します。
"threshold”は、要素のビューポートに対してどの程度表示されるとコールバックが発火するかを定義します。

値は0〜1までの数値を数値（複数指定の場合は配列）で指定します。
デフォルト値は0です。

コールバック呼び出し条件の勘違いしやすいポイント

“threshold”の設定の勘違い

指定する数値は、監視した要素がビューポートにどれだけ表示されているかになります。

“threshold”が「0」の場合
監視した要素がビューポートに少しでも表示されたタイミングでコールバックが呼び出されます。

“threshold”が「1」の場合
監視した要素がビューポートに完全に（100%）表示された時にコールバックが呼び出されます。
監視した要素の高さがビューポートより大きい場合、その要素がビューポート内に100%表示されることは物理的に不可能なため、コールバックが呼び出されない可能性があります。

“threshold”が「0.5」の場合
監視した要素がビューポートに50%表示されたタイミングでコールバックが呼び出されます。
よくある勘違いは、“threshold“が「0.5」だと、ビューポート全体の50%に要素が表示されたときにコールバックが呼び出されると思われがちですが、実際には監視対象の要素自体の50%がビューポート内に表示される必要がありますので注意が必要です。

一度画面に入ったら要素の監視を止める

const observer = new IntersectionObserver((entries, obs) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            console.log('要素がビューポートに入りました');
            obs.unobserve(entry.target);
        }
    });
}, options);
observer.observe(elements);

まとめ

いかでしたでしょうか？
今回の記事では、交差オブザーバーAPI（Intersection Observer API）について解説をしました。

交差オブザーバーAPI（Intersection Observer API）はとても便利で簡単に導入することができます。
特定の条件が満たされたときに追加のアクションを実行することができ、この柔軟性により、ユーザー体験の向上やパフォーマンスの最適化を行えます。

最後までお読みいただきありがとうございました！