JavaScript Tips | ブラウザ・画面制御：現在の画面幅を取得する

JavaScript JavaScript
スポンサーリンク
スポンサーリンク
  1. 「現在の画面幅を取得する」はレスポンシブUIの出発点です
  2. まず「どの幅を取るのか」を整理する
    1. 画面幅にはいくつか種類があります
    2. シンプルな例：現在の画面幅をコンソールに出す
  3. ステップ1：現在の画面幅を取得する共通ユーティリティを作る
    1. 基本的なユーティリティ関数
    2. 使い方のイメージ
  4. ステップ2：ブレークポイントと組み合わせて「状態」を判定する
    1. ブレークポイントを定義する
    2. 使い方例：カテゴリに応じて挙動を変える
  5. ステップ3：リサイズイベントと組み合わせて「変化」を検知する
    1. シンプルなリサイズイベントの例
    2. 注意点：リサイズイベントは頻繁に発火します
  6. ステップ4：デバウンス付きの画面幅監視ユーティリティを作る
    1. デバウンスの基本的な考え方
    2. デバウンス付きユーティリティの例
    3. 使い方例：サイドバーの開閉を画面幅に応じて制御する
  7. ステップ5：CSSメディアクエリとの役割分担を意識する
    1. CSSでやるべきこと
    2. JavaScriptでやるべきこと
  8. ステップ6：業務システムでの具体的な活用シナリオ
    1. 例1：一覧画面の表示モード切り替え
    2. 例2：グラフのラベル数を画面幅に応じて調整
    3. 例3：ダッシュボードのウィジェット配置を変える
  9. まとめ：「現在の画面幅を取得するユーティリティ」はレスポンシブな業務UIの土台です

「現在の画面幅を取得する」はレスポンシブUIの出発点です

業務システムやWebアプリケーションでは、 「画面の幅に応じてUIの挙動を変えたい」というニーズが非常に多いです。

  • 画面幅が狭いときはサイドバーを自動的に閉じたい
  • 一定幅以下ではテーブルをカード表示に切り替えたい
  • スマホサイズではボタンを縦並びにしたい
  • グラフのラベル数を画面幅に応じて減らしたい

こうした「レスポンシブな挙動」をJavaScriptで制御するための第一歩が、 「現在の画面幅を正しく取得するユーティリティ」です。

この記事では、プログラミング初心者の方にも分かるように、

  • 画面幅の「どの値」を使うべきか
  • シンプルな取得方法と注意点
  • 実務で使える共通ユーティリティの作り方
  • ブレークポイントとの連携例
  • リサイズイベントとの組み合わせ方（負荷対策も含めて）

をステップバイステップで解説していきます。

まず「どの幅を取るのか」を整理する

画面幅にはいくつか種類があります

JavaScriptで「幅」を扱うとき、実は複数の候補があります。

  • window.innerWidth ブラウザのビューポート（表示領域）の幅。スクロールバーを含む場合もあります。
  • document.documentElement.clientWidth <html> 要素のクライアント幅。スクロールバーを除いた値になることが多いです。
  • screen.width 物理ディスプレイの幅。ブラウザのウィンドウ幅とは別物です。

レスポンシブUIで一般的に使うのは、 「ビューポートの幅」＝window.innerWidth または document.documentElement.clientWidth です。

初心者の方は、まず次のように覚えておくとよいです。

「画面の表示領域の幅を知りたいときは、window.innerWidth を使う」

シンプルな例：現在の画面幅をコンソールに出す

const width = window.innerWidth;
console.log("現在の画面幅:", width, "px");
JavaScript

これだけで、今のビューポート幅を取得できます。

ステップ1：現在の画面幅を取得する共通ユーティリティを作る

毎回 window.innerWidth を直接書いてもよいのですが、 業務システムでは「幅の取得ロジック」を共通化しておくと便利です。

基本的なユーティリティ関数

// viewport-utils.js
export function getViewportWidth() {
  // 将来の拡張やブラウザ差異を吸収するために関数化しておく
  return window.innerWidth || document.documentElement.clientWidth;
}
JavaScript

使い方のイメージ

import { getViewportWidth } from "./viewport-utils.js";

const width = getViewportWidth();
console.log("現在の画面幅:", width, "px");
JavaScript

ポイント：関数化しておくことで、 「画面幅を知りたいときは必ずこの関数を使う」というルールを作れます。 後から仕様を変えたいときも、この関数だけを修正すれば済みます。

ステップ2：ブレークポイントと組み合わせて「状態」を判定する

画面幅を取得したら、次にやりたくなるのは、

「今はスマホサイズか？タブレットサイズか？PCサイズか？」

という判定です。

ブレークポイントを定義する

CSSのメディアクエリと同じように、JavaScript側でもブレークポイントを定義できます。

// viewport-utils.js
const BREAKPOINTS = {
  mobile: 480,
  tablet: 768,
  desktop: 1024,
};

export function getViewportWidth() {
  return window.innerWidth || document.documentElement.clientWidth;
}

export function getViewportCategory() {
  const width = getViewportWidth();

  if (width <= BREAKPOINTS.mobile) {
    return "mobile";
  } else if (width <= BREAKPOINTS.tablet) {
    return "tablet";
  } else if (width <= BREAKPOINTS.desktop) {
    return "desktop";
  } else {
    return "large";
  }
}
JavaScript

使い方例：カテゴリに応じて挙動を変える

import { getViewportCategory } from "./viewport-utils.js";

const category = getViewportCategory();
console.log("現在の画面カテゴリ:", category);

if (category === "mobile") {
  console.log("モバイル向けレイアウトを適用します");
} else if (category === "tablet") {
  console.log("タブレット向けレイアウトを適用します");
} else {
  console.log("デスクトップ向けレイアウトを適用します");
}
JavaScript

ポイント：画面幅そのものだけでなく、 「幅から導かれるカテゴリ（mobile / tablet / desktop）」をユーティリティで判定しておくと、 UIロジック側がシンプルになります。

ステップ3：リサイズイベントと組み合わせて「変化」を検知する

現在の画面幅を一度取得するだけでなく、 「幅が変わったときに処理をしたい」 という場面も多いです。

例えば、

  • 画面幅が一定以下になったらサイドバーを自動的に閉じる
  • 幅が広くなったらテーブル表示に戻す
  • グラフのラベル数を再計算する

などです。

シンプルなリサイズイベントの例

import { getViewportWidth, getViewportCategory } from "./viewport-utils.js";

window.addEventListener("resize", () => {
  const width = getViewportWidth();
  const category = getViewportCategory();

  console.log("画面幅が変わりました:", width, "px", "カテゴリ:", category);
});
JavaScript

注意点：リサイズイベントは頻繁に発火します

resize イベントは、ユーザーがウィンドウサイズを変えている間、 非常に高頻度で発火します。

そのたびに重い処理（レイアウト再計算、API呼び出しなど）を行うと、 パフォーマンスに悪影響が出ることがあります。

そこで、 「デバウンス（一定時間内の連続イベントをまとめる）」 というテクニックを使うことがよくあります。

ステップ4：デバウンス付きの画面幅監視ユーティリティを作る

デバウンスの基本的な考え方

デバウンスとは、

「イベントが連続して発生したとき、最後の1回だけ処理する」

という仕組みです。

リサイズイベントに対してデバウンスをかけることで、

  • ユーザーがウィンドウを動かしている間は処理を待ち
  • 動かし終わったタイミングで1回だけ処理する

という挙動にできます。

デバウンス付きユーティリティの例

// viewport-utils.js
const BREAKPOINTS = {
  mobile: 480,
  tablet: 768,
  desktop: 1024,
};

export function getViewportWidth() {
  return window.innerWidth || document.documentElement.clientWidth;
}

export function getViewportCategory() {
  const width = getViewportWidth();

  if (width <= BREAKPOINTS.mobile) {
    return "mobile";
  } else if (width <= BREAKPOINTS.tablet) {
    return "tablet";
  } else if (width <= BREAKPOINTS.desktop) {
    return "desktop";
  } else {
    return "large";
  }
}

export function onViewportChange(callback, delay = 200) {
  if (typeof callback !== "function") return;

  let timerId = null;

  const handler = () => {
    if (timerId) {
      clearTimeout(timerId);
    }
    timerId = setTimeout(() => {
      const width = getViewportWidth();
      const category = getViewportCategory();
      callback({ width, category });
    }, delay);
  };

  window.addEventListener("resize", handler);

  // 初期状態も一度通知しておく
  callback({
    width: getViewportWidth(),
    category: getViewportCategory(),
  });

  // 解除用の関数を返す
  return () => {
    window.removeEventListener("resize", handler);
    if (timerId) {
      clearTimeout(timerId);
    }
  };
}
JavaScript

使い方例：サイドバーの開閉を画面幅に応じて制御する

import { onViewportChange } from "./viewport-utils.js";

document.addEventListener("DOMContentLoaded", () => {
  const sidebar = document.getElementById("sidebar");
  if (!sidebar) return;

  const unsubscribe = onViewportChange(({ width, category }) => {
    console.log("画面幅:", width, "カテゴリ:", category);

    if (category === "mobile") {
      sidebar.classList.add("is-collapsed");
    } else {
      sidebar.classList.remove("is-collapsed");
    }
  });

  // 例：画面破棄時に解除したい場合
  // unsubscribe();
});
JavaScript

ポイント：onViewportChange のようなユーティリティを用意しておくと、 「画面幅の変化に応じて何かしたい」というニーズに対して、 毎回 resize イベントとデバウンス処理を書く必要がなくなります。

ステップ5：CSSメディアクエリとの役割分担を意識する

レスポンシブ対応は、CSSだけでもかなりのことができます。

@media (max-width: 768px) {
  .sidebar {
    display: none;
  }
}

では、 「画面幅をJavaScriptで取得する意味は何か？」 という点も整理しておきます。

CSSでやるべきこと

  • レイアウト（フレックス方向、グリッド構造など）の切り替え
  • フォントサイズや余白の調整
  • 要素の表示・非表示（単純なケース）

JavaScriptでやるべきこと

  • 画面幅に応じて「ロジック」を変える
    • 例：APIのページサイズを変える
    • 例：グラフのラベル数を変える
  • UI状態を画面幅に応じて変更する
    • 例：サイドバーの開閉状態を変える
    • 例：コンポーネントの初期状態を変える

ポイント：CSSは「見た目」、JavaScriptは「挙動・ロジック」という役割分担を意識すると、 画面幅取得ユーティリティの使いどころがはっきりします。

ステップ6：業務システムでの具体的な活用シナリオ

最後に、業務・実務で「現在の画面幅を取得するユーティリティ」が役立つ具体例をいくつか挙げます。

例1：一覧画面の表示モード切り替え

  • デスクトップではテーブル表示
  • モバイルではカード表示
import { getViewportCategory } from "./viewport-utils.js";

function renderList(items) {
  const category = getViewportCategory();

  if (category === "mobile") {
    renderAsCards(items);
  } else {
    renderAsTable(items);
  }
}
JavaScript

例2：グラフのラベル数を画面幅に応じて調整

import { getViewportWidth } from "./viewport-utils.js";

function getLabelCount() {
  const width = getViewportWidth();

  if (width < 600) {
    return 5;
  } else if (width < 900) {
    return 10;
  } else {
    return 20;
  }
}
JavaScript

例3：ダッシュボードのウィジェット配置を変える

import { getViewportCategory } from "./viewport-utils.js";

function layoutDashboard() {
  const category = getViewportCategory();

  if (category === "mobile") {
    // 1列レイアウト
  } else if (category === "tablet") {
    // 2列レイアウト
  } else {
    // 3列レイアウト
  }
}
JavaScript

まとめ：「現在の画面幅を取得するユーティリティ」はレスポンシブな業務UIの土台です

現在の画面幅を取得するJavaScriptユーティリティを整えておくことで、

  • 画面幅そのもの（getViewportWidth）
  • 幅から導かれるカテゴリ（getViewportCategory）
  • 幅の変化をデバウンス付きで監視する仕組み（onViewportChange）

を共通の形で扱えるようになります。

その結果、

  • サイドバーの開閉
  • 一覧表示モードの切り替え
  • グラフやダッシュボードのレイアウト調整

といったレスポンシブな挙動を、 業務システム全体で一貫したルールのもとに実装できるようになります。

「現在の画面幅を取得する」という一見シンプルなユーティリティは、 「画面サイズに応じてUIとロジックを賢く切り替えるための入り口」です。

この入り口を、きちんとした共通ユーティリティとして整えておくことが、 長期運用される業務Webアプリケーションにとって、とても大切な基盤づくりだと言えます。

スポンサーリンク
タイトルとURLをコピーしました