ユーザーエージェント解析ライブラリ完全比較：bowser vs detect-browser vs platform vs ua-parser-js vs universal-user-agent vs user-agent

Web 開発において、ユーザーのブラウザ環境を正確に把握することは重要です。機能の互換性判定、アナリティクス収集、条件付きレンダリングなど、様々な場面で User-Agent 解析が必要になります。今回は 6 つの主要な npm パッケージを比較し、実際の開発現場でどのライブラリを選ぶべきか、技術的な観点から詳しく解説します。

🔍 基本機能と解析精度

各ライブラリがどの程度の情報を抽出できるかが最初の選定基準です。

ua-parser-js は最も包括的な解析機能を提供します。ブラウザ、OS、デバイス、エンジン、CPU まで詳細に解析可能です。

import { UAParser } from 'ua-parser-js';

const parser = new UAParser();
const result = parser.getResult();

console.log(result.browser);    // { name: 'Chrome', version: '120.0.0.0' }
console.log(result.os);         // { name: 'Windows', version: '11' }
console.log(result.device);     // { type: 'desktop', vendor: undefined, model: undefined }
console.log(result.engine);     // { name: 'Blink', version: '120.0.0.0' }

bowser も詳細な情報を提供しますが、API がよりモダンで使いやすい設計になっています。

import bowser from 'bowser';

const browser = bowser.getParser(window.navigator.userAgent);

console.log(browser.getBrowserName());     // 'Chrome'
console.log(browser.getBrowserVersion());  // '120.0.0.0'
console.log(browser.getOS());              // 'Windows'
console.log(browser.getPlatform());        // 'desktop'

detect-browser はブラウザ検出に特化しており、OS やデバイスの情報は提供しません。

import { detect } from 'detect-browser';

const browser = detect();

console.log(browser.name);    // 'chrome'
console.log(browser.version); // '120.0.6099.109'
console.log(browser.os);      // 'Windows 10' (限定的)

platform はブラウザと OS の基本情報を提供しますが、デバイス情報は限定的です。

import platform from 'platform';

console.log(platform.name);    // 'Chrome'
console.log(platform.version); // '120.0.6099.109'
console.log(platform.os);      // 'Windows 10'
console.log(platform.layout);  // 'WebKit'

universal-user-agent は GitHub 環境に特化しており、一般 Web アプリケーション向けではありません。

import { getUserAgent } from 'universal-user-agent';

// Node.js 環境
const ua = getUserAgent();

// ブラウザ環境
const ua = getUserAgent(navigator);

user-agent は User-Agent 文字列の取得に特化しており、解析機能はほとんどありません。

import userAgent from 'user-agent';

// シンプルな文字列取得
const ua = userAgent();

🧪 ブラウザ判定メソッドの比較

実際の開発で最も使うのは、特定のブラウザかどうかを判定する機能です。

bowser はチェーン可能な判定メソッドを提供し、非常に読みやすいコードが書けます。

import bowser from 'bowser';

const browser = bowser.getParser(window.navigator.userAgent);

// バージョン範囲の判定
const isChrome = browser.satisfies({
  chrome: '>115.0.0'
});

// 複合条件
const isModernBrowser = browser.satisfies({
  chrome: '>100',
  firefox: '>90',
  safari: '>15',
  edge: '>100'
});

// シンプルな判定
if (browser.is('mobile')) {
  // モバイル向け処理
}

detect-browser はシンプルなオブジェクト返却のみで、判定ロジックは自分で実装する必要があります。

import { detect } from 'detect-browser';

const browser = detect();

// 自分で判定ロジックを書く
const isChrome = browser && browser.name === 'chrome';
const isModernChrome = browser && 
  browser.name === 'chrome' && 
  parseFloat(browser.version) >= 115;

ua-parser-js は結果オブジェクトから自分で判定条件を書きます。

import { UAParser } from 'ua-parser-js';

const parser = new UAParser();
const result = parser.getResult();

const isChrome = result.browser.name === 'Chrome';
const isVersion115Plus = parseFloat(result.browser.version) >= 115;

platform も同様に、自分で判定条件を実装します。

import platform from 'platform';

const isChrome = platform.name === 'Chrome';
const isWindows = platform.os.family === 'Windows';

🖥️ デバイスタイプ判定

モバイル、タブレット、デスクトップの判定はレスポンシブ設計で重要です。

bowser はデバイス判定メソッドを標準で提供しています。

import bowser from 'bowser';

const browser = bowser.getParser(window.navigator.userAgent);

if (browser.is('mobile')) {
  // スマホ向け最適化
}

if (browser.is('tablet')) {
  // タブレット向けレイアウト
}

if (browser.is('desktop')) {
  // デスクトップ向け機能
}

// 組み合わせも可能
if (browser.is('mobile') && browser.is('android')) {
  // Android スマホ向け処理
}

ua-parser-js は device.type で判定します。

import { UAParser } from 'ua-parser-js';

const parser = new UAParser();
const result = parser.getResult();

if (result.device.type === 'mobile') {
  // スマホ向け
}

if (result.device.type === 'tablet') {
  // タブレット向け
}

if (result.device.type === 'desktop') {
  // デスクトップ向け
}

detect-browser はデバイス判定機能を提供していません。自分で実装するか、他のライブラリとの併用が必要です。

import { detect } from 'detect-browser';

const browser = detect();
// デバイス判定は別途実装が必要
const isMobile = /mobile/i.test(window.navigator.userAgent);

platform は限定的なデバイス情報を提供します。

import platform from 'platform';

// device プロパティは限定的
if (platform.product && /mobile/i.test(platform.product)) {
  // モバイル判定
}

🧩 TypeScript サポート

現代のフロントエンド開発では TypeScript が標準です。型定義の品質も重要な選定基準になります。

bowser はバージョン 2 以降、TypeScript 定義を公式に提供しており、型推論が良く効きます。

import bowser from 'bowser';

const browser = bowser.getParser(window.navigator.userAgent);

// 型が正しく推論される
const browserName: string = browser.getBrowserName();
const version: string = browser.getBrowserVersion();

// 判定結果も boolean 型
const isMobile: boolean = browser.is('mobile');

ua-parser-js も TypeScript 定義を提供していますが、やや複雑な型構造になります。

import { UAParser } from 'ua-parser-js';

const parser = new UAParser();
const result = parser.getResult();

// 結果の型は IResult
const browserName: string | undefined = result.browser.name;
const osName: string | undefined = result.os.name;

detect-browser は TypeScript 定義を提供していますが、型はシンプルです。

import { detect } from 'detect-browser';

const browser = detect();

// null 返却の可能性を考慮する必要がある
if (browser) {
  const name: string = browser.name;
  const version: string = browser.version;
}

platform の TypeScript サポートはコミュニティ維持の型定義に依存しており、公式サポートではありません。

import platform from 'platform';

// @types/platform を別途インストールする必要あり
const name: string = platform.name;

🌐 環境対応：ブラウザ vs Node.js

サーバーサイドレンダリング（SSR）や Node.js 環境での使用も考慮する必要があります。

ua-parser-js はブラウザと Node.js の両方で完全に動作します。

// ブラウザ環境
import { UAParser } from 'ua-parser-js';
const parser = new UAParser();

// Node.js 環境で User-Agent 文字列を指定
const parser = new UAParser(req.headers['user-agent']);
const result = parser.getResult();

bowser も両環境に対応しています。

// ブラウザ
import bowser from 'bowser';
const browser = bowser.getParser(window.navigator.userAgent);

// Node.js
const browser = bowser.getParser(req.headers['user-agent']);

detect-browser は主にブラウザ向けですが、Node.js でも動作します。

import { detect } from 'detect-browser';

// ブラウザ
const browser = detect();

// Node.js では navigator が必要
const browser = detect(navigator.userAgent);

platform は両環境対応ですが、Node.js では限定的な情報しか取得できません。

import platform from 'platform';

// Node.js では navigator がないため限定的
const name = platform.name;

universal-user-agent は名前の通り、両環境での User-Agent 取得に特化しています。

import { getUserAgent } from 'universal-user-agent';

// 環境を自動検出
const ua = getUserAgent();

// ブラウザで明示的に指定
const ua = getUserAgent(navigator);

⚠️ メンテナンス状況と非推奨パッケージ

パッケージのメンテナンス状況は長期的なプロジェクトにとって重要です。

platform は更新頻度が非常に低く、新規プロジェクトでの採用は慎重に検討すべきです。既存プロジェクトで使用されている場合は、ua-parser-js または bowser への移行を検討してください。

user-agent パッケージも機能が限定的で、更新が停滞しています。新規プロジェクトでの使用は推奨されません。

universal-user-agent は GitHub 関連ツールに特化しており、一般 Web アプリケーションでは他のライブラリを選ぶべきです。

bowser と ua-parser-js は活発にメンテナンスされており、新規プロジェクトでの採用に最も適しています。

detect-browser はシンプルさを重視するプロジェクトで、更新は継続されていますが機能追加は限定的です。

📊 実戦ユースケース別推奨

ケース 1：大規模エンタープライズアプリケーション

推奨：bowser

型安全性、モダンな API、包括的な機能が必要な場合に最適です。

import bowser from 'bowser';

class EnvironmentDetector {
  constructor(userAgent) {
    this.parser = bowser.getParser(userAgent);
  }

  shouldEnableFeature(featureName) {
    const rules = {
      'advancedAnimation': {
        chrome: '>115',
        firefox: '>110',
        safari: '>16'
      },
      'webGL': {
        chrome: '>100',
        firefox: '>90'
      }
    };

    return this.parser.satisfies(rules[featureName]);
  }

  getOptimizedLayout() {
    if (this.parser.is('mobile')) {
      return 'mobile';
    } else if (this.parser.is('tablet')) {
      return 'tablet';
    }
    return 'desktop';
  }
}

ケース 2：アナリティクス収集

推奨：ua-parser-js

詳細な環境情報を収集する必要がある場合に最適です。

import { UAParser } from 'ua-parser-js';

function collectAnalytics() {
  const parser = new UAParser();
  const result = parser.getResult();

  const analyticsData = {
    browser: result.browser.name,
    browserVersion: result.browser.version,
    os: result.os.name,
    osVersion: result.os.version,
    deviceType: result.device.type,
    engine: result.engine.name
  };

  // 送信処理
  sendToAnalytics(analyticsData);
}

ケース 3：シンプルなブラウザ判定のみ

推奨：detect-browser

バンドルサイズを最小限に抑えたい場合に適しています。

import { detect } from 'detect-browser';

function isSupportedBrowser() {
  const browser = detect();
  
  if (!browser) return false;
  
  const supported = [
    { name: 'chrome', minVersion: 100 },
    { name: 'firefox', minVersion: 90 },
    { name: 'safari', minVersion: 15 }
  ];

  return supported.some(s => 
    browser.name === s.name && 
    parseFloat(browser.version) >= s.minVersion
  );
}

ケース 4：サーバーサイドレンダリング（SSR）

推奨：ua-parser-js または bowser

両方とも Node.js 環境で User-Agent 文字列を指定して解析できます。

// Next.js の getServerSideProps 例
import { UAParser } from 'ua-parser-js';

export async function getServerSideProps({ req }) {
  const parser = new UAParser(req.headers['user-agent']);
  const result = parser.getResult();
  
  return {
    props: {
      isMobile: result.device.type === 'mobile',
      browserName: result.browser.name
    }
  };
}

📋 機能比較サマリー

💡 最終推奨

新規プロジェクトでの優先順位：

1. bowser — モダンな API、TypeScript サポート、包括的な機能。大規模プロジェクトに最適。
2. ua-parser-js — 最も詳細な解析情報。アナリティクスやきめ細かい環境判定が必要な場合に最適。
3. detect-browser — シンプルさ重視。バンドルサイズを最小限に抑えたい場合に選択。

避けるべきパッケージ：

• platform — 更新頻度が低く、新規プロジェクトでの採用は非推奨。
• user-agent — 機能が限定的で、他のライブラリで十分カバー可能。
• universal-user-agent — GitHub 関連ツール以外での使用は不適切。

🔮 User-Agent 解析の将来

User-Agent 文字列自体がプライバシー強化のため変更される動きがあります（User-Agent Client Hints）。長期的なプロジェクトでは、Client Hints API との併用も検討すべきです。

// User-Agent Client Hints の例
if (navigator.userAgentData) {
  const hints = await navigator.userAgentData.getHighEntropyValues([
    'platform',
    'platformVersion',
    'architecture',
    'model',
    'uaFullVersion'
  ]);
  console.log(hints);
}

現在のところは、従来の User-Agent 解析ライブラリと Client Hints を組み合わせるのが最も堅牢なアプローチです。bowser と ua-parser-js はこの移行期間においても信頼できる選択肢と言えます。