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

JavaScript Web開発 フロントエンド
結論：30秒でわかる現代の UA 判定方針
  • 基本方針: UA 直接判定は『最後の手段』。デザインは CSS Media Queries、機能判定は Feature Detection で行います。
  • 最新規格: Chrome 等では navigator.userAgentData (Client Hints) を使用。
  • 注意点: UA 文字列の凍結・削減（UA Reduction）が進んでいるため、OS/ブラウザの詳細バージョン依存実装は避ける。

1. User Agent 文字列と判定デモ

ブラウザから送信される実際の User Agent 文字列を確認・解析します。

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

2. なぜ UA 判定に頼るべきではないのか？

  1. 文字列の複雑化と互換性偽装
    • 歴史的経緯により、すべての主要ブラウザが Mozilla/5.0 や AppleWebKit/537.36 を含んでおり、判定ミスが頻発します。
  2. 情報の削減 (User-Agent Reduction)
    • プライバシー保護のため、Chrome をはじめ最新ブラウザでは詳細な OS バージョンやデバイスモデルを非表示・簡略化しています。
  3. 容易なユーザー偽装
    • 開発者ツールや拡張機能で容易に変更できるため、セキュリティ上の判定には利用できません。

3. 最新の手法：User-Agent Client Hints

navigator.userAgentData (Client Hints) を使用すると、必要最小限の情報だけをセキュアに取得できます。

// Sec-CH-UA サポート環境の判定
if (navigator.userAgentData) {
  console.log(navigator.userAgentData.brands); // ブラウザブランドとメジャーバージョン
  
  // 高精度情報（OSモデル等）が必要な場合のみ非同期リクエスト
  navigator.userAgentData.getHighEntropyValues(['model', 'platformVersion'])
    .then(ua => console.log(ua));
}

4. 関連ツール・記事