【よく使う】JavaScriptでユーザーエージェント(userAgent)からOS、ブラウザを取得する汎用的なユーティリティ

JavaScript
【よく使う】JavaScriptでユーザーエージェント(userAgent)からOS、ブラウザを取得する汎用的なユーティリティ
Memo

JavaScriptで閲覧者のOSやブラウザを取得する必要があったので
汎用的なユーティリティを作成しました。

JavaScriptでOSを取得する

ユーティリティ関数

Utills.js
export const getOS = () => { const userAgent = navigator.userAgent.toLowerCase(); if(userAgent.indexOf("windows nt") !== -1) { return "Microsoft Windows"; } else if(userAgent.indexOf("android") !== -1) { return "Android"; } else if(userAgent.indexOf("iphone") !== -1 || userAgent.indexOf("ipad") !== -1) { return "iOS"; } else if(userAgent.indexOf("mac os x") !== -1) { return "macOS"; } else { return "Unknown"; } }

OSを表示する

main.js
import { getOS } from 'Utills.js; console.log(getOS); // macOS

コードの解説

ユーザーエージェントを取得する

ユーザーエージェントの文字列を取得

JavaScript
const userAgent = navigator.userAgent.toLowerCase();

OS名の判定

OS名が含まれているか判定する

JavaScript
if(userAgent.indexOf("OS名") !== -1) { // 処理 }

JavaScriptでブラウザ名を取得する

ユーティリティ関数

Utills.js
export const getBrowser = () => { const userAgent = navigator.userAgent.toLowerCase(); if(userAgent.indexOf("edge") !== -1 || userAgent.indexOf("edga") !== -1 || userAgent.indexOf("edgios") !== -1) { return "Microsoft Edge"; } else if (userAgent.indexOf("opera") !== -1 || userAgent.indexOf("opr") !== -1) { return "Opera"; } else if (userAgent.indexOf("samsungbrowser") !== -1) { return "Samsung Internet Browser"; } else if (userAgent.indexOf("ucbrowser") !== -1) { return "UC Browser"; } else if(userAgent.indexOf("chrome") !== -1 || userAgent.indexOf("crios") !== -1) { return "Google Chrome"; } else if(userAgent.indexOf("firefox") !== -1 || userAgent.indexOf("fxios") !== -1) { return "Mozilla Firefox"; } else if(userAgent.indexOf("safari") !== -1) { return "Safari"; } else if (userAgent.indexOf("msie") !== -1 || userAgent.indexOf("trident") !== -1) { return "Internet Explorer"; } else { return "Unknown"; } }

ブラウザを表示する

main.js
import { getBrowser } from 'Utills.js; console.log(getBrowser); // Google Chrome

コードの解説

ユーザーエージェントを取得する

ユーザーエージェントの文字列を取得

JavaScript
const userAgent = navigator.userAgent.toLowerCase();

ブラウザ名の判定

ブラウザ名が含まれているか判定する

JavaScript
if(userAgent.indexOf("ブラウザ名") !== -1) { // 処理 }

終わりに

最後までご覧いただきありがとうございます。
この記事では【よく使う】JavaScriptでユーザーエージェント(userAgent)からOS、ブラウザを取得する汎用的なユーティリティについて紹介させていただきました。

これからも皆様の開発に役立つ情報を提供していきたいと考えています。
今後ともよろしくお願いいたします。