【JavaScript入門】Webブラウザの情報の取得

　Web アプリを作るとき「どのブラウザで閲覧されているか」を知りたくなる場面があります。たとえば古い IE だけフォールバックを入れる、モバイルか PC で UI を切り替える。そんな時に参照するのが navigator オブジェクト です。ただし navigator.userAgent 文字列は歴史的な互換問題で偽装が多く、鵜呑みにはできません。ここでは 最低限のプロパティ と 実践的な解析ライブラリ を紹介し、サンプルで「UA を表示しライブラリで分解」する流れを示します。

１．navigator 主要プロパティ

プロパティ例用途・注意点
userAgentMozilla/5.0 … Chrome/120.0 …ブラウザ名・バージョン・OS などが混在。偽装可
platformWin32 / Linux x86_64OS 判定のヒント
languageja / en-USUI 初期言語の推定
vendorGoogle Inc. などベンダー名（未実装ブラウザも）

Tip： 将来的には User‑Agent Client Hints（navigator.userAgentData）へ移行が進む見込みです。

２．UA 解析ライブラリ

ライブラリ特徴CDN 例
UAParser.jsブラウザ / OS / デバイスを JSON で返す。メンテ活発https://cdn.jsdelivr.net/npm/ua-parser-js@1/dist/ua-parser.min.js
platform.js関数ベースで詳細判定。軽量https://cdn.jsdelivr.net/npm/platform@1/platform.min.js

自前で正規表現を書くより、これらを使う方が安全かつ保守コストが低いです。

３．実践サンプル ― UA 表示 & パース結果を一覧

ファイル名： ua_info_viewer.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Webブラウザ情報の取得デモ</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
body{font-family:sans-serif;margin:2rem}
table{border-collapse:collapse;margin-top:1rem}
th,td{border:1px solid #ccc;padding:.4rem .8rem;text-align:left}
code{font-size:.9rem}
</style>
</head>
<body>
<h2>📋 ブラウザ情報</h2>

<p><strong>navigator.userAgent</strong></p>
<code id="ua"></code>

<h3>UAParser.js 解析結果</h3>
<table id="info">
  <thead><tr><th>項目</th><th>値</th></tr></thead>
  <tbody></tbody>
</table>

<script src="https://cdn.jsdelivr.net/npm/ua-parser-js@1/dist/ua-parser.min.js"></script>
<script>
(() => {
  // 生の UA を表示
  document.getElementById('ua').textContent = navigator.userAgent;

  // ライブラリで解析
  const parser = new UAParser();
  const result = parser.getResult(); // {browser:{}, os:{}, device:{}, …}

  // 表に表示したいキーとラベル
  const map = {
    'browser.name'   : 'ブラウザ',
    'browser.version': 'バージョン',
    'os.name'        : 'OS',
    'os.version'     : 'OSバージョン',
    'device.type'    : 'デバイスタイプ',
    'device.vendor'  : 'ベンダー',
    'device.model'   : 'モデル'
  };

  const tbody = document.querySelector('#info tbody');

  // ドット区切りパスを走査して値を取得
  function deepGet(obj, path){
    return path.split('.').reduce((o,k)=>o?.[k], obj) ?? '(不明)';
  }

  for (const [path,label] of Object.entries(map)){
    const tr = document.createElement('tr');
    tr.innerHTML = `<th>${label}</th><td>${deepGet(result, path)}</td>`;
    tbody.appendChild(tr);
  }
})();
</script>
</body>
</html>

ブラウザ表示例

  • 画面上部に UA 文字列がそのまま表示
  • 下の表に「ブラウザ: Chrome」「バージョン: 120.0.0」「OS: Windows」などが自動抽出

プログラム解説

行処理内容
UAParser()UAParser.js をインスタンス化し getResult() で解析
deepGet()browser.name 形式のパスでネスト値を取得
表生成事前に用意した map をループして <tr> を動的に挿入

４．実運用のポイント

  1. 機能検出を優先： UA 判定は最終手段。たとえば WebP 対応判定は HTMLCanvasElement.toDataURL('image/webp') でテスト可能。
  2. キャッシュして再利用： 同じ解析を何度も行わず、結果をグローバルに保持する。
  3. プライバシー配慮： 不要な情報送信は避け、解析結果はローカルで完結させる。

まとめ

  • navigator.userAgent は依然として利用されるが 偽装リスク を理解すること。
  • ブラウザ判定が必要なら UAParser.js / platform.js のようなライブラリを使う。
  • 機能検出や Client Hints との併用で、将来の仕様変更にも強い実装を目指そう。