userAgent は「ブラウザが名乗る自己紹介テキスト」
navigator.userAgent（ふつうは userAgent と呼ぶ）は、
「このブラウザはこういう環境ですよ」とサーバーなどに伝えるための自己紹介文字列 です。
JavaScript からはこう見られます。
console.log(navigator.userAgent);
Chrome ならそれっぽい長い文字列、
Safari なら別の文字列、
スマホならまた違う文字列が出てきます。
昔はこの文字列を解析して、
「これは iPhone だな」「これは Android だな」「これは IE だな」
と判定するのが定番でした。
ただし、今は “userAgent に頼りすぎるのは危険” というのが大事なポイントです。
ここをしっかり押さえたうえで、どう付き合うかを見ていきます。
userAgent の中身をざっくり眺めてみる
実際の文字列のイメージ
例えば、デスクトップの Chrome だと、だいたいこんな感じの文字列が出ます（例です）。
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36
(KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36
スマホの Safari だと、また別の形になります。
Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X)
AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0
Mobile/15E148 Safari/604.1
見ての通り、
「人間が読むためのもの」ではなく、
歴史的な事情が積み重なったカオスな文字列です。
それでも、ざっくりとした情報は読み取れます。
Windows か macOS か iPhone か
Chrome か Safari か Firefox か
バージョンはいくつか
などが、文字列の中に埋め込まれています。
簡単な判定の例（あくまで“例”）
例えば、「iPhone かどうか」を雑に判定するならこう書けます。
const ua = navigator.userAgent;
const isIPhone = ua.includes("iPhone");
const isAndroid = ua.includes("Android");
console.log(isIPhone, isAndroid);
こういう書き方は「できる」けれど、
「やっていい場面」と「避けるべき場面」がある、というのが重要です。
この話を次で深掘りします。
なぜ「userAgent でブラウザ判定」は今は推奨されないのか
文字列の仕様が安定していない
userAgent の文字列は、
ブラウザのアップデートで平気で変わります。
新しいブラウザが出る
既存ブラウザが自分の名乗り方を変える
互換性のためにわざと他のブラウザっぽく名乗る
などが普通に起きます。
つまり、
「この文字列にこう書いてあるから、このブラウザだ」と決め打ちすると、将来壊れやすい
ということです。
ユーザーや拡張機能が偽装できる
ブラウザの設定や拡張機能で、
userAgent を偽装することもできます。
開発者ツールで「スマホモード」にすると、
スマホっぽい userAgent を名乗ったりもします。
つまり、
userAgent は「真実」ではなく「ブラウザがそう名乗っているだけの文字列」 です。
それを信じ切ってロジックを組むのは危険です。
ブラウザごとの差分をコードに埋め込むと地獄を見る
例えば、こういうコードを想像してみてください。
if (ua.includes("Chrome")) {
// Chrome 用
} else if (ua.includes("Safari")) {
// Safari 用
} else if (ua.includes("Firefox")) {
// Firefox 用
} else if (ua.includes("Edge")) {
// Edge 用
}
最初はよくても、
ブラウザが増えるたびに条件が増え、
バージョンごとの差分まで入れ始めると、
メンテ不能な if 地獄 になります。
だから今は、
「ブラウザの種類」で分岐するのではなく
「その機能が使えるかどうか」で分岐する
という考え方（フィーチャーディテクション）が主流です。
現代的な考え方：「ブラウザ名」ではなく「機能の有無」で判定する
悪い例：userAgent で判定して分岐
const ua = navigator.userAgent;
if (ua.includes("iPhone")) {
// iPhone だけこの処理
} else {
// それ以外
}
こう書きたくなる気持ちは分かりますが、
これは「環境に依存しすぎたコード」です。
良い例：機能があるかどうかで分岐
例えば、「クリップボード API が使えるかどうか」を知りたいなら、
ブラウザ名ではなく「その機能が存在するか」で判定します。
if (navigator.clipboard && navigator.clipboard.writeText) {
// クリップボードに書き込める環境
navigator.clipboard.writeText("コピーしたい文字列");
} else {
// クリップボード API がない環境向けのフォールバック
console.log("このブラウザではクリップボード API が使えません");
}
このように、
「Chrome かどうか」ではなく
「clipboard.writeText があるかどうか」
で分岐するほうが、
将来のブラウザにも対応しやすく、壊れにくい です。
それでも userAgent を見る場面があるとしたら
どうしても、
特定の古いブラウザだけを避けたい
既知のバグを持つ特定バージョンをピンポイントで回避したい
といった事情があるときに、
userAgent を使うことがあります。
その場合も、
「これは例外的なハックだ」とコメントを残す
できるだけ範囲を狭くする
といった配慮が必要です。
userAgent を「観察用」として使うのはアリ
自分の環境を知るために眺めてみる
初心者としては、
まずは「自分のブラウザがどう名乗っているか」を見るだけでも価値があります。
ブラウザのコンソールでこう打ってみてください。
console.log(navigator.userAgent);
PC とスマホで比べてみる
Chrome と Safari で比べてみる
それだけで、
「ブラウザはこんな自己紹介をしているのか」
「OS やブラウザ名が文字列に埋まっているんだな」
という感覚が掴めます。
ログやデバッグ情報として使う
例えば、エラーが起きたときに、
userAgent を一緒にログに残しておくと、
「このエラーは特定のブラウザでだけ起きている」
「この OS でだけ再現する」
といった分析に役立つことがあります。
function logError(err) {
console.error("エラー:", err, "UA:", navigator.userAgent);
}
これは「判定」ではなく「記録」としての使い方なので、
比較的安全です。
小さな例：userAgent を表示するページを作ってみる
HTML
<div id="ua"></div>
<div id="hint"></div>
JavaScript
const uaDiv = document.querySelector("#ua");
const hintDiv = document.querySelector("#hint");
const ua = navigator.userAgent;
uaDiv.textContent = ua;
if (ua.includes("iPhone")) {
hintDiv.textContent = "iPhone っぽいですね（あくまで推測）";
} else if (ua.includes("Android")) {
hintDiv.textContent = "Android っぽいですね（あくまで推測）";
} else {
hintDiv.textContent = "PC か、別のデバイスかもしれません";
}
これはあえて userAgent 判定を使った例ですが、
「こういうことが“できてしまう”」という体験をしておくのは悪くありません。
そのうえで、
「でも本番コードでは、できるだけ機能判定に寄せていこう」
という意識を持てると、かなり大人なエンジニアです。
初心者として userAgent で本当に掴んでほしいこと
userAgent は「ブラウザが名乗る自己紹介文字列」
navigator.userAgent でその文字列を取得できる
昔はブラウザ判定に多用されていたが、今は壊れやすくて推奨されない
現代的には「ブラウザ名」ではなく「機能の有無」で分岐するのが基本
userAgent は「観察・ログ用」としては便利だが、「ロジックの根拠」にしすぎない
一度、自分の PC・スマホ・別ブラウザでnavigator.userAgent を見比べてみてください。
「同じサイトでも、ブラウザごとにこんなに名乗りが違うんだ」
という実感が持てると、
userAgent を“頼りすぎる怖さ”と“うまい距離感”が、自然と見えてきます。