【JavaScript】ブラウザ判定をする方法

本記事では、JavaScriptを使ってアクセスしてきたユーザーが使用しているブラウザ(ChromeやIEなど)を判定する方法についてサンプルコードを用いて解説しています。

JavaScriptの学習におすすめ参考書
改訂新版JavaScript本格入門～モダンスタイルによる基礎から現場での応用まで

本書情報
著者	山田祥寛
発売日	2016/9/30
ページ数	782ページ
Kindle版	○
レビュー (Amazon)	(146件)

ＪａｖａＳｃｒｉｐｔ本格入門モダンスタイルによる基礎から現場での応用まで改訂新版/技術評論社/山田祥寛

posted with カエレバ

楽天市場

Amazon

Yahooショッピング

参考書が苦手な人はUdemyの動画がおすすめ
ガチで学びたい人のためのWEB開発徹底実践(フロントエンド編)

動画情報
作成者	CodeMafia
学習時間	19.5時間
受講者数	28,547人
レビュー	(5,025件)

動画の詳細はこちら

Contents

1 userAgentの使い方
2 各ブラウザのuserAgent情報の確認方法
3 各ブラウザの判定条件
4 ブラウザを判定する順番で気をつけること
5 まとめ

userAgentの使い方

userAgentは、アクセスしてきたユーザーが使用しているブラウザの情報を文字列で返すプロパティです。書き方は以下の通りです(windowを省略して書くことも可能です)。

const browser = window.navigator.userAgent.toLowerCase()

toLowerCase()は、大文字を小文字に変換してくれるメソッドです。これを使うことによって後ほど解説する識別子を使ったブラウザ毎の条件分岐の際に使う識別子を全て小文字で書くことができ、記述間違いを減らすことが出来ます。

各ブラウザのuserAgent情報の確認方法

後輩ちゃん

インストールしていないブラウザの情報を知りたい時は、わざわざブラウザをインストールして確認するしかないんですかね？

先輩くん

ブラウザをインストールしなくても、ChromeのNetwork conditionsからOS,ブラウザを組み合わせることができるよ！

まず初めに、検証ツールを開き右上にある3つの点をクリックし「More tools」を選択、続いて「Network Conditions」を選択します。

Network Conditionsの画面が開かれた、userAgentのチェックを外しその下にあるプルダウンから調べたいブラウザに変更します。
この状態で、userAgentの情報を確認すると、プルダウンで選択したOS,ブラウザ情報が取得することが出来ます。

各ブラウザの判定条件

userAgentを使って取得した情報をもとに、アクセスしてきたユーザーが使用しているブラウザを判定します。その判定する時に使う識別子は以下の通りです。

ブラウザ識別子
ブラウザ	識別子
GoogleChrome	Chrome
FireFox	FireFox
Edge(Chromium)	Edg
Edge(EdgeHTML)	Edge
Safari	Safari
InternetExplorer(11以上)	MSIE
InternetExplorer(10以下)	Trident

2つ注意するべきポイントは、EdgeとInternetExplorerはバージョンによってブラウザの判定をする識別子が異なります。

Edgeの場合、古いEdge(EdgeHTML)に対応させたい場合は「Edge」と、新しいEdge(Chromium)に対応させたい場合は「Edg」の識別子を使う必要がありますが、Edgeの古いバージョンのみ指定したい！ということはほとんどないため、「Edg」の識別子で条件分岐の処理をかけ両方を対象にするのが一般的です。

InternetExplorerの場合、IE11以上のバージョンから対応させたい場合は「MSIE」を、IE10以下のバージョンも対応させたい場合は「Trident」の識別子を使う必要があります。

IEは2022年6月16日をもって、サポートが終了となる告知がMicrosoft社によって告知されています。

GoogleChrome

GoogleChromeのuserAgent情報および条件分岐の方法は以下の通りです。

▼userAgent情報

'mozilla/5.0 (windows nt 10.0; wow64) applewebkit/537.36 (khtml, like gecko) chrome/96.0.4664.110 safari/537.36'

▼条件分岐

const browser = window.navigator.userAgent.toLowerCase();

if (browser.indexOf("chrome") != -1) {
  /* GoogleChromeの処理を記述 */
}

FireFox

FireFoxのuserAgent情報および条件分岐の方法は以下の通りです。

▼userAgent情報

'mozilla/5.0 (windows nt 10.0; wow64; rv:70.0) gecko/20100101 firefox/70.0'

▼条件分岐

const browser = window.navigator.userAgent.toLowerCase();

if (browser.indexOf("firefox") != -1) {
  /* FireFoxの処理を記述 */
}

Edge

EdgeのuserAgent情報および条件分岐の方法は以下の通りです。

▼userAgent情報

▼EdgeHTML
'mozilla/5.0 (windows nt 10.0; win64; x64) applewebkit/537.36 (khtml, like gecko) chrome/70.0.3538.102 safari/537.36 edge/18.19042'

▼Chromium
'mozilla/5.0 (windows nt 10.0; win64; x64) applewebkit/537.36 (khtml, like gecko) chrome/97.0.4692.99 safari/537.36 edg/97.0.100.0'

▼条件分岐

const browser = window.navigator.userAgent.toLowerCase();

if (browser.indexOf("edg") != -1) {
  /* Edgeの処理を記述 */
}

Safari

SafariのuserAgent情報および条件分岐の方法は以下の通りです。

▼userAgent情報

'mozilla/5.0 (iphone; cpu iphone os 13_2_3 like mac os x) applewebkit/605.1.15 (khtml, like gecko) version/13.0.3 mobile/15e148 safari/604.1'

▼条件分岐

const browser = window.navigator.userAgent.toLowerCase();

if (browser.indexOf("safari") != -1) {
  /* Safariの処理を記述 */
}

InternetExplorer

InternetExplorerのuserAgent情報および条件分岐の方法は以下の通りです。

▼userAgent情報

▼IE10以下
'mozilla/5.0 (compatible; msie 10.0; windows nt 6.1; wow64; trident/6.0)'

▼IE11以上
'mozilla/5.0 (windows nt 10.0; wow64; trident/7.0; rv:11.0) like gecko'

▼条件分岐

const browser = window.navigator.userAgent.toLowerCase();
    
if(browser.indexOf('msie') != -1 || userAgent.indexOf('trident') != -1) {
    /* IEの処理を記述 */
}

ブラウザを判定する順番で気をつけること

複数のブラウザ毎に処理を分けたい場合は、ブラウザ判定をする順番を気をつける必要があります。

なぜ、順番に気をつける必要があるのかというと、例えばEdgeのuserAgentの情報には「Chrome」の文字列が入っているためEdgeの条件分岐の前にGoogleChromeの条件分岐を書いてしまうと、Edgeブラウザを使ってアクセスしてきたユーザーに対してGoogleChromeの処理が実行されてしまいます。
他にもGoogleChromeのuserAgentの情報には「Safari」の文字が入っています。

上記内容を考慮して、ブラウザを正しく判定できるサンプルコードは以下の通りです。

const browser = window.navigator.userAgent.toLowerCase();
    
if(browser.indexOf('msie') != -1 || userAgent.indexOf('trident') != -1) {
    /* IEの処理を記述 */
}else if(browser.indexOf('edg') != -1) {
    /* Edgeの処理を記述 */
}else if(browser.indexOf('chrome') != -1) {
    /* GoogleChromeの処理を記述 */
}else if(browser.indexOf('safari') != -1) {
    /* Safariの処理を記述 */
}else if(browser.indexOf('firefox') != -1) {
    /* FireFoxの処理を記述 */
}else{
    /* その他ブラウザの処理を記述 */
}