問題一覧に戻る
中級カスタムフック
問題57: useWindowSize

ウィンドウサイズを監視するカスタムフックの実装を学びます。ブラウザウィンドウのリサイズを検知し、リアルタイムでサイズ情報を更新します。レスポンシブデザインの実装、条件付きレンダリング、レイアウトの動的調整などに活用できます。イベントリスナーの登録と解除を適切に行い、メモリリークを防ぎます。モバイルとPCの表示切り替えなど、現代のウェブアプリケーションに必須の機能です。

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

{/* ウィンドウサイズフック */}
function useWindowSize() {
  const [size, setSize] = useState({ width: 0, height: 0 });
  
  useEffect(() => {
    {/* リサイズハンドラ */}
    const handleResize = () => {
      setSize({ width: window., height: window. });
    };
    
    handleResize();
    window.addEventListener('resize', );
    return () => window.removeEventListener('resize', handleResize);
  }, []);
  
  return size;
}

function App() {
  {/* サイズを取得 */}
  const { width } = ();
  
  return <p>{width < 768 ? "モバイル" : "PC"}</p>;
}

export default App;
···