React で要素の表示状態を監視？ Intersection Observer で簡単解決！

2024-06-13

React で要素が DOM に表示されているかどうかを確認する方法

getBoundingClientRect() を使用する

最も基本的な方法は、getBoundingClientRect() メソッドを使用することです。このメソッドは、要素の境界ボックスに関する情報を取得します。この情報を使用して、要素がウィンドウ内に表示されているかどうかを判断できます。

const element = document.getElementById('myElement');
const rect = element.getBoundingClientRect();
const isInView =
  rect.top >= 0 &&
  rect.left >= 0 &&
  rect.bottom <= window.innerHeight &&
  rect.right <= window.innerWidth;

このコードは、myElement ID の要素がウィンドウ内に表示されているかどうかを確認します。

利点:

シンプルで理解しやすい
ほとんどのブラウザでサポートされている

パフォーマンスが遅い可能性がある
要素が部分的にしか表示されていない場合を検出できない

Intersection Observer API は、要素がウィンドウの視覚領域にどれだけ表示されているかを監視するより高度な方法を提供します。この API を使用すると、要素が表示されたり非表示になったりしたときにイベントをトリガーできます。

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      console.log('Element is visible');
    } else {
      console.log('Element is not visible');
    }
  });
}, {
  root: null,
  threshold: 0,
});

const element = document.getElementById('myElement');
observer.observe(element);

このコードは、myElement ID の要素がウィンドウの視覚領域に表示されたり非表示になったりしたときにコンソールにログを出力します。

パフォーマンスが良い

比較的新しく、すべてのブラウザでサポートされているわけではない

カスタムフックを使用する

React カスタムフックを使用して、getBoundingClientRect() または Intersection Observer のロジックをカプセル化することができます。これにより、コードをより簡潔で再利用しやすくなります。

const useIsInView = (ref) => {
  const [isInView, setIsInView] = useState(false);

  useEffect(() => {
    const observer = new IntersectionObserver((entries) => {
      setIsInView(entries[0].isIntersecting);
    }, {
      root: null,
      threshold: 0,
    });

    if (ref.current) {
      observer.observe(ref.current);
    }

    return () => {
      observer.disconnect();
    };
  }, [ref]);

  return isInView;
};

このカスタムフックは、ref として渡された要素がウィンドウの視覚領域に表示されているかどうかを返すブール値を返します。

コードをより簡潔で再利用しやすくする
getBoundingClientRect() または Intersection Observer のロジックを隠蔽する

理解するには少し複雑

適切な方法を選択する

使用する方法は、要件によって異なります。単純に要素が DOM に表示されているかどうかを確認したい場合は、getBoundingClientRect() で十分です。要素がウィンドウの視覚領域にどれだけ表示されているかを監視する必要がある場合は、Intersection Observer を使用する必要があります。コードをより簡潔で再利用しやすくしたい場合は、カスタムフックを使用することができます。

その他の考慮事項

要素が非表示の場合、getBoundingClientRect() は 0 の値を返す可能性があることに注意してください。
Intersection Observer は、要素が部分的にしか表示されていない場合でもトリガーされることに注意してください。
パフォーマンスが重要な場合は、getBoundingClientRect() の方が Intersection Observer よりも高速である可能性があることに注意してください。

React で要素が DOM に表示されているかどうかを確認する - サンプルコード

getBoundingClientRect() を使用する

import React, { useState } from 'react';

function App() {
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    const element = document.getElementById('myElement');
    const rect = element.getBoundingClientRect();
    const isInView =
      rect.top >= 0 &&
      rect.left >= 0 &&
      rect.bottom <= window.innerHeight &&
      rect.right <= window.innerWidth;

    setIsVisible(isInView);
  }, []);

  return (
    <div>
      <p>Element is {isVisible ? 'visible' : 'not visible'}</p>
      <div id="myElement">This is the element</div>
    </div>
  );
}

Intersection Observer を使用する

import React, { useState, useRef } from 'react';

function App() {
  const elementRef = useRef(null);
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    const observer = new IntersectionObserver((entries) => {
      setIsVisible(entries[0].isIntersecting);
    }, {
      root: null,
      threshold: 0,
    });

    if (elementRef.current) {
      observer.observe(elementRef.current);
    }

    return () => {
      observer.disconnect();
    };
  }, [elementRef]);

  return (
    <div>
      <p>Element is {isVisible ? 'visible' : 'not visible'}</p>
      <div ref={elementRef}>This is the element</div>
    </div>
  );
}

このコードは、elementRef ref を使用して myElement 要素を参照し、isVisible ステート変数に要素がウィンドウの視覚領域に表示されているかどうかを格納します。

カスタムフックを使用する

import React, { useState, useRef } from 'react';

function useIsInView(ref) {
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    const observer = new IntersectionObserver((entries) => {
      setIsVisible(entries[0].isIntersecting);
    }, {
      root: null,
      threshold: 0,
    });

    if (ref.current) {
      observer.observe(ref.current);
    }

    return () => {
      observer.disconnect();
    };
  }, [ref]);

  return isVisible;
}

function App() {
  const elementRef = useRef(null);
  const isVisible = useIsInView(elementRef);

  return (
    <div>
      <p>Element is {isVisible ? 'visible' : 'not visible'}</p>
      <div ref={elementRef}>This is the element</div>
    </div>
  );
}

このコードは、useIsInView カスタムフックを作成して、要素がウィンドウの視覚領域に表示されているかどうかを判定します。

これらのサンプルコードはあくまでも出発点であり、具体的なニーズに合わせて調整する必要があります。

React で要素が DOM に表示されているかどうかを確認する - その他の方法

CSS カスタムプロパティを使用して、要素が表示されているかどうかを判定するフラグを設定できます。

const isVisible = document.getElementById('myElement').style.getPropertyValue('--is-visible');

このコードは、myElement ID の要素が --is-visible CSS カスタムプロパティに true の値を持っているかどうかを確認します。

状態管理ライブラリを使用する

Redux や MobX のような状態管理ライブラリを使用して、要素が表示されているかどうかを管理できます。

const store = createStore({
  isVisible: false,
});

store.subscribe(() => {
  const { isVisible } = store.getState();
  console.log(`Element is ${isVisible ? 'visible' : 'not visible'}`);
});

const showElement = () => {
  store.dispatch({ type: 'SHOW_ELEMENT' });
};

const hideElement = () => {
  store.dispatch({ type: 'HIDE_ELEMENT' });
};