Reactでウィンドウの高さを取得する
2024-09-02
ReactJSでviewport/windowの高さを取得する
JavaScriptの基本的な方法
JavaScriptでviewport/windowの高さを取得するには、window.innerHeightプロパティを使用します。
const windowHeight = window.innerHeight;
console.log(windowHeight); // 現在のviewport/windowの高さを出力
ReactJSでの使用
ReactJSのコンポーネント内でviewport/windowの高さを取得するには、以下の方法が一般的です。
Stateを使って管理する
import { useState, useEffect } from 'react';
function MyComponent() {
const [windowHeight, setWindowHeight] = useState(window.innerHeight);
useEffect(() => {
const handleResize = () => {
setWindowHeight(window.innerHeight);
};
window.addEventListener('resize', handleResize);
return () => {
window.removeEv entListener('resize', handleResize);
};
}, []);
ret urn (
<div>
<p>Viewport/window height: {windowHeight}</p>
</div>
);
}
この方法では、useStateフックを使ってwindowHeightを管理し、useEffectフックを使ってウィンドウサイズが変更されたときにwindowHeightを更新します。
Refを使って直接アクセスする
import { useRef, useEffect } from 'react';
function MyComponent() {
const windowRef = useRef(null);
useEffect(() => {
const handleResize = () => {
windowRef.current.style.height = window.innerHeight + 'px';
};
window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('resize', handleResize);
};
}, []);
return (
< div ref={windowRef}>
{/* ここでviewport/windowの高さを利用する */}
</div>
);
}
この方法では、useRefフックを使ってウィンドウ要素への参照を取得し、直接そのスタイルを更新します。
注意
- 複雑なレイアウトやパフォーマンスが重要な場合は、適切なアプローチを選択してください。
- ウィンドウサイズが変更されたときにコンポーネントを再レンダリングする必要がある場合は、
useEffectフックを使用します。 window.innerHeightはブラウザのビューポートの高さを取得します。スクロールバーがある場合、ウィンドウの実際の高さはこれよりも小さくなります。
コード例1: useStateとuseEffectを使った方法
import { useState, useEffect } from 'react';
function MyComponent() {
const [windowHeight, setWindowHeight] = useState(window.innerHeight);
useEffect(() => {
const handleResize = () => {
setWindowHeight(window.innerHeight);
};
window.addEventListener('resize', handleResize);
return () => {
window.removeEv entListener('resize', handleResize);
};
}, []);
ret urn (
<div>
<p>Viewport/window height: {windowHeight}</p>
</div>
);
}
解説
- 依存関係配列
useEffectの第2引数に空の配列を渡すことで、この効果がコンポーネントがマウントされた後に一度だけ実行されるようにします。 - addEventListenerとremoveEventListener
ウィンドウのresizeイベントリスナーを追加・削除することで、ウィンドウサイズが変更されたときにhandleResize関数が呼び出されるようにします。 - handleResize関数
ウィンドウサイズが変更されたときに呼び出される関数です。window.innerHeightで最新のウィンドウの高さを取得し、setWindowHeightで状態を更新します。 - useEffect
コンポーネントがマウントされた後、または依存関係配列に含まれる値が変更された後に実行される効果的な処理を記述するためのフックです。 - useState
ウィンドウの高さを状態として管理するためのフックです。windowHeightという変数に、現在のウィンドウの高さを格納します。
このコードの働き
- コンポーネントが最初にレンダリングされると、
window.innerHeightで現在のウィンドウの高さを取得し、windowHeight状態に設定します。 useEffectにより、ウィンドウのresizeイベントリスナーが追加されます。- ウィンドウサイズが変更されると、
handleResize関数が呼び出され、windowHeight状態が更新されます。 - コンポーネントがアンマウントされると、
useEffectの返り値の関数によってイベントリスナーが削除されます。
コード例2: useRefを使った方法
import { useRef, useEffect } from 'react';
function MyComponent() {
const windowRef = useRef(null);
useEffect(() => {
const handleResize = () => {
windowRef.current.style.height = window.innerHeight + 'px';
};
window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('resize', handleResize);
};
}, []);
return (
< div ref={windowRef}>
{/* ここでviewport/windowの高さを利用する */}
</div>
);
}
- handleResize関数
ウィンドウサイズが変更されたときに呼び出される関数です。windowRef.current.style.heightで、div要素の高さをwindow.innerHeightに設定します。 - useRef
DOM要素への参照を保持するためのフックです。windowRefという変数に、div要素への参照を格納します。
div要素にref属性を指定し、useRefで取得したwindowRefにその参照を格納します。- ウィンドウサイズが変更されると、
handleResize関数が呼び出され、div要素の高さがウィンドウの高さに合わせて変更されます。
どちらの方法を選ぶべきか
- useRef
ウィンドウの高さを元にDOM要素のスタイルを直接変更したい場合に適しています。 - useState
ウィンドウの高さを状態として管理したい場合、または高さを他のコンポーネントに渡したい場合に適しています。
どちらの方法も、ウィンドウサイズが変更されたときに適切に更新されるように、useEffectフックを使ってwindow.addEventListenerとwindow.removeEventListenerを使用しています。
ReactJSでviewport/windowの高さを取得するには、useStateとuseEffect、またはuseRefとuseEffectを組み合わせることで実現できます。どちらの方法を選ぶかは、どのような用途で高さを利用したいかによって決まります。
- より正確なウィンドウサイズを取得したい場合は、
window.innerWidth、document.documentElement.clientWidth、document.body.clientWidthなどのプロパティも参照してください。
ReactJSでウィンドウの高さを取得する代替方法
useWindowDimensions カスタムフックの作成
より再利用性が高く、コンポーネント間のロジックの共有を容易にするために、カスタムフックを作成することができます。
import { useState, useEffect } from 'react';
function useWindowDimensions() {
const [windowSize, setWindowSize] = useState({
width: window.innerWidth,
height: window.innerHeight,
});
useEffect(() => {
const handleResize = () => {
setWindowSize({
width: window.innerWidth,
height: window.innerHeight,
});
};
window.addEventListener('resize', handleResize );
return () => window.removeEventListener('resize', handleResize);
}, []);
ret urn windowSize;
}
function MyComponent() {
const { height } = useWindowDimensions();
return (
<div>
<p>Viewport/window height: {height}</p>
</div>
);
}
この方法では、ウィンドウの幅と高さをオブジェクトとして返し、複数のコンポーネントで再利用できます。
ライブラリの利用
React用のUIライブラリの中には、ウィンドウサイズを管理するための便利なフックやコンポーネントを提供しているものがあります。例えば、React Windowやreact-resizeといったライブラリが挙げられます。これらのライブラリを利用することで、より簡単にウィンドウサイズに関する情報を取得し、処理することができます。
Context APIの利用
ウィンドウの高さをアプリケーション全体で共有したい場合、Context APIを利用することができます。
import { createContext, useContext, useState, useEffect } from 'react';
const WindowSizeContext = createContext({
width: 0,
height: 0,
});
function WindowSizeProvider({ children }) {
// ... (上記と同様のロジック)
return (
<WindowSizeContext.Provider value={windowSize}>
{children}
</WindowSizeContext.Provider>
);
}
function MyComponent() {
const { height } = useContext(WindowSizeContext);
// ...
}
この方法では、ウィンドウサイズに関する情報をアプリケーション全体で共有し、任意のコンポーネントからアクセスできます。
- より高度な機能やパフォーマンスが必要な場合
React Windowやreact-resizeなどのライブラリが便利です。 - シンプルでカスタムフックを使いたい場合
useWindowDimensionsのようなカスタムフックが最適です。
選択する際には、以下の点を考慮してください。
- チームでの開発
チームで開発する場合は、統一した方法でウィンドウサイズを管理するために、ライブラリやContext APIが適しています。 - 機能の複雑さ
複雑なウィンドウサイズ管理が必要な場合は、ライブラリが便利です。 - プロジェクトの規模
小規模なプロジェクトであればカスタムフックで十分ですが、大規模なプロジェクトではライブラリやContext APIが有効です。
- パフォーマンスが重要な場合は、
requestAnimationFrameを使ってリサイズイベントの処理を最適化することができます。 - 上記の例では、ウィンドウの幅と高さを取得していますが、必要に応じて他の情報を取得することも可能です。
javascript reactjs window
