User Agentからデバイスやブラウザを判定する方法｜現代のベストプラクティス

JavaScript Web開発 フロントエンド
結論

「UA判定は補助的に使う」のが現代の正解。基本はレスポンシブデザイン（Media Query）や機能検知（Modernizr等）を行い、どうしても必要な場合のみUAを確認しましょう。

User Agent文字列の例

ブラウザはリクエスト時に以下のような文字列を送信します。

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36

ここから「Windows」「Chrome」といった情報を読み取ることができます。

📱 この場でUser Agentを確認する

なぜUA判定が難しくなっているのか？

  1. 文字列の複雑化 — 互換性のためにすべてのブラウザが Mozilla/5.0 と名乗るなど、判別が非常に困難です。
  2. 情報の削減 (UA Reduction) — プライバシー保護のため、Chromeを筆頭に詳細なバージョンやOS情報を隠す動きが進んでいます。
  3. 偽装の容易さ — 開発者ツールを使えば誰でもUAを書き換えられるため、厳密な認証などには使えません。

最新の手法：User-Agent Client Hints

UA文字列に代わる新しい仕組みとして navigator.userAgentData (Client Hints) が登場しています。

if (navigator.userAgentData) {
  navigator.userAgentData.getHighEntropyValues(['model'])
    .then(ua => console.log(ua.model));
}

これにより、必要な情報だけをセキュアに取得できるようになります。ただし、Safariなど一部のブラウザではまだサポートされていないため、ポリフィルや従来のUA判定との併用が必要です。

関連記事

あわせて読むと理解が深まる関連記事をまとめました。

トピック記事
User Agent 解析User Agent 解析｜ブラウザ・OS 判定
mTLS（相互TLS）完全ガイドmTLS（相互TLS）完全ガイド｜マイクロサービス・ゼロトラスト・サービスメッシュ
OAuth2 PKCE SPA実装ガイドOAuth2 PKCE SPA実装ガイド｜Authorization Code + S256 + BFFパターン
robots.txtの書き方と役割robots.txtの書き方と役割｜クローラーを正しく制御する方法
Robots.txt 生成Robots.txt 生成｜クローラ許可・拒否の書き方
React SSR Hydration Mismatch 原因と修正React SSR Hydration Mismatch 原因と修正｜Next.js・Astro対応ガイド
TLS 1.3 0-RTT（Early Data）のリスクTLS 1.3 0-RTT（Early Data）のリスク｜リプレイ攻撃とnginx・Node.js実装ガイド
Webスクレイピングの実務ガイドWebスクレイピングの実務ガイド｜法規制・robots.txt・ToS・個人情報の境界線
1フレームは何秒・何ms？ 60fpsと120fpsの計算方法1フレームは何秒・何ms？ 60fpsと120fpsの計算方法
AIクローラー対応 robots.txt・llms.txt 設定ガイド 2026AIクローラー対応 robots.txt・llms.txt 設定ガイド 2026｜GPTBot・ClaudeBot・Google-Extended・GEO戦略
APIキャッシュ設計ガイドAPIキャッシュ設計ガイド｜ETag・Cache-Control・304・CDNキャッシュキーの実務
Web APIのエラーハンドリング設計Web APIのエラーハンドリング設計｜RFC 9457・error_code・400/422/409の使い分け