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

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

JavaScriptでウィンドウサイズ変更を学ぶ初心者向けのイメージJS

 

【サイト内のコードはご自由に個人利用・商用利用いただけます】

このサービスは複数のSSPによる協力の下、運営されています。

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

また、理解しにくい説明や難しい問題に躓いても、JPSMがプログラミングの解説に特化してオリジナルにチューニングした画面右下のAIアシスタントに質問していだければ、特殊な問題でも指示に従い解決できるように作ってあります。

基本的な知識があればカスタムコードを使って機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

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

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

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

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

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

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

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

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

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

ウィンドウサイズを取得するには、window.innerWidthwindow.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>

●注意点と対処法

○レスポンシブデザインとの関係

ウィンドウサイズに応じた処理は、レスポンシブデザインにおいて重要な役割を果たします。

ただし、JavaScriptでウィンドウサイズに応じた処理を実装する場合、CSSのメディアクエリとの連携が重要になります。

適切に連携させることで、より効果的なレスポンシブデザインが実現できます。

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

ウィンドウサイズが変更されるたびに処理が実行されるため、パフォーマンスに影響を与える可能性があります。

パフォーマンスへの影響を軽減するためには、デバウンス(debounce)やスロットリング(throttling)といった手法を適用することが有効です。

これらの手法を利用することで、処理の実行回数を制限し、パフォーマンスの低下を防ぐことができます。

また、CSSのメディアクエリを活用することで、JavaScriptの処理負荷を軽減することも可能です。

適切な実装方法を選択し、パフォーマンスへの影響を最小限に抑えましょう。

まとめ

この記事では、JavaScriptを用いたウィンドウサイズ変更の検出方法と、それを利用したサンプルコードや応用例を紹介しました。

また、注意点と対処法、カスタマイズ方法も説明しました。

これらの情報を参考に、ウェブサイトのレスポンシブデザインやユーザビリティ向上に役立ててください。

本記事を読めば、ウィンドウサイズ変更に関する処理を自由にカスタマイズできるようになります。