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

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

モバイル対応をしていると、
「iOS と Android で挙動が微妙に違う」という場面に必ずぶつかります。

同じ“スマホ”でも、こういう差があります。

Android Chrome だけスクロールの慣性が違う。
Android だけファイル選択やカメラ起動の挙動が違う。
Android の WebView だけ古い仕様で動いている。

つまり、「モバイルかどうか」だけでは足りず、
“Android かどうか”をピンポイントで知りたい場面が出てきます。

そのたびに毎回 navigator.userAgent を直接いじるのではなく、
「Android 判定ユーティリティ」を一つ決めておくと、
コードがかなりスッキリして、後からのメンテもしやすくなります。

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

一番シンプルで実務的な実装

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

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

  const ua = navigator.userAgent;
  return /Android/i.test(ua);
}

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

  const ua = navigator.userAgent;
  return /Android/i.test(ua);
}

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

navigator がなければ（Node.js など）即 false を返す。
navigator.userAgent に Android という文字が含まれていれば Android とみなす。

使い方はこうなります。

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

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

ここでの重要ポイントは、
「Android 判定のロジックをアプリ本体にベタ書きしない」ことです。
必ず isAndroid() を経由するようにしておけば、
将来判定ロジックを変えたくなったときも、この関数だけ直せば済みます。

Android 判定をユーティリティとしてまとめる

iOS 判定・モバイル判定と一緒に「環境ユーティリティ」にする

実務では、Android だけでなく iOS や「モバイルかどうか」も知りたくなるので、
環境系ユーティリティとしてまとめておくと使いやすくなります。

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

  const ua = navigator.userAgent;

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

  return {
    isAndroid,
    isIOS,
    isMobile,
  };
}

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

  const ua = navigator.userAgent;

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

  return {
    isAndroid,
    isIOS,
    isMobile,
  };
}

使い方はこうです。

const env = detectEnv();

if (env.isAndroid) {
  console.log("Android 向けの調整をする");
}

if (env.isMobile) {
  console.log("モバイル向け UI を出す");
}

const env = detectEnv();

if (env.isAndroid) {
  console.log("Android 向けの調整をする");
}

if (env.isMobile) {
  console.log("モバイル向け UI を出す");
}

こうしておくと、

「Android だけの挙動差に対応したい」
「モバイル全体に対して UI を変えたい」

といったニーズを、同じユーティリティから扱えるようになります。

Android 判定をどんな場面で使うのか

Android WebView だけ挙動が怪しいとき

業務アプリでは、「ネイティブアプリ内の WebView」で画面を表示することも多いです。
Android の WebView は OS バージョンによって仕様が古かったりして、
「ここだけ特別扱いしたい」という場面が出てきます。

if (isAndroid()) {
  enableAndroidWebViewWorkaround();
}

if (isAndroid()) {
  enableAndroidWebViewWorkaround();
}

例えば、「position: fixed がカクつく」「スクロールが変」など、
Android だけの問題に対してワークアラウンドを入れるときに使えます。

Android だけファイル選択の UI を変える

Android のブラウザや WebView では、
ファイル選択やカメラ起動の挙動が iOS と違うことがよくあります。

function setupFileInput() {
  if (isAndroid()) {
    setupAndroidFileInput(); // Android 向けに少しシンプルな UI
  } else {
    setupDefaultFileInput(); // それ以外は通常の UI
  }
}

function setupFileInput() {
  if (isAndroid()) {
    setupAndroidFileInput(); // Android 向けに少しシンプルな UI
  } else {
    setupDefaultFileInput(); // それ以外は通常の UI
  }
}

ここでは、「Android かどうか」だけ分かればよく、
Chrome か WebView かまでは気にしていません。

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

ここを整理しておくと、設計がかなり楽になります。

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

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

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

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

もし Android 端末を持っているなら、
ブラウザで自分の開発中ページを開いて、コンソールでこう打ってみてください。

navigator.userAgent

navigator.userAgent

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

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

export function isAndroid() { ... }

export function isAndroid() { ... }

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

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