JavaScriptでウィンドウサイズ変更をマスター！10個のサンプルコードで完全解説

はじめに
●ウィンドウサイズ変更の基本
- ○JavaScriptとウィンドウサイズ変更
●ウィンドウサイズ変更の使い方
●ウィンドウサイズ変更の応用例
●注意点と対処法
- ○パフォーマンスへの影響
●カスタマイズ方法
●注意点と対処法
- ○レスポンシブデザインとの関係
- ○パフォーマンスへの影響
まとめ

はじめに

この記事を読めば、JavaScriptでウィンドウサイズ変更を行う方法が身につき、応用もできるようになります。

JavaScriptの基本から応用まで、初心者にもわかりやすい形で徹底解説していきます。

10個のサンプルコードを通して、使い方や注意点、応用例を学んでいきましょう。

●ウィンドウサイズ変更の基本

○JavaScriptとウィンドウサイズ変更

JavaScriptは、ウェブページの動的な振る舞いを制御するために使用されるプログラミング言語です。

ウィンドウサイズの変更は、レスポンシブデザインやUI/UXの向上のためによく利用されます。

●ウィンドウサイズ変更の使い方

○サンプルコード1：ウィンドウサイズを取得する

ウィンドウサイズを取得するには、window.innerWidthとwindow.innerHeightを使います。

これらは、ウィンドウの内部の幅と高さをピクセル単位で返します。

下記のサンプルコードでは、ウィンドウサイズを取得し、コンソールに表示しています。

console.log("ウィンドウ幅: " + window.innerWidth + "px");
console.log("ウィンドウ高さ: " + window.innerHeight + "px");

○サンプルコード2：ウィンドウサイズを変更する

ウィンドウサイズを変更するには、window.resizeTo()メソッドを使います。

引数に新しい幅と高さを指定します。

下記のサンプルコードでは、ウィンドウサイズを500×500ピクセルに変更しています。

window.resizeTo(500, 500);

○サンプルコード3：ウィンドウサイズ変更時のイベントハンドラ

ウィンドウサイズが変更されたときに特定の処理を実行するには、resizeイベントを使用します。

下記のサンプルコードでは、ウィンドウサイズが変更されたときに、コンソールに新しいサイズが表示されます。

window.addEventListener("resize", function() {
  console.log("ウィンドウ幅: " + window.innerWidth + "px");
  console.log("ウィンドウ高さ: " + window.innerHeight + "px");
});

●ウィンドウサイズ変更の応用例

ウィンドウサイズ変更を利用した応用例を紹介します。

これらのサンプルコードを参考に、独自のウェブサイトに応じたカスタマイズを試みてください。

○サンプルコード4：ウィンドウサイズに応じた画像の表示

ウィンドウサイズに応じて表示する画像を切り替える例です。

下記のサンプルコードでは、ウィンドウサイズが768ピクセル未満の場合、スマホ向けの画像が表示されます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ウィンドウサイズに応じた画像の表示</title>
  <style>
    #target-image {
      max-width: 100%;
    }
  </style>
</head>
<body>
  <img id="target-image" src="pc_image.jpg" alt="表示画像">
  <script>
    const targetImage = document.getElementById("target-image");

    function setImageSource() {
      if (window.innerWidth < 768) {
        targetImage.src = "sp_image.jpg";
      } else {
        targetImage.src = "pc_image.jpg";
      }
    }

    window.addEventListener("resize", setImageSource);
    setImageSource();
  </script>
</body>
</html>

○サンプルコード5：ウィンドウサイズに応じたナビゲーションの切り替え

ウィンドウサイズが変わったときに、ナビゲーションメニューの表示形式を切り替える例です。

下記のサンプルコードでは、ウィンドウサイズが768ピクセル未満の場合、ドロップダウンメニューに切り替えます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ウィンドウサイズに応じたナビゲーションの切り替え</title>
  <style>
    /* ここにCSSを記述 */
  </style>
</head>
<body>
  <nav id="main-nav">
    <!-- ナビゲーションメニューのコンテンツ -->
  </nav>
  <script>
    const mainNav = document.getElementById("main-nav");

    function toggleNavigation() {
      if (window.innerWidth < 768) {
        // ドロップダウンメニューに切り替える処理
      } else {
        // 通常のナビゲーションメニューに戻す処理
      }
    }

    window.addEventListener("resize", toggleNavigation);
    toggleNavigation();
  </script>
</body>
</html>

○サンプルコード6：ウィンドウサイズに応じたフォントサイズの変更

ウィンドウサイズに応じて、フォントサイズを変更する例です。

下記のサンプルコードでは、ウィンドウサイズが768ピクセル未満の場合、フォントサイズが小さくなります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ウィンドウサイズに応じたフォントサイズの変更</title>
  <style>
    body {
      font-size: 18px;
    }
    .smaller-font {
      font-size: 14px;
    }
  </style>
</head>
<body>
  <div id="content">
    <p>ウィンドウサイズに応じてフォントサイズが変わります。</p>
  </div>
  <script>
    const content = document.getElementById("content");

    function adjustFontSize() {
      if (window.innerWidth < 768) {
        content.classList.add("smaller-font");
      } else {
        content.classList.remove("smaller-font");
      }
    }

    window.addEventListener("resize", adjustFontSize);
    adjustFontSize();
  </script>
</body>
</html>

●注意点と対処法

ウィンドウサイズ変更に関する注意点と対処法を説明します。

○パフォーマンスへの影響

ウィンドウサイズ変更に伴う処理が多いと、パフォーマンスに影響が出ることがあります。

特にresizeイベントは、ウィンドウサイズ変更中に何度も発火します。

これを防ぐために、イベント発火の間隔を制限するデバウンス（debounce）処理が推奨されます。

下記のサンプルコードは、デバウンス処理を適用した例です。

function debounce(func, wait) {
  let timeout;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(function() {
      func.apply(context, args);
    }, wait);
  };
}

function adjustFontSize() {
  // フォントサイズ調整の処理
}

const debouncedAdjustFontSize = debounce(adjustFontSize, 200);
window.addEventListener("resize", debouncedAdjustFontSize);

●カスタマイズ方法

ウィンドウサイズ変更に関するカスタマイズ方法を紹介します。

○サンプルコード7：複数のブレークポイントでの処理

ウィンドウサイズに応じて複数のブレークポイントで処理を行いたい場合、下記のサンプルコードを参考にしてください。

function handleResize() {
  if (window.innerWidth < 480) {
    // ウィンドウサイズが480ピクセル未満の場合の処理
  } else if (window.innerWidth < 768) {
    // ウィンドウサイズが480ピクセル以上で768ピクセル未満の場合の処理
  } else if (window.innerWidth < 1024) {
    // ウィンドウサイズが768ピクセル以上で1024ピクセル未満の場合の処理
  } else {
    // ウィンドウサイズが1024ピクセル以上の場合の処理
  }
}

window.addEventListener("resize", handleResize);
handleResize();

○サンプルコード8：ウィンドウサイズに応じたスライドショーの変更

ウィンドウサイズに応じて、スライドショーの表示方法や画像サイズを変更する例です。

下記のサンプルコードでは、ウィンドウサイズが768ピクセル未満の場合、スライドショーが縦並びになります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ウィンドウサイズに応じたスライドショーの変更</title>
  <style>
    .slide {
      width: 100%;
      height: 200px;
      background-repeat: no-repeat;
      background-size: cover;
    }
    .vertical-slides .slide {
      height: 100px;
    }
  </style>
</head>
<body>
  <div id="slideshow">
    <div class="slide" style="background-image: url('image1.jpg');"></div>
    <div class="slide" style="background-image: url('image2.jpg');"></div>
    <div class="slide" style="background-image: url('image3.jpg');"></div>
  </div>
  <script>
    const slideshow = document.getElementById("slideshow");

    function adjustSlideshow() {
      if (window.innerWidth < 768) {
        slideshow.classList.add("vertical-slides");
      } else {
        slideshow.classList.remove("vertical-slides");
      }
    }

    window.addEventListener("resize", adjustSlideshow);
    adjustSlideshow();
  </script>
</body>
</html>

○サンプルコード9：ウィンドウサイズに応じた動画の再生速度調整

ウィンドウサイズに応じて、動画の再生速度を調整する例です。

下記のサンプルコードでは、ウィンドウサイズが768ピクセル未満の場合、動画の再生速度が遅くなります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ウィンドウサイズに応じた動画の再生速度調整</title>
</head>
<body>
  <video id="video" src="sample_video.mp4" controls></video>
  <script>
    const video = document.getElementById("video");

    function adjustVideoSpeed() {
      if (window.innerWidth < 768) {
        video.playbackRate = 0.75;
      } else {
        video.playbackRate = 1;
      }
    }

    window.addEventListener("resize", adjustVideoSpeed);
    adjustVideoSpeed();
  </script>
</body>
</html>

○サンプルコード10：ウィンドウサイズに応じたアコーディオンメニューの変更

ウィンドウサイズに応じて、アコーディオンメニューの表示方法を変更する例です。

下記のサンプルコードでは、ウィンドウサイズが768ピクセル未満の場合、アコーディオンメニューが表示され、それ以上の場合は通常のナビゲーションメニューが表示されます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ウィンドウサイズに応じたアコーディオンメニューの変更</title>
  <style>
    .menu {
      display: flex;
      flex-wrap: wrap;
      list-style: none;
      padding-left: 0;
    }
    .menu li {
      flex: 1;
    }
    .accordion {
      display: none;
      flex-direction: column;
    }
    .accordion li {
      order: 1;
    }
  </style>
</head>
<body>
  <ul id="menu">
    <li><a href="#">メニュー1</a></li>
    <li><a href="#">メニュー2</a></li>
    <li><a href="#">メニュー3</a></li>
  </ul>
  <script>
    const menu = document.getElementById("menu");

    function adjustMenu() {
      if (window.innerWidth < 768) {
        menu.classList.add("accordion");
      } else {
        menu.classList.remove("accordion");
      }
    }

    window.addEventListener("resize", adjustMenu);
    adjustMenu();
  </script>
</body>
</html>