【2022年版】Javascriptでブラウザを判定する方法まとめ【コピペで使える】

今回の記事は、

  • Chromeでは動いたJavascriptのコードがIEでは全く動かない
  • Javascriptを使ってブラウザを判定する方法が分からない
  • ブラウザ判定の必要性は分かっているけど毎回実装するのは面倒くさい

というお悩みを解消できる記事になっています。

みなさんがよく使用されるブラウザとしては、『Google Chrome』や『Safari』、『Edge』『Internet Explorer(IE)』などがありますが、Javascriptを使用する際にはユーザーがどのブラウザを使用しているか、ということも考慮しなければなりません。

というのも、「Chromeでは動いたコードがIEでは全く動かない…!」というように、ブラウザごとにJavascriptへの対応状況が異なっているからです。

そうした状況を踏まえ、この記事の前半では『Javascriptを使ってブラウザを判定する技術』について解説しつつ、後半では『実際にコピペで使用できるコード』をご紹介していこうと思います。

この記事を読み終えることで、『Javascriptがどのような仕組みでブラウザを判定しているのか』をご理解いただくとともに、実際の開発で活用できる実装方法についても学んでいただけます。

分かりやすく簡潔に解説していきますので、ぜひ最後までご覧くださいね。


フリーランス案件を探すならこのエージェント!

運営会社 レバテック株式会社 株式会社Branding Engineer 株式会社Hajimari
対応エリア 東京・神奈川・埼玉・千葉
大阪・兵庫・京都・愛知・福岡
東京・神奈川・埼玉・千葉
大阪・兵庫・京都・奈良・和歌山・滋賀
東京・神奈川・埼玉・千葉
茨城・大阪・兵庫・福岡
案件数 約28,000件 約3,300件 約4,200件
平均単価 68.2万円 72.2万円
最高月収 145万円 200万円 176万円
特徴高単価な案件が多い
福利厚生サービスが受けられる
・首都圏の案件が中心
給与保証制度で安定した収入を得られる
・税務処理のサポートあり
・マージン率は実質20%
週2/週3の案件が多い
在宅/リモート案件が多い
・スタートアップ企業やベンチャー企業の案件が多い
紹介企業例 ・株式会社Gunosy
・株式会社バンダイナムコホールディングス
・株式会社ユーザベース
・Sansan株式会社
・株式会社一休
・株式会社FiNC Technologies など
・クックパッド株式会社
・株式会社カオナビ
・株式会社Kaizen Platform など
説明記事
公式サイト


転職を考えているならこのエージェント!

運営会社 レバテック株式会社 株式会社Branding Engineer 株式会社リブセンス
対応エリア 東京・神奈川・埼玉・千葉
大阪・兵庫・京都・愛知・福岡
東京・神奈川・埼玉・千葉
大阪・兵庫・京都・奈良・和歌山・滋賀
東京・神奈川・埼玉・千葉
茨城・大阪・兵庫・福岡
案件数 約13,000件 約800件
※非公開求人が多い

※ドラフト制のため、対象外
年齢層 20代:◎
30代:〇
40代:〇
20代:〇
30代:〇
40代:△
20代:〇
30代:〇
40代:〇
特徴エンジニア・デザイナーを専門としている
・カウンセリングに時間をかける
年収アップ率60%の実績
IT/Web/ゲーム業界専門の転職エージェント
・業界経験者がキャリアコンサルタントを務める
・丁寧なカウンセリングで入社後の離職率1%以下を実現
ドラフト制による採用を叶える特殊なサービス
スキル・経験重視で評価してもらえる
・他エンジニアの入札結果を見ることで
自分の市場価値が分かる
紹介企業例 ・サイボウズ株式会社
・株式会社サイバーエージェント
・Chatwork株式会社 など
・DMM.com
・Money Forward
・SmartHR など
・メルカリ
・ZOZOテクノロジーズ
・freee など
説明記事
公式サイト


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プロパティに指定した文字列(上記であればchromesafari)が含まれているかどうかでブラウザの種類を判断します。

ブラウザごとの判定方法

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サイトを開発する際には、ぜひこちらの記事を思い出しながら実装していっていただければと思います。

このブログを通じて少しでも「傍(はた)を楽(らく)にする」ことができていれば嬉しく思います。

最後まで読んでいただきありがとうございました。

フリーランス案件を探すならこのエージェント!

運営会社 レバテック株式会社 株式会社Branding Engineer 株式会社Hajimari
対応エリア 東京・神奈川・埼玉・千葉
大阪・兵庫・京都・愛知・福岡
東京・神奈川・埼玉・千葉
大阪・兵庫・京都・奈良・和歌山・滋賀
東京・神奈川・埼玉・千葉
茨城・大阪・兵庫・福岡
案件数 約28,000件 約3,300件 約4,200件
平均単価 68.2万円 72.2万円
最高月収 145万円 200万円 176万円
特徴高単価な案件が多い
福利厚生サービスが受けられる
・首都圏の案件が中心
給与保証制度で安定した収入を得られる
・税務処理のサポートあり
・マージン率は実質20%
週2/週3の案件が多い
在宅/リモート案件が多い
・スタートアップ企業やベンチャー企業の案件が多い
紹介企業例 ・株式会社Gunosy
・株式会社バンダイナムコホールディングス
・株式会社ユーザベース
・Sansan株式会社
・株式会社一休
・株式会社FiNC Technologies など
・クックパッド株式会社
・株式会社カオナビ
・株式会社Kaizen Platform など
説明記事
公式サイト


転職を考えているならこのエージェント!

運営会社 レバテック株式会社 株式会社Branding Engineer 株式会社リブセンス
対応エリア 東京・神奈川・埼玉・千葉
大阪・兵庫・京都・愛知・福岡
東京・神奈川・埼玉・千葉
大阪・兵庫・京都・奈良・和歌山・滋賀
東京・神奈川・埼玉・千葉
茨城・大阪・兵庫・福岡
案件数 約13,000件 約800件
※非公開求人が多い

※ドラフト制のため、対象外
年齢層 20代:◎
30代:〇
40代:〇
20代:〇
30代:〇
40代:△
20代:〇
30代:〇
40代:〇
特徴エンジニア・デザイナーを専門としている
・カウンセリングに時間をかける
年収アップ率60%の実績
IT/Web/ゲーム業界専門の転職エージェント
・業界経験者がキャリアコンサルタントを務める
・丁寧なカウンセリングで入社後の離職率1%以下を実現
ドラフト制による採用を叶える特殊なサービス
スキル・経験重視で評価してもらえる
・他エンジニアの入札結果を見ることで
自分の市場価値が分かる
紹介企業例 ・サイボウズ株式会社
・株式会社サイバーエージェント
・Chatwork株式会社 など
・DMM.com
・Money Forward
・SmartHR など
・メルカリ
・ZOZOテクノロジーズ
・freee など
説明記事
公式サイト