Home
JavaScript
JSでユーザが使っているブラウザを判定する方法【userAgent】

JSでユーザが使っているブラウザを判定する方法【userAgent】

公開日
2022.02.19
更新日
2022.04.02
JSでユーザが使っているブラウザを判定する方法【userAgent】

どうも!かけちまるです!

JavaScriptのNavigator.userAgentでユーザのブラウザやデバイスを判定する方法をご紹介します。
ブラウザによって表示を変えたい時などに使えそうですね。

この記事では、

  • ・ブラウザを判定するソース
  • ・デバイスを判定するソース
  • ・IEのバージョンを判定するソース

がわかります。

ブラウザを判定するソース

ここではwindow.navigator.userAgent.toLowerCase()でユーザーが使用しているブラウザの情報を取得します。

それを元にif文で判定します。
判定方法にはindexOf()メソッドを使用しています。

indexOf()メソッドは指定した文字列が対象の文字列内になければ-1を返す性質があるのでそれを利用して判定しています。

JavaScript
コピー
let userAgent = window.navigator.userAgent.toLowerCase(); if(userAgent.indexOf('msie') != -1 || userAgent.indexOf('trident') != -1) { alert('Internet Explorer'); }else if(userAgent.indexOf('edge') != -1 || userAgent.indexOf('edg') != -1) { alert('Edge'); }else if(userAgent.indexOf('chrome') != -1) { alert('Google Chrome'); }else if(userAgent.indexOf('safari') != -1) { alert('Safari'); }else if(userAgent.indexOf('firefox') != -1) { alert('FireFox'); }else if(userAgent.indexOf('opera') != -1) { alert('Opera'); }

実装デモ

ボタンを押すとブラウザを判定します。

ブラウザを判定

デバイスを判定するソース

ここではwindow.navigator.userAgent.toLowerCase()でユーザーが使用しているブラウザの情報を取得します。

それを元にif文で判定します。
判定方法にはindexOf()メソッドを使用しています。

indexOf()メソッドは指定した文字列が対象の文字列内になければ-1を返す性質があるのでそれを利用して判定しています。

JavaScript
コピー
let userAgent = window.navigator.userAgent.toLowerCase(); if(userAgent.indexOf('iphone') != -1) { alert('iPhone'); } if(userAgent.indexOf('ipad') != -1) { alert('iPad'); } if(userAgent.indexOf('android') != -1 && userAgent.indexOf('mobile') != -1) { alert('Android'); } if(userAgent.indexOf('android') != -1 && userAgent.indexOf('mobile') == -1) { alert('Android Tablet'); }

実装デモ

ボタンを押すとデバイスを判定します。

デバイスを判定

IEのバージョンを判定するソース

2022年6月15日にInternet Explorerのサポートは終了してしまうので使いどころはなくなってしまいますが、IEのバージョンを判定して処理を分岐する方法もあります。

JavaScript
コピー
let userAgent = window.navigator.userAgent.toLowerCase(); let appVersion = window.navigator.appVersion.toLowerCase(); // IE(11以外) let isMSIE = (userAgent.indexOf('msie') != -1 || userAgent.indexOf('trident') != -1); // IE6 let isIE6 = isMSIE && (appVersion.indexOf('msie 6.') != -1); // IE7 let isIE7 = isMSIE && (appVersion.indexOf('msie 7.') != -1); // IE8 let isIE8 = isMSIE && (appVersion.indexOf('msie 8.') != -1); // IE9 let isIE9 = isMSIE && (appVersion.indexOf('msie 9.') != -1); // IE10 let isIE10 = isMSIE && (appVersion.indexOf('msie 10.') != -1); // IE11 let isIE11 = (userAgent.indexOf('trident/7') != -1); // IE let isIE = isMSIE || isIE11; // Edge let isEdge = (userAgent.indexOf('edge') != -1); if(isIE) { alert('IE'); } if(isIE6) { alert('IE6'); } if(isIE7) { alert('IE7'); } if(isIE8) { alert('IE8'); } if(isIE9) { alert('IE9'); } if(isIE10) { alert('IE10'); } if(isIE11) { alert('IE11'); } if(isEdge) { alert('Edge'); }

実装デモ

ボタンを押すとIEのバージョンを判定します。

IEのバージョンを判定

まとめ

ブラウザによって(特にIE)分岐する処理はたまに使うのでどこかにメモしておいてコピペで使えると便利ですね。

また、Navigator.userAgentで取得できる値はブラウザのバージョンアップなどの際に変わってしまうことがあるそうなので記事のソースで動かないことがあればご一報いただけると助かります。

おわり

かけちまる
かけちまる
Webエンジニアをしています。
HTML/CSS/JavaScript/jQuery/PHPができます。
WEB制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。

関連記事

【Three.js】マウスにライトを追従させる方法

【Three.js】マウスにライトを追従させる方法

【CSS】mix-blend-modeで乗算などを表現する方法

【CSS】mix-blend-modeで乗算などを表現する方法

【初心者向け】CodePenの使い方からサイト埋め込み方法

【初心者向け】CodePenの使い方からサイト埋め込み方法

【jQuery】順番に要素が出てくるアニメーション

【jQuery】順番に要素が出てくるアニメーション

Contact Form 7の基本設定

Contact Form 7の基本設定

【GSAP】registerEffectでアニメーションをテンプレート化する方法

【GSAP】registerEffectでアニメーションをテンプレート化する方法