スクロール起点の効果のためのIntersectionObserver

IntersectionObserver APIは、1つ以上の要素がブラウザのビューポート（または指定した祖先要素）に入ったか、そこから出たかを効率的に監視します。1ピクセルごとに発生するスクロールリスナーとは異なり、オブザーバーは要素がしきい値をまたいだときだけコールバックを呼び出します。そのため、スクロールに基づくエフェクトに適しており、パフォーマンスも大幅に優れています。

コールバックには、監視対象の要素ごとに1つずつ、IntersectionObserverEntryオブジェクトの配列が渡されます。各エントリには、表示されているときにtrueになるisIntersectingブール値と、現在表示されている要素の割合を0から1で表すintersectionRatioの数値があります。これらを使って表示状態を判定します。

useEffect内でオブザーバーを作成し、observer.observe(ref.current)を呼び出して要素の監視を開始します。追跡するDOM要素にrefを割り当てておく必要があります。コンポーネントのマウント後にオブザーバーを作成し、ref.currentが設定された状態にしてください。

useEffectのクリーンアップ関数で、特定の要素の監視を停止するにはobserver.unobserve(element)を、すべての監視を停止するにはobserver.disconnect()を呼び出します。クリーンアップを忘れると、コンポーネントのアンマウント後もオブザーバーが残り、エラーやメモリリークの原因になる可能性があります。

thresholdオプションは、コールバックを呼び出すタイミングを制御します。0を指定すると、要素の1ピクセルでも表示された時点で発生します。1を指定すると、要素が完全に表示されたときだけ発生します。[0, 0.5, 1]のような配列を渡して、複数の表示割合でコールバックを受け取ることもできます。

rootMarginは、CSSに似た構文を使って実効的な交差領域を拡大または縮小します。'100px 0px'を指定すると、要素がビューポートに入る100px手前で発生します。'-100px'を指定すると、要素がビューポート内に100px入ったときだけ発生します。要素が完全に表示される前に、先読みやアニメーションを開始する場合に便利です。

画像を遅延読み込みするには、最初は src の代わりに data-src 属性を設定します。オブザーバーが isIntersecting: true の状態で通知したら、data-src の値を src にコピーして、ネットワークリクエストを発生させます。その後、画像を読み込む必要があるのは一度だけなので、observer.unobserve(entry.target) を呼び出します。

フェードインアニメーションでは、isIntersecting が true になったときに CSS クラスを追加します。element.classList.add('visible') のように記述します。CSS では、.card { opacity: 0; transform: translateY(20px); transition: opacity 0.4s, transform 0.4s; } と .card.visible { opacity: 1; transform: none; } のようにトランジションを定義します。オブザーバーによって、この開始処理を効率的に実行できます。

IntersectionObserver は、閲覧状況の追跡に適しています。data-analytics-id 属性を持つ要素が、しきい値 0.5 で交差状態になったら、アナリティクスイベントを発生させます。これにより、単純なスクロール深度の割合よりもはるかに正確に、ユーザーが実際に読んだコンテンツセクションを測定できます。

1 つの IntersectionObserver インスタンスで、各要素に対して observer.observe(element) を呼び出すことにより、複数の要素を監視できます。監視対象のすべての要素で、同じコールバックとオプションを共有します。コールバック内では entry.target を使って、どの要素が通知のきっかけになったかを識別します。

再利用可能な useInView フックは、[ref, inView] を返します。任意の要素に ref を割り当て、inView を読み取ることで、その要素が現在表示されているかどうかを確認できます。このフックは、threshold と rootMargin を指定する options オブジェクトを受け取ります。この抽象化により、どのコンポーネントでもスクロール効果を宣言的に扱えます。

IntersectionObserver のしきい値が 0 であるとは、どういう意味ですか？

IntersectionObserver は、isIntersecting と intersectionRatio を使って、要素の表示状態を効率的に追跡します。必ず unobserve または disconnect で後処理を行います。threshold でトリガーの位置を制御し、rootMargin で検出範囲を拡張します。画像の遅延読み込み、アニメーション、アナリティクスによる追跡に活用できます。