Reactでビューポートの高さを取得する方法

Reactで開発を行う際に、ビューポートの高さを取得したい場面があります。例えば、動的にレイアウトを変更する際や、スクロール位置を取得する際などです。しかし、Reactではビューポートの高さを簡単に取得する方法がありません。そこで本記事では、Reactでビューポートの高さを取得する方法を紹介します。

1. JavaScriptでビューポートの高さを取得する方法

まずは、JavaScriptを使ってビューポートの高さを取得する方法を紹介します。以下のコードを使うことで、ビューポートの高さを取得することができます。

const viewportHeight = window.innerHeight;

このコードは、windowオブジェクトのinnerHeightプロパティを使って、ビューポートの高さを取得しています。

2. Reactでビューポートの高さを取得する方法

Reactでは、ビューポートの高さを直接取得することはできません。しかし、Reactのライフサイクルメソッドを使って、コンポーネントがマウントされたときにビューポートの高さを取得することができます。

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

function App() {
  const [viewportHeight, setViewportHeight] = useState(0);

  useEffect(() => {
    setViewportHeight(window.innerHeight);
  }, []);

  return (
    <div>
      <p>ビューポートの高さは{viewportHeight}pxです。</p>
    </div>
  );
}

export default App;

このコードでは、useEffectフックを使って、コンポーネントがマウントされたときに一度だけビューポートの高さを取得しています。また、useStateフックを使って、取得したビューポートの高さをコンポーネントの状態として保持しています。

まとめ

Reactでビューポートの高さを取得する方法について紹介しました。JavaScriptを使ってビューポートの高さを取得する方法と、Reactのライフサイクルメソッドを使ってコンポーネントがマウントされたときにビューポートの高さを取得する方法を紹介しました。ビューポートの高さを取得することで、レスポンシブデザインやスクロール位置の制御など、様々な用途に活用することができます。