先生と生徒の会話形式で理解しよう

生徒

「Reactでウィンドウサイズを取得する方法ってありますか？」

先生

「もちろんあります！しかも、カスタムフックを使うととても便利にできますよ。」

生徒

「カスタムフックってなんですか？」

先生

「カスタムフックは、Reactの機能を自分でまとめて再利用できるようにする仕組みです。今回は、それを使ってウィンドウサイズを取得してみましょう！」

1. カスタムフックとは？

まず、カスタムフック（Custom Hook）とは、Reactの中でよく使う「状態管理」や「イベント処理」を関数としてまとめて再利用できる仕組みです。名前の先頭には必ずuseをつける決まりがあります。たとえばuseStateやuseEffectのように書きます。

自分でuseWindowSizeというフックを作れば、どのコンポーネントからでも簡単にウィンドウサイズを取得できるようになります。

2. なぜカスタムフックでウィンドウサイズを管理するの？

たとえば、画面の幅に応じてデザインを変える「レスポンシブ対応」をしたいとき、ウィンドウのサイズをリアルタイムで取得する必要があります。

普通にコンポーネント内で書くと、同じ処理を複数のコンポーネントに書くことになり、コードが重複します。そんなときに「カスタムフック」で共通化すると、1つの場所にまとめられて便利です。

3. useWindowSizeフックを作ってみよう

それでは実際に、ウィンドウの横幅と高さを取得するカスタムフックを作ってみましょう。


import { useState, useEffect } from "react";

function useWindowSize() {
  const [size, setSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });

  useEffect(() => {
    const handleResize = () => {
      setSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    };

    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  return size;
}

export default useWindowSize;

このコードでは、useStateでサイズ情報を保持し、useEffectでウィンドウのサイズ変更イベントを監視しています。handleResizeが呼ばれるたびに新しい幅と高さが更新されます。

4. 作ったフックを使ってみよう

次に、このuseWindowSizeフックを実際のReactコンポーネントで使ってみましょう。


import React from "react";
import useWindowSize from "./useWindowSize";

function App() {
  const { width, height } = useWindowSize();

  return (
    <div>
      <h1>現在のウィンドウサイズ</h1>
      <p>横幅：{width}px</p>
      <p>高さ：{height}px</p>
    </div>
  );
}

export default App;

（画面に現在のウィンドウの横幅と高さが表示され、ブラウザのサイズを変えると数値がリアルタイムで更新されます）

5. useEffectとクリーンアップ処理のポイント

フックの中でwindow.addEventListenerを使ってイベントを登録していますが、コンポーネントが削除（アンマウント）されたときにイベントを解除しないと、メモリリークという問題が起こる可能性があります。

そのため、useEffectの中でreturn () => window.removeEventListener(...)と書いて、後片付け（クリーンアップ）を必ず行うのがポイントです。

6. ウィンドウサイズを利用した応用例

このカスタムフックは、レスポンシブデザイン以外にもさまざまな場面で使えます。たとえば、画面が小さいときだけナビゲーションを折りたたんだり、大きい画面ではサイドバーを表示したりできます。

次のように、幅が一定以下の場合にメッセージを切り替えることもできます。


function ResponsiveMessage() {
  const { width } = useWindowSize();

  return (
    
      {width < 600 ? (
        <p>スマートフォンサイズの画面です！</p>
      ) : (
        <p>PCサイズの画面です！</p>
      )}
    
  );
}

（ブラウザの幅が600px以下になると「スマートフォンサイズの画面です！」に切り替わります）

7. 仕組みをイメージで理解しよう

ウィンドウサイズを取得する処理は、「ブラウザが大きくなった」「小さくなった」という通知を受け取って状態を更新しているイメージです。

つまり、ユーザーがウィンドウを動かすたびに「今の幅と高さを教えて！」とReactに伝えて、画面の表示を自動で変えている仕組みです。

8. カスタムフックでコードをスッキリ保つ

同じウィンドウサイズ取得のロジックを複数の場所で使うとき、毎回useEffectやwindow.addEventListenerを書くのは大変です。カスタムフックにまとめることで、たった1行で呼び出せるようになります。

また、プロジェクトが大きくなっても、再利用性が高く保守しやすいコードになります。

9. 実務でも役立つポイント

Web開発では、ウィンドウサイズによって表示内容を変えることがよくあります。たとえば、ECサイトのカート画面でスマホでは1列、PCでは2列にしたいときなどです。

このようにカスタムフックを使えば、どの画面からでも簡単にサイズ情報を取得できるため、柔軟で効率的な開発が可能になります。

まずはuseWindowSizeを作って、Reactアプリで試してみましょう！シンプルな仕組みですが、実務でも大いに役立つ便利なフックです。

まとめ

Reactでウィンドウサイズを取得するためのカスタムフックについて振り返ると、ウィンドウサイズという動的に変化する情報をReactの状態管理と組み合わせて扱う方法が非常に重要であると感じられます。特に、レスポンシブデザインが当たり前となった現代のWebアプリケーションでは、画面の幅や高さをもとにレイアウトやコンポーネントの表示内容を切り替える機会が多く、そのたびにウィンドウの状態を正確に把握する必要があります。その役割をスムーズに実現してくれるのが「カスタムフック」であり、useWindowSizeのように状態管理とイベント登録をひとつにまとめておくことで、複数コンポーネントから再利用できる柔軟で効率的な仕組みとなります。また、ウィンドウサイズ取得の処理はイベントリスナーを使うため、Reactのライフサイクルと紐付いたuseEffectとの組み合わせがとても重要です。サイズが変わるたびに正しい情報を更新し続けるためには、addEventListenerによる登録とremoveEventListenerによる登録解除を適切に実装する必要があります。これらは一見地味な部分ですが、仕組みが正しく動くために欠かせない工程であり、クリーンアップ処理を忘れずに書くことがReact開発の基本となります。さらに、学んだカスタムフックを応用することで、デザインの切り替え、画面幅に応じたナビゲーション表示、複雑なレイアウト調整など、実務でも多用される実装へ発展できます。Reactの柔軟性を活かしながら、状態管理とイベント処理を自然な流れで扱うことで、より高品質なUIと操作性の高いアプリケーションが実現できます。

ウィンドウサイズを取得するカスタムフックの再確認


import { useState, useEffect } from "react";

function useWindowSize() {
  const [windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight
  });

  useEffect(() => {
    const updateSize = () => {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight
      });
    };

    window.addEventListener("resize", updateSize);

    return () => {
      window.removeEventListener("resize", updateSize);
    };
  }, []);

  return windowSize;
}

export default useWindowSize;

上記のコードは、実際にウィンドウサイズを取得し続けるために必要な最低限の処理がわかりやすくまとまっています。最初のuseStateで初期値を設定し、useEffectの中でサイズ変更イベントを登録し、クリーンアップとしてイベントを解除します。これにより、コンポーネントがアンマウントされた後も不要なイベントが残らず、パフォーマンスやメモリ面でも安定した動作が実現できます。また、返り値として幅と高さの両方を返すことで、どのコンポーネントからも簡単に利用できる実用的なフックとなります。この仕組みが理解できれば、ウィンドウサイズだけでなく、スクロール位置の取得やキーボードイベントの監視など、他のブラウザイベントもReactでわかりやすく扱えるようになり、より高度なインタラクションを作り出すことが可能になります。

先生と生徒の振り返り会話

生徒

「ウィンドウサイズをカスタムフックにまとめると、どのコンポーネントでも簡単に使えることがわかりました！イベントも自然に扱えるようになりました。」

先生

「その通りだね。カスタムフックは再利用性を高めるためのとても便利な仕組みで、Reactの開発を効率よく進めるための重要な技術だよ。」

生徒

「useEffectのクリーンアップ処理がなぜ必要なのかもよく理解できました。アンマウント後にイベントが残ってしまうのは確かに困りますね。」

先生

「そうだね。Reactではイベントや副作用を扱うときにライフサイクルを意識することが大切なんだ。今回の経験は他のフックの使い方にも役立つはずだよ。」

生徒

「はい！レスポンシブデザインにも応用できるので、実際のプロジェクトでも使ってみます！」