JavaScriptでユーザーが利用しているWebブラウザを判定して処理を変える

Webサイトを構築していく中でユーザーが利用しているWebブラウザによって処理を変えたいことがあります。
そうした場合にはJavaScriptで条件分岐をさせて処理を変える方法をとっていきます。

例えば、JavaScriptのプログラムがWebブラウザで挙動が違ったりうまく動かないといった時に、JSファイルをブラウザによって切り替えるといった対応をすることができます。

ここではJavaScriptでユーザーが利用しているWebブラウザを判定して処理を変える方法をご紹介します。


ブラウザ情報を取得する

JavaScriptでユーザーが利用しているWebブラウザの情報を取得するには「window.navigator.userAgent」を使います。navigatorオブジェクトのuserAgentプロパティでユーザーがアクセスした時のユーザー情報が取得できますので、そのユーザーの情報からブラウザの情報を確認します。

let ua = window.navigator.userAgent;
console.log(ua);


処理の結果はconsole.log()でWebブラウザのコンソールに結果を表示させています。

実際にGoogle Chromeでデベロッパーツールを起動してコンソールを確認すると以下のようにGoogle Chromeでアクセスした結果が確認できます。

JavaScriptでブラウザ情報を取得

各Webブラウザの結果では以下のように情報が取得できます。

Google Chrome
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36

FireFox
Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:64.0) Gecko/20100101 Firefox/64.0

Microsoft Edge
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36 Edge/18.17763

Microsoft Internet Explorer
Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; rv:11.0) like Gecko

Safari
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_2) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0.2 Safari/605.1.15

Opera
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36 OPR/57.0.3098.106

この情報を元にWebブラウザの判定を行って処理を変えます。
しかし、各ブラウザの出力結果を見ていただくとわかると思いますが、Google ChromeでSafariの文字列が入っていたり、Microsoft EdgeやOperaでChromeとSafariの文字列が入っていたりします。

これから出力結果の文字列を元にブラウザ判定を行いますが、複数のブラウザの文字列が含まれてくることも計算した上で条件分岐を行っていきます。


ブラウザを判定して処理を変える

ブラウザを判定をユーザーエージェントの情報を元に行っていきますが、ブラウザの情報の文字列で判断していきます。そして文字列を判断するためにindexOf()メソッドを使います。

indexOfメソッドは文字列内に指定した文字列が含まれているか検索するメソッドになります。
引数に検索する文字列を記述してマッチする文字列を探します。見つからなければ-1を返します。

userAgentの情報を入れた変数からindexOfメソッドで文字列を検索し、-1でなければ指定した検索文字列が見つかったので、その文字列を含んでいる場合の処理として条件分岐させます。
文字列の大文字と小文字は区別されるので気をつけてください。

let ua = window.navigator.userAgent;

if(ua.indexOf('Edge') != -1) {
  console.log('Microsoft Edge');
} else if(ua.indexOf('Trident') != -1 || ua.indexOf('MSIE') != -1) {
  console.log('Microsoft Internet Explorer');
} else if(ua.indexOf('OPR') != -1 || ua.indexOf('Opera') != -1) {
  console.log('Opera');
} else if(ua.indexOf('Chrome') != -1) {
  console.log('Google Chrome');
} else if(ua.indexOf('Firefox') != -1) {
  console.log('FireFox');
} else if(ua.indexOf('Safari') != -1) {
  console.log('Safari');
} else {
  console.log('Unknown');
}


Internet ExplorerやOperaブラウザは古いバージョンを利用していると違いがありますので、OR条件で複数の指定しておきます。
あとは記述する順番を気をつけてもらえば各ブラウザの判断を間違えることはないでしょう。

1つ、サンプルとしてWebブラウザによって読み込むJSファイルを変えるといったサンプルコードを用意しました。
例えばInternet ExplorerやEdgeといったMicrosoft製のブラウザだけうまくJavaScriptが動かないなんてことがあったとして、IEとEdgeだけは別のJSファイルを読み込んで、その他のブラウザは従来のJSファイルを読み込ませるといった条件分岐になります。

<script>
  let ua = window.navigator.userAgent;

  if(ua.indexOf('Edge') != -1 || ua.indexOf('Trident') != -1 || ua.indexOf('MSIE') != -1) {
    document.write('<script src="js/script-ms.js"><\/script>');
  } else {
    document.write('<script src="js/script.js"><\/script>');
  }
</script>


条件によってdocument.writeでHTMLでタグを出力しています。
タグを出力する際にはシングルクォーテーションとダブルクォーテーションの入れ子とscriptの終了タグのスラッシュ「/」をバックスラッシュ「\」でエスケープ処理をするのに気をつけてください。
JavaScriptを読み込ませるheadタグまたはbodyの終了タグの直前などに記述してもらえれば良いかと。

もちろんCSSの読み込みの制御にも利用できるでしょう。CSSの場合はCSSハックで制御する方もいるかと思いますが。

Internet Explorerのバーションで処理を変えたい場合では「MSIE 10」や「MSIE 9」といった文字列検索で対応することができます。その場合は変数を「let」ではなく「var」で宣言してください。古いバージョンのブラウザはletが対応していないので。

IE 10
Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E)

IE 9
Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E)

また、WordPressなどPHPが利用できる環境でしたらサーバサイドでの処理のほうがJavaScriptが無効に設定されているユーザーにも対応できますので、PHPでのブラウザ判定をされると良いでしょう。

PHPでのブラウザ判定の方法はこちらで紹介していきます。

↓ ↓ ↓

PHPでユーザーが利用しているWebブラウザを判断して処理を変える