JavaScript Tips | 基本・共通ユーティリティ：環境 – モバイル判定

なぜ「モバイル判定」ユーティリティが必要になるのか

業務システムでも、今は「PC だけ」ではなく「スマホ・タブレット」からの利用が当たり前になっています。
その結果、こういう要件がよく出てきます。

PC では横に並べたいけど、スマホでは縦に並べたい。
スマホではボタンを大きくしたい。
モバイルではドラッグ操作ではなく、タップ前提の UI にしたい。

CSS のメディアクエリだけで解決できることも多いですが、
「JavaScript のロジック側で、モバイルかどうかで分岐したい」場面も確実にあります。
そこで役に立つのが「モバイル判定」ユーティリティです。

基本の考え方：何をもって「モバイル」とみなすか

「モバイル判定」と聞くと、
「iPhone か Android かを判定する」
「スマホかタブレットかを判定する」
といったイメージを持ちがちですが、実務的にはもう少しラフで構いません。

多くの場合、JavaScript から知りたいのは次のようなことです。

画面サイズや操作感が「PC ではなく、手に持つデバイスっぽい」かどうか。
つまり、「モバイル向け UI を出すべきかどうか」です。

そのために、よく使われる材料が二つあります。

navigator.userAgent によるデバイス種別の判定。
window.innerWidth などによる画面幅ベースの判定。

どちらか一方だけに頼るのではなく、
「用途に応じてどちらを使うか」を決めておくのがポイントです。

userAgent ベースのモバイル判定ユーティリティ

まずは「OS ベースでモバイルかどうか」を見る

一番よくあるパターンは、navigator.userAgent に含まれる文字列で
「Android か iOS か」を見る方法です。

function detectMobileByUserAgent() {
  if (typeof navigator === "undefined") {
    return {
      isMobile: false,
      isAndroid: false,
      isIOS: false,
    };
  }

  const ua = navigator.userAgent;

  const isAndroid = /Android/i.test(ua);
  const isIOS = /iPhone|iPad|iPod/i.test(ua);

  const isMobile = isAndroid || isIOS;

  return {
    isMobile,
    isAndroid,
    isIOS,
  };
}

function detectMobileByUserAgent() {
  if (typeof navigator === "undefined") {
    return {
      isMobile: false,
      isAndroid: false,
      isIOS: false,
    };
  }

  const ua = navigator.userAgent;

  const isAndroid = /Android/i.test(ua);
  const isIOS = /iPhone|iPad|iPod/i.test(ua);

  const isMobile = isAndroid || isIOS;

  return {
    isMobile,
    isAndroid,
    isIOS,
  };
}

使い方はとてもシンプルです。

const env = detectMobileByUserAgent();

if (env.isMobile) {
  console.log("モバイル向け UI を使う");
} else {
  console.log("PC 向け UI を使う");
}

const env = detectMobileByUserAgent();

if (env.isMobile) {
  console.log("モバイル向け UI を使う");
} else {
  console.log("PC 向け UI を使う");
}

ここでの重要ポイントは、
「モバイルかどうか」を一発で返す isMobile を用意しつつ、
必要なら isAndroid や isIOS で細かく分けられるようにしていることです。

また、navigator が存在しない環境（Node.js など）では、
安全に「モバイルではない」と返すようにしているのも実務的に大事な配慮です。

画面幅ベースのモバイル判定

「見た目としてモバイル扱いしたいか」で決める

もう一つの考え方は、
「OS が何か」ではなく「画面幅がどのくらいか」でモバイル扱いを決める方法です。

function detectMobileByWidth(breakpoint = 768) {
  if (typeof window === "undefined") {
    return { isMobileLayout: false };
  }

  const width = window.innerWidth;
  const isMobileLayout = width <= breakpoint;

  return { isMobileLayout };
}

function detectMobileByWidth(breakpoint = 768) {
  if (typeof window === "undefined") {
    return { isMobileLayout: false };
  }

  const width = window.innerWidth;
  const isMobileLayout = width <= breakpoint;

  return { isMobileLayout };
}

使い方のイメージはこうです。

const layout = detectMobileByWidth();

if (layout.isMobileLayout) {
  console.log("モバイルレイアウトを適用");
} else {
  console.log("PC レイアウトを適用");
}

const layout = detectMobileByWidth();

if (layout.isMobileLayout) {
  console.log("モバイルレイアウトを適用");
} else {
  console.log("PC レイアウトを適用");
}

ここでの深掘りポイントは、
「これは“デバイス判定”ではなく“レイアウト判定”である」ということです。

例えば、
小さいウィンドウにした PC ブラウザでも isMobileLayout は true になります。
それでいいのかどうかは、あなたのアプリの設計次第です。

UI の切り替えだけなら「画面幅ベース」で十分なことが多く、
OS やブラウザの違いを気にする必要はありません。

userAgent 判定と画面幅判定をどう使い分けるか

ここが一番大事な設計ポイントです。

OS やブラウザ固有のバグ回避や挙動差の吸収がしたいときは、
userAgent ベースの判定が必要になります。
例えば、「iOS Safari だけスクロール挙動が違うので特別な処理を入れたい」といったケースです。

一方で、
「単に UI をモバイル向けにしたいだけ」の場合は、
画面幅ベースの判定で十分なことが多いです。

実務的には、次のような方針にしておくとスッキリします。

OS・ブラウザ固有の問題 → userAgent ベースのモバイル判定。
レイアウトや表示切り替え → 画面幅ベースのモバイル判定。

そして、どちらもアプリ本体にベタ書きせず、
必ずユーティリティ関数を経由するようにしておく。
これだけで、後から仕様を変えたくなったときの負債がかなり減ります。

実務での具体的な利用イメージ

モバイルだけメニューの出し方を変える

例えば、PC ではヘッダーにメニューを横並びで表示し、
モバイルではハンバーガーメニューにしたいケースを考えます。

const { isMobileLayout } = detectMobileByWidth();

function renderHeader() {
  if (isMobileLayout) {
    renderMobileMenu();
  } else {
    renderDesktopMenu();
  }
}

const { isMobileLayout } = detectMobileByWidth();

function renderHeader() {
  if (isMobileLayout) {
    renderMobileMenu();
  } else {
    renderDesktopMenu();
  }
}

ここでは「画面幅ベース」で十分なので、
OS やブラウザの違いは気にしていません。

iOS だけスクロールのバグ回避を入れる

一方で、「iOS Safari だけスクロールがカクつくので、特別な CSS を当てたい」
といったケースでは、OS ベースの判定が必要です。

const { isIOS } = detectMobileByUserAgent();

function setupScroll() {
  if (isIOS) {
    document.body.classList.add("ios-scroll-fix");
  }
}

const { isIOS } = detectMobileByUserAgent();

function setupScroll() {
  if (isIOS) {
    document.body.classList.add("ios-scroll-fix");
  }
}

このように、
「何をしたいのか」によって、
モバイル判定の軸（OS か、画面幅か）を選ぶのがポイントです。

小さな練習で感覚をつかむ

ブラウザの開発者ツールを開いて、コンソールで次のように打ってみてください。

navigator.userAgent

navigator.userAgent

今使っているデバイスが PC なら、Windows や Mac の文字が、
スマホなら Android や iPhone の文字が入っているはずです。

その文字列を見ながら、
「自分ならどう正規表現を書くか」
「どこまで細かく判定する必要があるか」
を考えてみると、モバイル判定ユーティリティの設計がぐっとリアルになります。

そのうえで、自分のプロジェクト用に

detectMobileByUserAgent
detectMobileByWidth

のどちらか、あるいは両方を用意して、
「モバイルかどうかを知りたくなったら必ずそこを通る」
というルールにしてみてください。

それができた瞬間、あなたのコードは
「場当たり的なモバイル対応」から
「設計されたモバイル対応」に一段レベルアップします。