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

今回の記事は、

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

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

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

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

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

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

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


レバテックフリーランス … 業界最大級の案件数業界トップクラスの高単価報酬を誇る最大手のサービスです。実績豊富なコーディネーターが丁寧な対応をしてくれるため、案件の無理な提案はありません。フリーランスで生きていくためにはまず登録しておきましょう。
MidWorks … フリーランス賠償責任保障生命保険の折半など、フリーランスでありながらも正社員並みの保障を受けられるのが特徴です。また、経験豊富なキャリアコンサルタントによる手厚いサポートも受けられるため、安定したフリーランス生活を送りたい方には特におすすめのサービスです。
ポテパンフリーランス … IT業界・技術に詳しいコンサルタントが担当してくれるため、こちらの要望をきちんと理解した上で案件を紹介してくれます。また、案件情報のみならず、フリーランスのイロハについても教えてくれるため、フリーランスとして初めて活動される方には特におすすめのサービスです。

レバテックキャリア … ITエンジニアが利用したい転職エージェントNo.1にも選ばれており、年収600万円以上のハイクラス求人を5,000件以上も保有しています。エンジニアが転職を考えた時にまず初めに登録しておくべきサービスです。
Tech Stars Agent … Tech Stars Agentでは、担当エージェントが全員エンジニア出身のため、スキルやキャリアを見据えたきめ細かな転職支援が受けられます。運営元の株式会社Branding Engineerは、独立支援サービス「MidWorks」も展開しているため、独立を視野に入れたサポートも受けられます
転職ドラフト … 年収UP率93.8%/平均年収UP額126万円と圧倒的な年収UP率を誇るイベント型のエンジニア向け 転職サービスです。毎月1回開催され、厳選された優良IT/Web系企業約150社からダイレクトスカウトを受け取ることができます。年収アップを目指す方は登録必須です。

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の部分は、実際に動かしたい処理を書いていってくださいね。

お仕事の途中ですが、少し一休みして、転職独立について考えてみませんか🙌?

現役エンジニアが選ぶおすすめの転職エージェント11選【成功談・失敗談もあります】

レバテックフリーランスの評判ってどう?【現役エンジニアが徹底解説します】

MidWorks(ミッドワークス)の評判ってどう?【現役エンジニアが徹底解説します】

日々の業務に追われて自分を見失わないよう、
定期的にキャリアを振り返るようにしておきましょう🤲

最後に

さて、ここまで、Javascriptでブラウザを判定する方法を解説してきましたがいかがでしたか?

記事を読む前は「何かちょっとややこしそう…」と思われていた方も、案外簡単だと驚かれたのではないでしょうか。

今回ご紹介した「Javascriptを使ってブラウザを判定する方法」ですが、理屈さえ理解してしまえば、その実装方法は非常にシンプルなものです。

Javascriptを使ってWebサイトを開発する際には、ぜひこちらの記事を思い出しながら実装していっていただければと思います。

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

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