Help us understand the problem. What is going on with this article?

使用してるブラウザを判定したい

ブラウザを取得する

var userAgent = window.navigator.userAgent;

// 例えばChromeを使ってると
// userAgent: Mozilla/5.0 (windows nt 6.3; wow64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36

window.navigatorでnavigatorオブジェクトが取れます。
このnavigatorオブジェクトはクッキーが有効かどうかや言語などブラウザに関する情報をいろいろ持っています。

リファレンスはこちら
Navigator Web API インターフェース | MDN

navigator.userAgentでブラウザのユーザーエージェントの文字列が返ってくるのですが、やけに長ったらしいので、ここに「Chrome」などの特定の文字列が含まれているかどうかで、どのブラウザを使用しているかを判定します。

ブラウザの識別子

基本的には以下の文字列で各ブラウザを識別できます。

ブラウザ 識別子
Internet Explorer MSIE または Trident
Edge Edge
Google Chrome Chrome
FireFox Firefox
Safari Safari
Opera Opera

基本的と言ったのは、これらの値はバージョンアップなどで予期せず変更される可能性があるからです。
IEを見てもらえばわかる通り、識別子が2種類あります。
これは、IE11になって、ユーザーエージェントの文字列から「MSIE」が削除され「Trident」が追加されたためです。

ブラウザの判定

判定をするにあたって、文字列をすべて小文字にしておきます。

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

indexOfを使って判定します。

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

"基本的には"これでOKです。
注意すべきはその順番です。

最初にChromeを使っていた場合の例を出しましたが、そのユーザーエージェントの文字列をもう一度よく見てみてください。

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

「Safari」って入ってますね。先ほど一覧化したように「Safari」はもちろんSafariブラウザの識別子になります。しかしここでの期待値はChromeです。判定の順序を適当に書いてしまうと、本当はChromeを使っているのにSafariを使用していると誤判定する恐れがあります。

Edgeに至ってはChromeもSafariも含んでいます。はぁ?という感じです。

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

正しい判定順

SafariよりChromeが先、
ChromeよりEdgeが先です。

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

if(userAgent.indexOf('msie') != -1 ||
        userAgent.indexOf('trident') != -1) {
    console.log('Internet Explorerをお使いですね');
} else if(userAgent.indexOf('edge') != -1) {
    console.log('Edgeをお使いですね');
} else if(userAgent.indexOf('chrome') != -1) {
    console.log('Google Chromeをお使いですね');
} else if(userAgent.indexOf('safari') != -1) {
    console.log('Safariをお使いですね');
} else if(userAgent.indexOf('firefox') != -1) {
    console.log('FireFoxをお使いですね');
} else if(userAgent.indexOf('opera') != -1) {
    console.log('Operaをお使いですね');
} else {
    console.log('そんなブラウザは知らん');
}

IEのバージョンは

バージョンもnavigatorオブジェクトから取得できます。

var version = window.navigator.appVersion.toLowerCase();

6~10まではこう。

if (version.indexOf("msie 6.") != -1) {
    console.log('IE6なんですねプークスクス');
}

11は先述した通り識別子がTridentなのでそこで判別します。
6より前は考慮しないことにします。

おまけ

モバイルはこうすれば良いらしい

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

if(userAgent.indexOf('iphone') != -1) {
    console.log('iPhoneをお使いですね');
} else if(userAgent.indexOf('ipad') != -1) {
    console.log('iPadをお使いですね');
} else if(userAgent.indexOf('android') != -1) {
    if(userAgent.indexOf('mobile') != -1) {
        console.log('androidのスマホをお使いですね');
    } else {
        console.log('androidのタブレットをお使いですね');
    }
} 

▼参考
JavaScriptでUserAgentを使った判別をする

sakuraya
株式会社ITMONOで執行役員CTOをしています。 転職活動中です。 はてなブログ:https://bluepixel.hatenablog.com/ Twitter: https://twitter.com/itmono_sakuraya
https://note.mu/bluepixel
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした