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判定との併用が必要です。