【JavaScript】
使用しているブラウザを判定する方法
window.navigator.userAgentによる判定方法
投稿日 2021/07/05 更新日 2021/07/05
こんにちは。当サイトの管理者「元木皇天」です。
近年JavaScriptを使用したリッチなウェブサイトを作成することが増えてきている中、必ず問題となるのがIE（Internet Explorer）に対応させるかどうかという問題です。
というのも、何も考えずに制作してしまうと、JavaScriptのコードが実はIE非対応で動かない、、、なんてことが多く、IEを考慮するかしないかでウェブサイト制作の工数も変わってきます。
そういった背景があるので、今回はユーザが使用しているブラウザの種類を判定する方法について解説いたします。
環境
OS：MacOS Big Sur
GoogleChrom：バージョン90.0.4430.212
やりたいこと
各種ブラウザの判定方法
それではまず、各種ブラウザの判定方法する方法について解説します。
ブラウザの判定を行うにはユーザエージェントというものを使用します。
ユーザエージェントには、ブラウザの種類やバージョンといったクライアントの種類を識別するための情報が入っています。
そして、ユーザエージェントをJavaScriptで取得するにはnavigatorオブジェクトのuserAgentプロパティを使用します。
//ユーザエージェントの取得 const agent = window.navigator.userAgent;
ちなみにこれを管理人の使用しているブラウザで実行すると以下のような値が得られます。
//Chromeでの取得結果 "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.77 Safari/537.36"
管理人はGoogle Chromeで実行したので上記のような結果が得られましたが、SafariやIEなど他のブラウザで実行するとまた異なる結果が得られるはずです。
では、この情報からどのようにブラウザを判定するのか？
それはユーザエージェントに含まれる文字列から判定します。
//例
const agent = window.navigator.userAgent;
//Edgeかどうかを判定する場合
if((agent.indexOf('edge') > -1)){
//処理を記載
}
ユーザエージェントの文字列に各ブラウザ固有の文字列が含まれるため、その文字列が含まれているか否かでブラウザを判定します。
以下に各ブラウザから得られるユーザエージェントに対して、何の文字列が含まれているかで判定すれば良いかをまとめましたので参考にしてください。 （ユーザエージェントの取得結果をそのまま使用すると大文字・小文字が混ざっているので、大文字または小文字のどちらかに変換することが望ましいです。 そのため、取得結果に対してtoUpperCase()かtoLowerCase()を使用してください。）
| ブラウザ | 判定するための文字列 |
|---|---|
| Chrome | chrome、edge、opr |
| Safari | safari、chrome |
| IE(Ver.11) | trident/7 |
| IE(Ver.11より前) | msie、opr |
| Edge | edge |
| Firefox | firefox |
| Opera | opr |
--補足--
上記一覧で、Chromeの判定に"edge""opr"が使用されていたりするのは、OperaやEdgeのユーザエージェントを取得すると"Chrome"と"Safari"も含まれた文字列が取得できるためです。
そのため、Chromeを判定するのにそのまま"chrome"のみで判定してしまうと、ブラウザがOperaやEdgeにも関わらずChromeと判定されてしまうので、edgeを含まない、oprを含まない といった判定条件を付け加える必要があるため、判定条件の文字列にedge、oprが記述されています。
ブラウザ判定の実装
使用ブラウザの判定は以下のコードで実装できます。
const agent = window.navigator.userAgent.toLowerCase();
//Chromeの判定
if((agent.indexOf('chrome') > -1) && (agent.indexOf('edge') === -1) && (agent.indexOf('opr') === -1)){
alert('chromeです');
}
//Safariの判定
if((agent.indexOf('safari') > -1) && (agent.indexOf('chrome') === -1)){
alert('Safariです');
}
//IE(Ver.11)の判定
if((agent.indexOf('trident/7') > -1)){
alert('IE11です');
}
//IE(Ver.11より前)の判定
if((agent.indexOf('msie') > -1) && (agent.indexOf('opr') === -1) && (agent.indexOf('opr') === -1)){
alert('IEです');
}
//Edgeの判定
if((agent.indexOf('edge') > -1)){
alert('Edgeです');
}
//Firefoxの判定
if((agent.indexOf('firefox') > -1)){
alert('Firefoxです');
}
//Operaの判定
if((agent.indexOf('opr') > -1)){
alert('Operaです');
}
上記の条件を使用することで、ブラウザを判定することができます。
また、上記条件を使用してボタン押下時に使用しているブラウザの名称を表示するボタンを実装しましたので、よかったら参考にしてください。
まとめ
JavaScriptでブラウザを判定するには、userAgentを使用する。
