ua-parser-modern — モダンなUser-Agentパーサー
概要
ua-parser-modern は、User-Agent 文字列からブラウザ、エンジン、OS、CPU、デバイス情報を検出するための JavaScript/TypeScript ライブラリで、ESM と TypeScript による再実装が特徴です。モジュールごとの名前付きパーサー(parseBrowser, parseOS, parseDevice, parseCPU, parseEngine, parseUA)を提供し、必要な機能だけをインポートして使えるためツリーシェイクが効き、フロントエンドやサーバーサイドで効率的に利用できます。型定義により開発時の補完や型安全性が向上しており、npm パッケージ名は ua-parser-es です。
リポジトリの統計情報
- スター数: 40
- フォーク数: 0
- ウォッチャー数: 40
- コミット数: 30
- ファイル数: 15
- メインの言語: TypeScript
主な特徴
- ESM+TypeScript で再実装され、型安全とモダンなモジュール設計を実現
- 名前付きパーサー(parseBrowser 等)で必要な機能だけを取り込めるツリーシェイカブル設計
- ブラウザ/Node 両対応の軽量ライブラリ、npm パッケージ名は ua-parser-es
- README に分かりやすい導入例があり、すぐに使い始められる
技術的なポイント
ua-parser-modern は既存の UA パーサーの機能を保持しつつ、モダンな開発体験と配布の最適化を目指して TypeScript と ESM を採用している点が最大の特徴です。API は関心ごとごとに分離された名前付きエクスポート(parseBrowser, parseCPU, parseDevice, parseEngine, parseOS, parseUA)を持ち、これによりバンドラが未使用コードを除去しやすくなっています。TypeScript による静的型付けは利用者側での補完と安全性を提供し、ライブラリの内部でも型に基づく実装が可能です。また、ESM 出力は現代のビルドツール(Vite、Rollup、Webpack のモダンモードなど)と好相性で、ブラウザやサーバー環境へそのまま組み込みやすくなっています。設定ファイル群(eslint.config.mjs、.jshintrc)やテスト・CI の整備も想定されており、品質管理が行き届いた構成です。内部では正規表現ベースのパターンマッチングやデータテーブルに基づく抽出ロジックが想定され、汎用的な UA 文字列の解析を安全かつ効率的に行います。パッケージは軽量化が重視されており、個別パーサーを単体で使うことで最小限のバンドルサイズに抑えられます。ドキュメント例(README)にあるように、parseUA(’…’) の呼び出しだけでブラウザ情報が取得でき、既存のプロジェクトへの導入コストが低い点も魅力です。
プロジェクトの構成
主要なファイルとディレクトリ:
- .github: dir
- .gitignore: file
- .jshintrc: file
- eslint.config.mjs: file
- license.md: file
- README.md: file
- package.json: file
- tsconfig.json: file
- src: dir
- dist: dir
- tests: dir
…他 10 ファイル
まとめ
TypeScript と ESM による、軽量で使いやすいモダンな UA パーサーです。
リポジトリ情報:
- 名前: ua-parser-modern
- 説明: JavaScript library to detect Browser and OS info from User-Agent data, rewritten in ESM and TS
- スター数: 40
- 言語: TypeScript
- URL: https://github.com/antfu-collective/ua-parser-modern
- オーナー: antfu-collective
- アバター: https://avatars.githubusercontent.com/u/167634566?v=4
READMEの抜粋:
ua-parser-es
JavaScript/TypeScript library to detect browser, engine, OS, CPU, and device information from User-Agent strings.
Install
npm i ua-parser-es
Usage
import { parseUA } from 'ua-parser-es'
const result = parseUA('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36')
console.log(result.browser)
Named parser functions
import {
parseBrowser,
parseCPU,
parseDevice,
parseEngine,
parseOS,
parseUA,
} from 'ua-parser-es'
const...