今回の記事は、
- Chromeでは動いたJavascriptのコードがIEでは全く動かない
- Javascriptを使ってブラウザを判定する方法が分からない
- ブラウザ判定の必要性は分かっているけど毎回実装するのは面倒くさい
というお悩みを解消できる記事になっています。
みなさんがよく使用されるブラウザとしては、『Google Chrome』や『Safari』、『Edge』『Internet Explorer(IE)』などがありますが、Javascriptを使用する際にはユーザーがどのブラウザを使用しているか、ということも考慮しなければなりません。
というのも、「Chromeでは動いたコードがIEでは全く動かない…!」というように、ブラウザごとにJavascriptへの対応状況が異なっているからです。
そうした状況を踏まえ、この記事の前半では『Javascriptを使ってブラウザを判定する技術』について解説しつつ、後半では『実際にコピペで使用できるコード』をご紹介していこうと思います。
この記事を読み終えることで、『Javascriptがどのような仕組みでブラウザを判定しているのか』をご理解いただくとともに、実際の開発で活用できる実装方法についても学んでいただけます。
分かりやすく簡潔に解説していきますので、ぜひ最後までご覧くださいね。
フリーランス案件を探すならこのエージェント!
転職を考えているならこのエージェント!
Javascriptでブラウザを判定する方法
Javascriptでブラウザを判定するためには、JavaScriptに標準で実装されている『navigator』オブジェクトの『userAgent』プロパティを使用します。
このuserAgentというプロパティの中に「ブラウザの種類」や「ブラウザのバージョン」などの情報が格納されているのです。
userAgentプロパティの使い方
それでは早速、userAgentプロパティの使い方をご紹介していきますね。
userAgentプロパティは、以下のような構文で使用します。
window.navigator.userAgent
このように1行記述するだけで、ブラウザの情報を取得することができます。
では実際にどのような情報が返ってくるかを見てみましょう。
// Chromeの場合
const chrome = window.navigator.userAgent
console.log(chrome)
=> Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.163 Safari/537.3
// Safariの場合
const safari = window.navigator.userAgent
console.log(safari)
=> Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_3) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.5 Safari/605.1.15
// IEの場合
const internetExplorer = window.navigator.userAgent
console.log(internetExplorer)
=> Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; rv:11.0) like Gecko
このように、ブラウザによって返ってくる情報が少しずつ違っているのがお分かりいただけるかと思います。
userAgentプロパティを使ってブラウザを判定する方法
では、続いて、userAgentを使ってブラウザを判定する方法を実際のコードを踏まえて解説していきます。
ブラウザを判定するためには、追加でtoLowerCase()
メソッドとindexOf()
メソッドを使用します。
このtoLowerCase()
メソッドは、その名の通り、文字列を全て小文字に変換するためのメソッドです。
先ほどご覧いただいた通り、userAgentを使って取得した情報には大文字と小文字が混在しており、小文字に統一されていた方が判定の際に楽になるため、このメソッドを追加しています。
一方、indexOf()
メソッドは、引数に指定した文字列が含まれていなければ-1
が返ってくるメソッドです。
これらのメソッドを踏まえた具体的な使い方は以下の通りです。
const agent = window.navigator.userAgent.toLowerCase()
if (agent.indexOf("chrome") != -1) {
console.log("ブラウザはchromeです。")
} else if (agent.indexOf("safari") != -1) {
console.log("ブラウザはsafariです。")
}
// Chromeを使用した場合
=> ブラウザはchromeです。
// Safariを使用した場合
=> ブラウザはsafariです。
このように、userAgentプロパティに指定した文字列(上記であればchrome
とsafari
)が含まれているかどうかでブラウザの種類を判断します。
ブラウザごとの判定方法
userAgentを使ったブラウザの判定方法をご理解いただけたところで、続いてはブラウザごとの判定方法をご紹介していきます。
今回ご紹介するのは、以下の6つのブラウザです。
- 1. Google Chrome
- 2. Safari
- 3. FireFox
- 4. Internet Explorer
- 5. Edge
- 6. Opera
それぞれ、エージェント情報と判定方法を併せてご紹介していきます。
Google Chromeの判定方法
エージェント情報
const chrome = window.navigator.userAgent
console.log(chrome)
=> Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.163 Safari/537.3
判定方法
const agent = window.navigator.userAgent.toLowerCase()
if (agent.indexOf("chrome") != -1) { console.log("ブラウザはchromeです。") }
=> ブラウザはchromeです。
Safariの判定方法
エージェント情報
const safari = window.navigator.userAgent
console.log(safari)
=> Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_3) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.5 Safari/605.1.15
判定方法
const agent = window.navigator.userAgent.toLowerCase()
if (agent.indexOf("safari") != -1) { console.log("ブラウザはsafariです。") }
=> ブラウザはsafariです。
FireFoxの判定方法
エージェント情報
const fireFox = window.navigator.userAgent
console.log(fireFox)
=> Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:70.0) Gecko/20100101 Firefox/70.0
判定方法
const agent = window.navigator.userAgent.toLowerCase()
if (agent.indexOf("firefox") != -1) { console.log("ブラウザはfirefoxです。") }
=> ブラウザはfirefoxです。
Internet Explorerの判定方法
Internet Explorerの場合、そのバージョンが10までの場合と11以降とでエージェント情報が変わってきますのでご注意ください。
エージェント情報
const internetExplorer = window.navigator.userAgent
// 10まで
console.log(internetExplorer)
=> Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0;
// 11以降
console.log(internetExplorer)
=> 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;
少し分かりづらいかもしれませんが、10まではMSIE
というワードが入っていたのですが、11以降ではそのワードは削除されています。
そのため、判定する場合もそれぞれ以下のように異なってきます。
判定方法
const agent = window.navigator.userAgent.toLowerCase()
// 10まで
if (agent.indexOf("msie") != -1) { console.log("ブラウザはInternet Explorerです。") }
=> ブラウザはInternet Explorerです。
// 11以降
if (agent.indexOf("trident") != -1) { console.log("ブラウザはInternet Explorerです。") }
=> ブラウザはInternet Explorerです。
Edgeの判定方法
Edgeの場合、「Chromium」ベースかどうかでエージェント情報が変わってきますのでご注意ください。
エージェント情報
const edge = window.navigator.userAgent
// 「Chromium」ベースの場合(※こちらの方が新しいバージョンです)
console.log(edge)
=> Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Chrome/80.0.3987.163 Safari/604.1 Edg/80.0.100.0Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Chrome/80.0.3987.163 Safari/604.1 Edg/80.0.100.0
// 「Chromium」ベースでない場合
console.log(edge)
=> Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36 Edge/12.
判定方法
const agent = window.navigator.userAgent.toLowerCase()
// 「Chromium」ベースの場合(※こちらの方が新しいバージョンです)
if (agent.indexOf("edg") != -1) { console.log("ブラウザはEdgeです。") }
=> ブラウザはEdgeです。
// 「Chromium」ベースでない場合
if (agent.indexOf("edge") != -1) { console.log("ブラウザはEdgeです。") }
=> ブラウザはEdgeです。
Operaの判定方法
Operaの場合、Edgeと同様に「Chromium」ベースかどうかでエージェント情報が変わってきますのでご注意ください。
エージェント情報
const opera = window.navigator.userAgent
// 「Chromium」ベースの場合(※こちらの方が新しいバージョンです)
console.log(opera)
=> Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.97 Safari/537.36 OPR/65.0.3467.48
// 「Chromium」ベースでない場合
console.log(opera)
=> Opera/9.80 (Windows NT 6.1; WOW64) Presto/2.12.388 Version/12.18
判定方法
const agent = window.navigator.userAgent.toLowerCase()
// 「Chromium」ベースの場合(※こちらの方が新しいバージョンです)
if (agent.indexOf("opr") != -1) { console.log("ブラウザはOperaです。") }
=> ブラウザはOperaです。
// 「Chromium」ベースでない場合
if (agent.indexOf("opera") != -1) { console.log("ブラウザはOperaです。") }
=> ブラウザはOperaです。
ブラウザの判定方法まとめ(コピペで使えます)
上記の結果を踏まえ、コピペでそのまま使えるコードを貼っておきますので、今後の開発でもどんどん活用いただければと思います。
const agent = window.navigator.userAgent.toLowerCase()
if (agent.indexOf("msie") != -1 || agent.indexOf("trident") != -1) {
console.log("ブラウザはInternet Explorerです。")
} else if (agent.indexOf("edg") != -1 || agent.indexOf("edge") != -1) {
console.log("ブラウザはEdgeです。")
} else if (agent.indexOf("opr") != -1 || agent.indexOf("opera") != -1) {
console.log("ブラウザはOperaです。")
} else if (agent.indexOf("chrome") != -1) {
console.log("ブラウザはChromeです。")
} else if (agent.indexOf("safari") != -1) {
console.log("ブラウザはSafariです。")
} else if (agent.indexOf("firefox") != -1) {
console.log("ブラウザはFireFoxです。")
} else if (agent.indexOf("opr") != -1 || agent.indexOf("opera") != -1) {
console.log("ブラウザはOperaです。")
}
このうち、『Edge』『Opera』『Chrome』『Safari』については、この通りの順番でなければ正しく動きませんのでご注意ください。
というのも、先ほど確認したエージェント情報を改めて見てみると、『Edge』と『Opera』には「chrome」や「safari」の文字が含まれており、『Chrome』には「safari」の文字が含まれているのです。
そのため、『Edge』/『Opera』→『Chrome』→『Safari』という順番だけは守るようにしておいてください。
また、上記のコードのうち、console.log
の部分は、実際に動かしたい処理を書いていってくださいね。
最後に
さて、ここまで、Javascriptでブラウザを判定する方法を解説してきましたがいかがでしたか?
記事を読む前は「何かちょっとややこしそう…」と思われていた方も、案外簡単だと驚かれたのではないでしょうか。
今回ご紹介した「Javascriptを使ってブラウザを判定する方法」ですが、理屈さえ理解してしまえば、その実装方法は非常にシンプルなものです。
Javascriptを使ってWebサイトを開発する際には、ぜひこちらの記事を思い出しながら実装していっていただければと思います。
このブログを通じて少しでも「傍(はた)を楽(らく)にする」ことができていれば嬉しく思います。
最後まで読んでいただきありがとうございました。
フリーランス案件を探すならこのエージェント!
転職を考えているならこのエージェント!