JavaScript Tips | 基本・共通ユーティリティ：環境 – iOS 判定

なぜ「iOS 判定」ユーティリティが必要になるのか

モバイル判定より一歩踏み込んだのが「iOS 判定」です。
業務システムを作っていると、こういう“iOS 特有の事情”にぶつかります。

Safari（iOS）だけスクロール挙動が違う。
iOS だけファイルアップロードの挙動が制限される。
iOS の PWA（ホーム画面追加）だけ挙動が独特。

つまり、「モバイルかどうか」ではなく
“iOS かどうか”をピンポイントで知りたい場面が、現実にはかなり多いんです。

そのたびに毎回 navigator.userAgent を直接いじるのではなく、
「iOS 判定ユーティリティ」を一個決めておくと、コードが一気に整理されます。

基本の iOS 判定：userAgent を素直に見る

一番よく使うシンプルな実装

まずは、いちばん素直な iOS 判定から。

function isIOS() {
  if (typeof navigator === "undefined") {
    return false;
  }

  const ua = navigator.userAgent;

  return /iPhone|iPad|iPod/i.test(ua);
}

function isIOS() {
  if (typeof navigator === "undefined") {
    return false;
  }

  const ua = navigator.userAgent;

  return /iPhone|iPad|iPod/i.test(ua);
}

やっていることはシンプルです。

navigator がなければ（Node.js など）即 false。
navigator.userAgent に iPhone / iPad / iPod のどれかが含まれていれば iOS とみなす。

使い方はこうなります。

if (isIOS()) {
  console.log("iOS 向けの処理を実行");
} else {
  console.log("それ以外の環境向けの処理を実行");
}

if (isIOS()) {
  console.log("iOS 向けの処理を実行");
} else {
  console.log("それ以外の環境向けの処理を実行");
}

ここでの重要ポイントは、
「iOS 判定のロジックをアプリ本体にベタ書きしない」ことです。
必ず isIOS() を経由するようにしておくと、後から仕様を変えたくなったときに楽になります。

iPadOS での「PC っぽい userAgent」問題への軽いケア

最近の iPadOS は、デフォルトで「PC サイト表示」をすることが多く、
userAgent が Mac に近い形になることがあります。

その結果、単純な iPad 判定だけでは取りこぼすケースもあります。
そこまで厳密にやるかどうかは要件次第ですが、
少しだけ賢くするなら、こんな書き方もあります。

function isIOSLike() {
  if (typeof navigator === "undefined" || typeof window === "undefined") {
    return false;
  }

  const ua = navigator.userAgent;

  const isIOSDevice = /iPhone|iPad|iPod/i.test(ua);

  const isTouchMacLike =
    /Macintosh/.test(ua) && "ontouchend" in window;

  return isIOSDevice || isTouchMacLike;
}

function isIOSLike() {
  if (typeof navigator === "undefined" || typeof window === "undefined") {
    return false;
  }

  const ua = navigator.userAgent;

  const isIOSDevice = /iPhone|iPad|iPod/i.test(ua);

  const isTouchMacLike =
    /Macintosh/.test(ua) && "ontouchend" in window;

  return isIOSDevice || isTouchMacLike;
}

ここでのポイントは二つです。

iPhone / iPad / iPod を素直に見るパターン。
Macintosh だけどタッチがある（＝iPadOS が PC っぽく名乗っている）パターン。

これで、「iOS / iPadOS っぽい環境」を少し広めに拾えるようになります。

ただし、ここまでやるかどうかはプロジェクト次第です。
まずはシンプルな isIOS から始めて、
「iPad で困ったときに isIOSLike に差し替える」くらいの感覚で十分です。

iOS 判定ユーティリティをどう使うか

iOS だけスクロールのワークアラウンドを入れる

例えば、「iOS Safari だけスクロールがガクガクするので、特別な CSS を当てたい」ケース。

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

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

CSS 側では、こんな感じで iOS 向けの調整を書けます。

body.ios-scroll-fix {
  -webkit-overflow-scrolling: touch;
}

こうしておけば、
「iOS のスクロールバグが直ったから、この対応を消したい」となったときも、
isIOS() を使っている箇所だけを見ればよくなります。

iOS だけファイル入力の UI を変える

例えば、「iOS Safari ではファイル選択ダイアログの挙動が独特なので、
ドラッグ＆ドロップではなくボタンだけにしたい」といったケース。

function setupFileInput() {
  if (isIOS()) {
    setupSimpleFileInput();   // iOS 向けのシンプルな UI
  } else {
    setupDragAndDropInput();  // それ以外はリッチな UI
  }
}

function setupFileInput() {
  if (isIOS()) {
    setupSimpleFileInput();   // iOS 向けのシンプルな UI
  } else {
    setupDragAndDropInput();  // それ以外はリッチな UI
  }
}

ここでも、「iOS かどうか」を知りたいだけで、
ブラウザ名（Safari か Chrome か）までは気にしていません。

「iOS 判定」と「モバイル判定」の使い分け

ここを整理しておくと、設計がかなりスッキリします。

モバイル判定（isMobile など）
「UI をモバイル向けにするかどうか」を決めたいとき。
画面幅や OS をざっくり見て、「手に持つデバイスっぽいか」を判断する。

iOS 判定（isIOS）
「iOS 特有の挙動・制限・バグ」に対処したいとき。
スクロール、ファイル、PWA、キーボード周りなど、iOS だけの問題に対応する。

つまり、
「見た目・レイアウトの話」ならモバイル判定、
「挙動・制限の話」なら iOS 判定
という使い分けがしっくりきます。

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

もし iPhone や iPad を持っているなら、
Safari で自分の開発中ページを開いて、コンソールでこう打ってみてください。

navigator.userAgent

navigator.userAgent

そこに iPhone や iPad がどう入っているかを実際に目で見ると、
「さっきの正規表現が何を見ているのか」が一気に腑に落ちます。

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

export function isIOS() { ... }

export function isIOS() { ... }

を一つ置いて、
「iOS かどうかを知りたくなったら、必ずこれを呼ぶ」
というルールにしてみてください。

それができた瞬間、あなたのコードは
「場当たり的な iOS 対応」から
「設計された iOS 対応」に変わります。