JavaScriptでのユーザーエージェント取得方法【現役エンジニアが解説】

PROGRAM

今回は、JavaScriptでのユーザーエージェント取得方法について、簡単に解説していきます。

ユーザーエージェントとは

ユーザーエージェントとは使用しているブラウザ等のことです。

例えば、以下はChrome使用の筆者のユーザーエージェントになります。

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36

この情報があれば、JavaScriptで使用するブラウザによって処理を変えることができます。

ユーザーエージェントの取得

JavaScriptではユーザーエージェントを簡単に取得できます。

window.navigatorオブジェクトのuserAgentプロパティの値で取得可能です。

console.log(window.navigator.userAgent);

上記のコードを実行すると、コンソールにユーザーエージェントがログ出力されます。

ユーザーエージェントによる処理の分岐

ユーザーエージェントによって処理を分岐させられます。

var userAgent = window.navigator.userAgent.toLowerCase();
if(userAgent.indexOf('msie') != -1 || userAgent.indexOf('trident') != -1) {
  // Internet Explorer
} else if(userAgent.indexOf('edge') != -1) {
  // Edgeをお使いですね
} else if(userAgent.indexOf('chrome') != -1) {
  // Google Chrome
} else if(userAgent.indexOf('safari') != -1) {
  // Safari
} else if(userAgent.indexOf('firefox') != -1) {
  // Firefox
} else if(userAgent.indexOf('opera') != -1) {
  // Opera
} else {
  // 上記以外
}

上記のようなコードで、ブラウザの判定を行うことが可能です。

ただし、判定する順序も重要であるため、ライブラリを使う方が良いかもしれません。