カスタム React Hook を作成する | ウィンドウサイズに応じたレイアウト

はじめに

このプロジェクトでは、useWindowSize と呼ばれるカスタム React Hook を作成して、現在のウィンドウサイズを取得し、それを使って Web アプリケーションのナビゲーションバーを条件付きでレンダリングする方法を学びます。

👀 プレビュー

project preview

🎯 タスク

このプロジェクトでは、以下のことを学びます。

useWindowSize カスタム Hook を実装して、現在のウィンドウサイズを取得する
App コンポーネントで useWindowSize Hook を使って、ウィンドウ幅に基づいてナビゲーションバーを更新する

🏆 成果

このプロジェクトを完了すると、以下のことができるようになります。

再利用可能な機能をカプセル化するためのカスタム React Hook を作成する
useState と useEffect Hook を使って状態と副作用を管理する
現在のウィンドウサイズに基づいてコンポーネントを条件付きでレンダリングする

useWindowSize Hook を実装する

始めるには、エディタを開きます。エディタから以下のファイルが見えます。

├── package-lock.json
├── package.json
├── public
│   ├── index.html
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── hooks
    │   └── useWindowSize.js
    ├── index.css
    ├── index.js
    ├── reportWebVitals.js
    └── setupTests.js

このステップでは、現在のウィンドウサイズを取得するための useWindowSize カスタム Hook をどのように実装するか学びます。

src/Hooks ディレクトリにある useWindowSize.js ファイルを開きます。
このファイルで必要な依存関係をインポートします。

import { useEffect, useState } from "react";

useWindowSize 関数を定義します。

import { useEffect, useState } from "react";

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

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

  useEffect(() => {
    window.addEventListener("resize", changeWindowSize);

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

  return windowSize;
};

解説：

useWindowSize 関数は、現在のウィンドウ幅と高さを含むオブジェクトを返します。
useState Hook は、状態変数 windowSize とそれを更新する関数 setWindowSize を作成するために使用されます。
changeWindowSize 関数は、ウィンドウがリサイズされたときに windowSize 状態を更新するために定義されています。
useEffect Hook は、resize イベントのイベントリスナーを追加し、コンポーネントがアンマウントされたときにそれを削除するために使用されます。
windowSize オブジェクトは useWindowSize 関数から返されます。

アプリケーションをテストする

useWindowSize.js ファイルを保存します。
ターミナルで npm install コマンドを使用して依存関係をダウンロードし、依存関係のダウンロードが完了するまで待ってから、npm start コマンドを使用してプロジェクトを起動します。
プロジェクトが正常に起動したら、「Web 8080」をクリックしてブラウザでプレビューします。
その効果は、ユーザーがウィンドウをリサイズすると、下部のコンテンツにウィンドウ幅が表示され、上部のナビゲーションバーは小さな画面ではサブメニューを 2 つ非表示にし、大きな画面では 3 つのメニューを表示することです。

window resize navigation demo

おめでとうございます！あなたは正常に useWindowSize Hook を実装し、App コンポーネントで使用して、ウィンドウサイズに基づいてナビゲーションバーを更新しました。

まとめ

おめでとうございます！このプロジェクトを完了しました。あなたは実験技術を向上させるために、LabEx でさらに多くの実験を行うことができます。

カスタム React Hook を使った応答型ナビゲーション