User-Agent vs. Feature Detection: 何を、いつ、どのように使うべきか？

概要

ブラウザやデバイス環境に応じて機能を変えて提供する際、User-Agent Sniffing と Feature Detection が代表的なアプローチである。
近年は、保守性・セキュリティの観点から Feature Detection を優先して適用することが推奨されている。

---

1. User-Agent Sniffing

User-Agent 文字列を解析してデバイスやブラウザを識別する方式である。
デバイスモデルの識別には有用だが、アップデートの影響を受けやすく、プライバシー保護ポリシーの強化により利用は徐々に制限されている。

navigator.userAgentData.getHighEntropyValues(['model', 'platform'])  

---

2. Feature Detection

機能そのものがサポートされているかどうかを検査して条件分岐する方式である。
ブラウザやデバイスの種類に関係なく、安全かつ柔軟に適用できる。

if ('fetch' in window) {  
  // fetch API を使用  
}  

---

3. ライブラリ: Modernizr & Sniffr

Modernizr は Feature Detection を手軽に支援するライブラリで、必要な機能だけを含めてビルドできる。
Sniffr は User-Agent ベースの情報を簡単にパースしてくれるライブラリである。

---

4. プラットフォーム別の検出可能性

• Android はモデル名（SM-xxxx など）まで抽出可能
• iOS は iPhone/iPad の区別は可能だが、モデル識別は限定的
• Mac/Windows は OS バージョンまでは確認可能だが、デバイス識別は難しい

---

5. その他の検出可能な情報

• CPU コア数: navigator.hardwareConcurrency
• メモリ容量: navigator.deviceMemory
• ネットワーク速度: navigator.connection.effectiveType

---

6. 混合アプローチの例

User-Agent と Feature Detection を組み合わせて、より精密な環境検出を行うこともできる。
例: ノッチ付きモデルの検出、Apple Silicon かどうか、機能サポートの有無をすべて判断

environment.supportsServiceWorker = 'serviceWorker' in navigator;  

---

7. 将来への対応: Privacy Sandbox と User-Agent Reduction

Google は User-Agent 文字列の縮小を進めており、これに対応して User-Agent Client Hints API の利用が推奨されている。
この API は、より構造化され、プライバシーに配慮した形でユーザー情報を提供する。

navigator.userAgentData.getHighEntropyValues(['platform', 'model']);  

---

結論

• 基本的に Feature Detection を優先して適用する
• User-Agent ベースの検出は最小限にとどめ、必要な場合は最新技術（API）を活用する
• 将来の標準に対応するため、Client Hints などの新しい方式も準備しておくとよい。