Intersection Observer APIの使い方【基本的な事を分かりやすく・JavaScript】

JavaScript
2023.10.14

以前、IEが消滅してフロントエンドエンジニア的にメリットを強く感じる旨の記事を掲載しました。『IE（InternetExplorer）のサポート終了から生まれるメリット5選！～フロントエンドエンジニアの観点からJavaScriptを考える』

これだけではなく、IE11を無視するとかなり効率的で、パフォーマンスも向上するものがあるので追記しておきます。それは、「Intersection Observer」の利用です。今までスクロールイベントで要素のoffsetを取得して、スクロール値と比較して……ウンヌンカンヌンといったことを一手に引き取ってくれる便利な手法です。是非使えるようになりたいところですね。

Intersection Observerとは何か？

Intersection Observerは、ウェブ開発において要素の表示状態を効率的に監視するためのブラウザ標準のAPIです。このAPIは、特定の要素がビューポート（画面内の表示領域）に表示されたり、特定の要素とビューポートが交差したりする状態を検出します。この検出結果を元に、要素の表示や非表示、アニメーションなどを制御できます。

従来、要素の表示状態を監視するためには、スクロールイベント（window.on('scroll'……）などを使用して手動で計算する必要がありましたが、Intersection Observerを使用することで、このプロセスが自動化され、パフォーマンスの向上とコードの簡素化が実現されます。

Intersection Observerは、ウェブページで様々な用途に利用されます。例えば、遅延読み込みを実現し、ページ読み込み時間を短縮させたり、無限スクロールを実装したり、スクロールに応じて要素のアニメーションをトリガーしたりするのに役立ちます。

なぜIntersection Observerが重要なのか？

Intersection Observerは、ウェブ開発において重要な役割を果たす主要な技術の一つです。その重要性は以下のように挙げられます。※IE11非対応を前提としています

  1. パフォーマンスの向上：スクロールイベントなどの従来の手法と比べて効率的で、ブラウザの負荷を軽減します。要素がビューポートに表示されるかどうかを自動的に検出するため、不要な計算やリソースのロードを避けることができ、ページの読み込み速度が向上します。
  2. ユーザーエクスペリエンスの向上: ユーザーエクスペリエンスを向上させる様々な機能を実現できます。例えば、画像の遅延読み込みを実装することで、ページの初期表示が速くなり、ユーザーは待たされることなくコンテンツを閲覧できます。
  3. 無限スクロールなどの新しい機能: 無限スクロール、アニメーションのトリガー、要素のフェードインなど、リッチなウェブ機能を実現できます。これにより、ウェブサイトやアプリのインタラクティブ性が向上し、ユーザーにより魅力的な体験を提供できます。
  4. クロスブラウザ対応: 主要なブラウザでサポートされており（※IE以外）、クロスブラウザの互換性が高いため、開発者は異なるプラットフォームやブラウザで一貫した動作を期待できます。

Intersection Observerの基本

そんな便利なIntersection Observerですが、どのように利用するのでしょうか。基本となる使い方をまとめておきます。

Observerの作成と要素への割り当てが重要

Intersection Observerを使うには、Observerを作成し、要素にそのObserverを割り当てる必要があります。下記は出来るだけ簡略的に（必要最小限に）実装する際の例です。

// コールバック関数
// 交差情報を受け取って、要素に.observedクラスを追加/削除する処理を行います。
function handleIntersection(entries, observer) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // 要素がビューポートに表示されたら
      entry.target.classList.add('observed');
    } else {
      // 要素がビューポートから外れたら
      entry.target.classList.remove('observed');
    }
  });
}

// Observerの作成
const options = {
  root: null,  //rootはルート要素（null=ビューポート）を指定
  rootMargin: '0px', //rootMarginは交差判定に余白を利用するか（何px余白を持たせるか）
  threshold: 0.5 // 要素がビューポートの50%以上表示されている場合にコールバック関数が呼び出されます
};
const observer = new IntersectionObserver(handleIntersection, options);

// 監視対象の要素を指定
const targetElement = document.querySelector('.target-element');
observer.observe(targetElement);

IntersectionObserverを作成し、監視対象の要素を指定します。上の例では.target-elementというクラスを持つ要素を監視しています。指定した要素がビューポートに表示された場合、isIntersectingプロパティが trueになり、クラスの付与が変わります。

optionのthresholdが結構重要なので補足すると、指定出来る値は0～1で、例えば0.5であれば要素の50%が対象に入ったときに判定をtrueにする処理が起こります。ですので0.1であれば10%、0.8であれば80%が要素と重なった時にコールバックが発火するように調整出来る優れものです。

使用する際に気を付けたいこと

Intersection Observerを使用する際には、以下の点に注意したほうが良いとされています。

  1. パフォーマンスへの影響: 監視する要素が多数ある場合は、多くのコールバックを呼び出す可能性があり、パフォーマンスに影響を及ぼすことがあります。必要な要素のみを監視するように心がけましょう。
  2. 対応ブラウザの確認: IntersectionObserverは主要なブラウザでサポートされていますが、一部の古いブラウザではサポートされていない場合があります。caniuseなどで事前に対応状況を確認してください。
  3. コールバック関数の効率: コールバック関数内での処理は軽量で高速でないといけません。重い処理を行うと、スクロールの滑らかさに影響を及ぼす可能性があります。必要な処理を最小限に抑えましょう。
  4. 監視の解除: 要素が不要になった場合、unobserve メソッドを使用して監視を解除し、リソースの浪費を防ぎましょう。要素がDOMから削除されるときにも監視を解除することが重要です。

まとめ

Intersection Observerは非常に強力な武器になり得ます。JavaScriptで従来行ってきた面倒なスクロールイベント処理を簡潔に効率よく行ってくれるのでパフォーマンス的にも運用的にもメリットが大きいです。ただ、IEへの対応が必要な場合には使えませんので注意してください。コールバック関数の処理の軽量化などにも注意して、出来る限りクラスの付与に留める等の最小限の処理にした方が良いかと思います。ガクガクしたりする場合には監視の対象が適切かどうかや、コールバックが重すぎないかを見直すと良いかもしれません。

タイトルとURLをコピーしました