新米エンジニアの伊敷です。

最近、HTML・CSS・JSを使ったフロント側のコーディングしている時に、「アクセスするブラウザを判定して処理を分けたい」と思う事がありました。

無事に実装できたので、自分のメモ代わりとしてこの記事では実装時に調べた内容をまとめます。

ブラウザ情報の取得

ブラウザ情報はJavascriptのNavigatorID.userAgentで取得できます。

Navigator.userAgentとは【MDN】

下記のコードで取得できます。

var browser = window.navigator.userAgent;

変数browserにはアクセスしているブラウザの情報が入ってきます。

browserの中身（Chromeの場合)

Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.55 Mobile Safari/537.36

「Chrome 」というブラウザの識別子があるのがわかります。

ブラウザ情報内のブラウザの識別子によって各ブラウザの判定が可能です。

各ブラウザの識別子

各ブラウザの識別子は以下のとおり。

ブラウザ	識別子
IE（11未満)	MSIE
IE（11以上)	Trident
旧Edge	Edge
Edge(最新バージョン)	Edg
Google Chrome	Chrome
FireFox	Firefox
Safari	Safari

ブラウザ情報の判定方法

ブラウザ情報はそのままだと文字列内に大文字と小文字が混在していて使いにくいため、「toLowerCase()」で全て小文字で揃えて「indexOf()」で検索しましょう。

toLowerCase() メソッドは、呼び出す文字列の値を小文字に変換して返します。

indexOf() メソッドは、呼び出す String オブジェクト中で、 fromIndex から検索を始め、指定された値が最初に現れたインデックスを返します。値が見つからない場合は -1 を返します。

以上を踏まえてIEの判定をしたのが以下コードです。

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

if(userAgent.indexOf(‘msie’) !== -1 || userAgent.indexOf(‘trident’) !== -1) { //IEだった時の処理 }

ブラウザ情報を判定する際の注意点

ブラウザ情報の判定には以下２点の注意点があります。

• ①Chromeのブラウザ情報にSafariという文字列が含まれている
• ②Edgeのブラウザ情報にChromeとSafariという文字列が含まれている

①と②の理由から、Safariを判定する際にはChromeとEdgeという文字列がない事を確認する必要があります。

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

if (userAgent.indexOf(‘safari’) !== -1 && userAgent.indexOf(‘chrome’) === -1 && userAgent.indexOf(‘edge’) === -1){ // ここにSafari用の記述 }

②の理由から、Chromeを判定する際にはEdgeという文字列がない事を確認する必要があります。

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

if (userAgent.indexOf(‘chrome’) !== -1 && userAgent.indexOf(‘edge’) === -1){ // ここにchrome用の記述 }

最後に

同じような形式でスマホの機種も判定できるようです。