React 18でブラウザサイズ変更を検知する：useResizeObserverフックの使い方

2024-04-02

ブラウザのサイズ変更時に React でビューを再レンダリングする

ResizeObserver は、ブラウザの API の一つで、要素のサイズ変更を監視することができます。以下のコードは、ResizeObserver を使用して、ブラウザのサイズ変更時にコンポーネントのビューを再レンダリングする方法を示しています。

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

const MyComponent = () => {
  const [width, setWidth] = useState(0);

  useEffect(() => {
    const observer = new ResizeObserver((entries) => {
      for (const entry of entries) {
        setWidth(entry.contentRect.width);
      }
    });

    observer.observe(ref.current);

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

  return (
    <div ref={ref} style={{ width }}>
      {/* コンポーネントの内容 */}
    </div>
  );
};

export default MyComponent;

このコードでは、以下の手順で動作します。

useState フックを使用して、コンポーネントの幅を格納する width という state 変数を定義します。
useEffect フックを使用して、ResizeObserver のインスタンスを作成します。
ResizeObserver の observe メソッドを使用して、コンポーネントの要素を観察します。
要素のサイズが変更されると、ResizeObserver のコールバック関数が呼び出されます。
コールバック関数内で、setWidth 関数を使用して、width state 変数を更新します。
width state 変数の更新により、コンポーネントが再レンダリングされます。

ResizeObserver 以外にも、ブラウザのサイズ変更時にコンポーネントのビューを再レンダリングするには、いくつかの方法があります。

window.addEventListener を使用する: window.addEventListener を使用して、resize イベントをリスニングし、イベントハンドラ内でコンポーネントを再レンダリングすることができます。
Media Queries を使用する: Media Queries を使用して、ブラウザの幅に基づいてコンポーネントのスタイルを変更することができます。
React ResizeSensor を使用する: react-resize-sensor などのライブラリを使用して、コンポーネントのサイズ変更を検知することができます。

どの方法を使用するべきかは、要件とプロジェクトの規模によって異なります。以下は、各方法の利点と欠点です。

ResizeObserver を使用する

利点:
- モダンなブラウザで動作します。
- パフォーマンスに優れています。
欠点:
- 古いブラウザでは動作しません。
- コードが少し複雑になります。

window.addEventListener を使用する

利点:
- コードが簡単です。
欠点:
- コードが雑になりがちです。

Media Queries を使用する

利点:
- レスポンシブなデザインに適しています。
欠点:

react-resize-sensor を使用する

利点:
- 使いやすいです。
欠点:

ブラウザのサイズ変更時に React コンポーネントのビューを再レンダリングするには、いくつかの方法があります。どの方法を使用するべきかは、要件とプロジェクトの規模によって異なります。

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

const MyComponent = () => {
  const [width, setWidth] = useState(0);

  useEffect(() => {
    const observer = new ResizeObserver((entries) => {
      for (const entry of entries) {
        setWidth(entry.contentRect.width);
      }
    });

    observer.observe(ref.current);

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

  return (
    <div ref={ref} style={{ width }}>
      {/* コンポーネントの内容 */}
      <h1>コンポーネントの幅: {width}</h1>
    </div>
  );
};

export default MyComponent;

このコードを index.js などのファイルに保存し、以下のコマンドを実行してブラウザで開きます。

npm start

ブラウザを開き、ウィンドウのサイズを変更すると、<h1> タグの内容が更新されることが確認できます。

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

const MyComponent = () => {
  const [width, setWidth] = useState(0);

  useEffect(() => {
    window.addEventListener('resize', () => {
      setWidth(window.innerWidth);
    });

    return () => window.removeEventListener('resize', () => {
      setWidth(window.innerWidth);
    });
  }, []);

  return (
    <div style={{ width }}>
      {/* コンポーネントの内容 */}
      <h1>コンポーネントの幅: {width}</h1>
    </div>
  );
};

export default MyComponent;

import React from 'react';

const MyComponent = () => {
  return (
    <div>
      <div style={{ width: '100%', height: '100px' }}>
        <h1>ブラウザ幅が 480px 以下</h1>
      </div>
      <div style={{ width: '50%', height: '100px', mediaQuery: '(min-width: 481px)' }}>
        <h1>ブラウザ幅が 481px 以上</h1>
      </div>
    </div>
  );
};

export default MyComponent;

import React, { useState } from 'react';
import ResizeSensor from 'react-resize-sensor';

const MyComponent = () => {
  const [width, setWidth] = useState(0);

  return (
    <div>
      <ResizeSensor
        onResize={(rect) => {
          setWidth(rect.width);
        }}
      >
        <div style={{ width }}>
          {/* コンポーネントの内容 */}
          <h1>コンポーネントの幅: {width}</h1>
        </div>
      </ResizeSensor>
    </div>
  );
};

export default MyComponent;

これらのサンプルコードを参考に、自分の要件に合った方法でブラウザのサイズ変更時にコンポーネントのビューを再レンダリングしてみてください。

ブラウザのサイズ変更時に React コンポーネントのビューを再レンダリングするその他の方法

window.addEventListener を使用する

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

const MyComponent = () => {
  const [width, setWidth] = useState(0);

  useEffect(() => {
    window.addEventListener('resize', () => {
      setWidth(window.innerWidth);
    });

    return () => window.removeEventListener('resize', () => {
      setWidth(window.innerWidth);
    });
  }, []);

  return (
    <div style={{ width }}>
      {/* コンポーネントの内容 */}
      <h1>コンポーネントの幅: {width}</h1>
    </div>
  );
};

export default MyComponent;

import React from 'react';

const MyComponent = () => {
  return (
    <div>
      <div style={{ width: '100%', height: '100px' }}>
        <h1>ブラウザ幅が 480px 以下</h1>
      </div>
      <div style={{ width: '50%', height: '100px', mediaQuery: '(min-width: 481px)' }}>
        <h1>ブラウザ幅が 481px 以上</h1>
      </div>
    </div>
  );
};

export default MyComponent;

import React, { useState } from 'react';
import ResizeSensor from 'react-resize-sensor';

const MyComponent = () => {
  const [width, setWidth] = useState(0);

  return (
    <div>
      <ResizeSensor
        onResize={(rect) => {
          setWidth(rect.width);
        }}
      >
        <div style={{ width }}>
          {/* コンポーネントの内容 */}
          <h1>コンポーネントの幅: {width}</h1>
        </div>
      </ResizeSensor>
    </div>
  );
};

export default MyComponent;

useResizeObserver フックを使用する

React 18 では、useResizeObserver フックが追加されました。このフックを使用すると、ResizeObserver を簡単に使用することができます。

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

const MyComponent = () => {
  const [width, setWidth] = useState(0);
  const { ref } = useResizeObserver((rect) => {
    setWidth(rect.width);
  });

  return (
    <div ref={ref} style={{ width }}>
      {/* コンポーネントの内容 */}
      <h1>コンポーネントの幅: {width}</h1>
    </div>
  );
};

export default MyComponent;