JavaScriptでユーザーエージェント（ブラウザ）を判定する方法

Web制作をしてる時に、「ブラウザによって挙動が違う」のは当たり前の話ですが、
全てのブラウザで同じ挙動、表示をさせようとするとなかなか上手くいきません。

そこで、特定のブラウザだけに特殊な処理を施して、ブラウザ間に生じる際をなくそうと考えるのです！
ここで最初に必要になってくるのが「ブラウザやOSを判定すること」です。

今回はそのユーザーエージェントをJavaScriptで判定する方法をご紹介いたします。

そもそも「ユーザーエージェント」とは

「ユーザーエージェント」とは、ユーザーがそのWebサイトを表示させるときに使用している環境のことを言います。
簡単に言えば、ユーザーが「どんな端末（OS）で、どのブラウザを使っているか」をざっくりと調べることができます。

ユーザーエージェントがわかれば、各ブラウザに特定の処理を施すことができます。

ユーザーエージェントの判定コードをご紹介！

まずユーザーエージェントの取得方法は

navigator.userAgent

もしくは

window.navigator.userAgent

で取得できます。
userAgentプロパティを使用することでユーザーエージェントの取得が可能になるのですね！

そして判定は以下です。

var ua = navigator.userAgent;

if(ua.indexOf('Trident') != -1 || ua.indexOf('MSIE') != -1) {
  // Microsoft Internet Exploreの時の処理
} else if(ua.indexOf('Edge') != -1) {
  // Microsoft Edgeの時の処理
} else if(ua.indexOf('Chrome') != -1) {
  // Chromeの時の処理
} else if(ua.indexOf('Safari') != -1) {
  // Safariの時の処理
} else if(ua.indexOf('Firefox') != -1) {
  // Firefoxの時の処理
} else if(ua.indexOf('OPR') != -1 || ua.indexOf('Opera') != -1) {
  // Operaの時の処理
} else {
  // そのほかの時
}

判定時は大文字小文字を区別するので、「各ブラウザの大文字小文字なんて覚えてられないよ！」って方は
toLowerCase関数を使って文字列を小文字化して小文字で判定することをお勧めします！

// toLowerCase関数を追加
var ua = navigator.userAgent.toLowerCase();

// 全て小文字で判定
if(ua.indexOf('trident') != -1 || ua.indexOf('msie') != -1) {
  // Microsoft Internet Exploreの時の処理
} else if(ua.indexOf('edge') != -1) {
  // Microsoft Edgeの時の処理
} else if(ua.indexOf('chrome') != -1) {
  // Chromeの時の処理
} else if(ua.indexOf('safari') != -1) {
  // Safariの時の処理
} else if(ua.indexOf('firefox') != -1) {
  // Firefoxの時の処理
} else if(ua.indexOf('opr') != -1 || ua.indexOf('opera') != -1) {
  // Operaの時の処理
} else {
  // そのほかの時
}

indexOf関数は、文字列の中に探したい文字列が何文字目以降にあるかを判定してくれる関数です。
探したい文字列がそこにない時には-1が返されます。
ここで判定するのは「存在するかどうか」なので、「-1でなければ存在する」ということになります。

// 変数uaに「edge」という文字が存在する時
   if(ua.indexOf('edge') != -1) {
     // Microsoft Edgeの時の処理
   }

注意点と対処法

これを初めて使おうと思ったときに、あれ？と思ったことがあります。

OSはMac OSXで、Google Chromeを使用したときに、こんな表示になりました。

よし、Chromeあるし、OK!
あれ？Safari…？

最後に「Safari」と記述されていました。

これはuserAgentプロパティの特徴で、
基本的には「Microsoft系ブラウザ→Chrome→Safari」の順番に表示されるそうです。

なので、例えば「Safariのみで処理をさせたい」というような時に

// 注意！誤った一例です。
 if(ua.indexOf('safari') != -1) {
   // Safariの時の処理
 }

と書きたくなってしまうのですが、これでは正しい判定ができません。
これだとChromeでも処理されてしまうことになります。

よって、先に例に出したように順番通りに判定していくことが大切です。