【JavaScript】resize – ウィンドウのサイズが変更された際に発生するイベント

resizeイベントは、ブラウザウィンドウのサイズが変更された際に発生するイベントです。主に画面サイズに応じてレイアウトを調整したり、コンテンツをリサイズする際に利用されます。今回は、resizeイベントの基本的な使い方から応用例までをまとめていきたいと思います。

目次非表示

resizeイベントとは？
基本的な使い方
レスポンシブデザインの動的変更
デバウンスを使ったパフォーマンス向上
使用時の注意点
さいごに

resizeイベントとは？

resizeイベントは、ウィンドウのサイズが変更されたときに発生するイベントで、主にwindowオブジェクトにバインドして使用します。例えば、レスポンシブデザインや、windowサイズに応じて動的に要素のレイアウトを変更する場合に役立ちます。

対象オブジェクト：resizeイベントはwindowオブジェクトでのみサポートされます。
発生頻度：ウィンドウサイズの変更中、イベントは頻繁に発生します。そのため、必要に応じてパフォーマンスを考慮した対策（例: デバウンスやスロットリング）が必要です。

基本的な使い方

以下は、ウィンドウサイズが変更されるたびに現在の幅と高さを表示する例です。

See the Pen resize() by tones (@tonescodedesign) on CodePen.

JavaScript

const sizeDisplay = document.getElementById('size');

function updateWindowSize() {
    sizeDisplay.textContent = `ウィンドウサイズ: ${window.innerWidth}px × ${window.innerHeight}px`;
}

// イベントリスナーを追加
window.addEventListener('resize', updateWindowSize);

// 初期表示
updateWindowSize();

HTML

<p id="size">ウィンドウサイズ: なし</p>

この例では、resizeイベントを監視し、ウィンドウサイズの変化に応じて表示内容を更新しています。

レスポンシブデザインの動的変更

次に、ウィンドウ幅に応じて背景色を変更する例を示します。

See the Pen Untitled by tones (@tonescodedesign) on CodePen.

JavaScript

function updateBackgroundColor() {
  if (window.innerWidth < 600) {
    document.body.style.backgroundColor = 'lightblue';
  } else if (window.innerWidth < 900) {
    document.body.style.backgroundColor = 'lightgreen';
  } else {
    document.body.style.backgroundColor = 'lightcoral';
  }
}

// イベントリスナーを追加
window.addEventListener('resize', updateBackgroundColor);

// 初期表示
updateBackgroundColor();

CSS

body {
  margin: 0;
  font-family: Arial, sans-serif;
  transition: background-color 0.3s;
}

このコードでは、ウィンドウサイズに応じて背景色を動的に変更しています。

デバウンスを使ったパフォーマンス向上

resizeイベントは頻繁に発生するため、イベントハンドラーが高頻度で呼び出されるとパフォーマンスに悪影響を及ぼすことがあります。そのため、デバウンスという技術を使ってイベント処理を最適化します。

See the Pen resize() by tones (@tonescodedesign) on CodePen.

JavaScript

const debounceSizeDisplay = document.getElementById('debounceSize');

function debounce(func, delay) {
  let timeoutId;
  return function (...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

function updateDebouncedWindowSize() {
  debounceSizeDisplay.textContent = `ウィンドウサイズ: ${window.innerWidth}px × ${window.innerHeight}px`;
}

const debouncedResizeHandler = debounce(updateDebouncedWindowSize, 200);

// イベントリスナーを追加
window.addEventListener('resize', debouncedResizeHandler);

// 初期表示
updateDebouncedWindowSize();

HTML

<p id="debounceSize">ウィンドウサイズ: なし</p>

この例では、debounce関数を使用して、resizeイベントが発生してから200ミリ秒後にイベントハンドラーを実行するようにしています。

使用時の注意点

頻発するイベントに対する対策: resizeイベントはウィンドウサイズが変わるたびに頻繁に発生します。そのため、パフォーマンスを考慮してデバウンスやスロットリングを活用することをおすすめします。
CSSで対応できる場合はCSSを優先: レスポンシブデザインの多くは、@mediaクエリを使用したCSSで対応可能です。JavaScriptでの制御は、CSSだけでは対応できない場合に限定しましょう。
イベントの解除: 不要になった場合、イベントリスナーを必ず解除することでメモリリークを防ぐことができます。例えば、removeEventListenerを使用します。
アクセシビリティ: ウィンドウサイズ変更時に視覚的な変化がある場合、スクリーンリーダー利用者には伝わりません。そのため、変更内容を明示的に通知する仕組み（例えば、ARIAライブリージョン）を導入することを検討してください。