【JavaScript】使用しているブラウザを判定する

使用しているブラウザを判定するにはJavaScriptの NavigatorID.userAgentプロパティを使います。

ブラウザ情報の取得

var userAgent = window.navigator.userAgent;

これで、ブラウザの情報を取得できますが、ユーザーエージェントを使って取得できる情報は大文字・小文字が乱立している文字列なので、判定しやすくするために全て大文字、または全て小文字に統一します。そこで先ほどのソースに「toLowerCase()」を追記してこの文字列を扱いやすいように修正します。

ブラウザの識別子

以下の文字列で各ブラウザを識別できます。

ブラウザ	識別子
IE（11未満)	MSIE
IE（11以上)	Trident
旧Edge	Edge
Edge(最新バージョン)	Edg
Google Chrome	Chrome
FireFox	Firefox
Safari	Safari

ブラウザ情報の判定

var userAgent = window.navigator.userAgent.toLowerCase();

indexOfを使って判定します。

if(userAgent.indexOf('msie') != -1) {
  console.log('ブラウザはInternet Explorerです');
}

書き方としてはこれで問題ないですが、複数のブラウザを比較する場合はIf文を記述する順序に注意が必要です。

なぜ順序に注意が必要なのか？

以下はchrome使用時のブラウザ情報ですが、後ろの方にSafariと書いてあります。
文字列「Safari」はSafariブラウザの識別子です。If文の順序を間違えるとchromeを使用しているにも関わらず、
Safariと判定される可能性があるため、If文の記述順序は注意が必要です。

Mozilla/5.0 (windows nt 6.3; wow64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36

記述順序

特に「Edge」→「Chrome」→「Safari」の順番に注意して記述します。

if(userAgent.indexOf('msie') != -1 ) {
    console.log('ブラウザはInternet Explorerです');
} else if(userAgent.indexOf('edge') != -1) {
    console.log('ブラウザはEdgeです');
} else if(userAgent.indexOf('chrome') != -1) {
    console.log('ブラウザはChromeです');
} else if(userAgent.indexOf('safari') != -1) {
    console.log('ブラウザはSafariです');
} else (userAgent.indexOf('firefox') != -1) {
    console.log('ブラウザはFireFoxです');
}

参照

MDN webdocs
UserAgentからOS/ブラウザなどの調べかたのまとめ
JavaScriptでブラウザを判定して処理を条件分岐する方法