JavaScriptでブラウザ判定を行う

既に、関連書籍や各種サイト/記事で多く紹介されている内容ですが、自分の備忘録を目的に投稿します

#ブラウザ毎に判定してみる

Chrome

###ユーザーエージェントの確認

var agent = window.navigator.userAgent;
console.log(agent);
// 実行結果
// VM126:1 Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.77 Safari/537.36

###判定方法

var agent = window.navigator.userAgent.toLowerCase();
var chrome = (agent.indexOf('chrome') !== -1) && (agent.indexOf('edge') === -1)  && (agent.indexOf('opr') === -1);
console.log(chrome); 
// 実行結果：true

ユーザーエージェントに「chrome」という文字列が入っていて、かつ、「edge/opr」が入っていないことで確認可能。「chrome」という文字列はEdgeやOperaのユーザーエージェントにも含まれているため、これらを除去が必要。

Edge

###ユーザーエージェントの確認

var agent = window.navigator.userAgent;
console.log(agent);
// 実行結果
// Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36 Edge/17.17134

###判定方法

var agent = window.navigator.userAgent.toLowerCase();
var edge = (agent.indexOf('edge') !== -1);  
console.log(edge); 
// 実行結果：true

ユーザーエージェントに「edge」という文字列が入っている

IE9

###ユーザーエージェントの確認

var agent = window.navigator.userAgent;
console.log(agent);
// 実行結果
// Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0;

###判定方法

var agent = window.navigator.userAgent.toLowerCase();
var ie9 = (agent.indexOf('msie 9.') !== -1);
console.log(ie9); 
// 実行結果：true

ユーザーエージェントに「msie 9」という文字列が入っている

IE11

###ユーザーエージェントの確認

var agent = window.navigator.userAgent;
console.log(agent);
// 実行結果
// Mozilla/5.0 (Windows NT 6.3; WOW64; Trident/7.0; Touch; .NET4.0E; .NET4.0C; .NET CLR 3.5.30729; .NET CLR 2.0.50727; .NET CLR 3.0.30729; Tablet PC 2.0; rv:11.0) like Gecko;

###判定方法

var agent = window.navigator.userAgent.toLowerCase();
var ie11 = (agent.indexOf('trident/7') !== -1);
console.log(ie11); 
// 実行結果：true

ユーザーエージェントに「trident/7」という文字列が入っている
IE11から「msie」という文字列が削除されているため注意が必要

##FireFox
###ユーザーエージェントの確認

var agent = window.navigator.userAgent;
console.log(agent);
// 実行結果
// Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:63.0) Gecko/20100101 Firefox/63.0

###判定方法

var agent = window.navigator.userAgent.toLowerCase();
var firefox = (agent.indexOf('firefox') !== -1);
console.log(firefox);
// 実行結果：true

ユーザーエージェントに「firefox」という文字列が入っている

#最後に
SafariやOperaなど足りていないブラウザは、こちらの記事に載ってたので、参考にしてください
・使用してるブラウザを判定したい