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) {
  // 処理
}