スライドショー

【JavaScript入門】PCブラウザの種類を判定する方法まとめ!

こんにちは、ライターのマサトです!

今回は、JavaScript側で何のブラウザを利用しているのかを判定する手法について学んでいきましょう!

この記事では、

・ブラウザを判定するには?
・「userAgent」の使い方

という基本的な内容を踏まえたうえで、

・IEやChromeなどのブラウザ判定

などの実践的な使い方について解説していきます。

この記事で、ブラウザの判定方法をしっかり学習して自分のスキルアップを目指しましょう!

ブラウザを判定するには?

それでは、まず最初にブラウザを判定する仕組みについて見ていきましょう!

基本的にはJavaScript標準で提供されているNavigatorオブジェクトの「userAgentプロパティ」を利用することになります。

これはJavaScriptを実行しているブラウザの種類やバージョンなどの情報を取得できる唯一のプロパティなので重宝します。

使い方も簡単で便利なのですが、ブラウザの判定を行う順序を間違うと誤認識しやすいので注意する必要もあります。

本記事では、このような注意点も含めてPC・スマホのブラウザを判定する方法を基本から学習できるようにまとめているので参考にしてみてください!

「userAgent」の使い方

この章では、基本的なuserAgentの使い方について見ていきましょう!

一般的な構文から実際のプログラミング手法について学んでいきます。

基本的な構文と書き方について

まずは、もっとも基本となる構文から見ていきましょう!

と…言っても実はとても簡単で次のように記述することでブラウザの情報を取得できます。

window.navigator.userAgent;

このように記述するだけで、ブラウザの情報が記述された「文字列」を戻り値として取得することが可能です。

ポイントはあくまで文字列として情報を取得するという点です!

そのため、文字情報の中にあるブラウザの種類やバージョンを「indexOf()」などのメソッドを活用して抜き出す処理が必要になるわけです。

ブラウザの情報を取得する方法

それでは、実際にブラウザの種類を取得するプログラムを作成してみましょう!

まずは、「userAgentプロパティ」からブラウザ情報を取得するところから始めます。

//①の方法
var agent = window.navigator.userAgent;

//②の方法
var agent = window.navigator.userAgent.toLowerCase();

①の方法は通常通りに「userAgent」を利用していますが、②は最後に「toLowerCase()」を実行していますよね?

実は取得したブラウザ情報は大文字・小文字が混在した文字列なので、基本的にはすべて小文字か大文字に統一しておいた方が判定しやすいわけです。

そのため、一般的には②の方法を使って次のように記述します!

var agent = window.navigator.userAgent.toLowerCase();
  
var result = agent.indexOf('chrome') > -1;
  
console.log(result);

この例では、取得したブラウザ情報を「indexOf()」を使って「chrome」の文字が存在するかどうかを確認しています。

もし無ければ「-1」が戻り値で返り、存在していれば「文字位置」が数値で返ります。

そのため、「> -1」で比較することで「true / false」を取得することができるので判定が可能になるというわけです。

IEやChromeなどのブラウザ判定

現在、定番のブラウザとしては「IE」「Chrome」「Safari」「Firefox」など、さまざまな種類があります。

これらのブラウザをそれぞれ判定する方法について見ていきましょう!

一般的にはIF文でそれぞれのブラウザ名称を順番に判定していくのが基本です。

var agent = window.navigator.userAgent.toLowerCase();

if(agent.indexOf('msie') > -1) {

  console.log('IEブラウザです');

} else if(agent.indexOf('edge') > -1) {

  console.log('Edgeブラウザです');

} 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 {

  console.log('その他のブラウザです');

}

この例では、userAgentでブラウザ情報を取得してそれぞれのブラウザ名称をindexOf()で順番に判定しています。

注意点としては、冒頭でも少し紹介しましたが比較する順番が重要です!

実はEdgeブラウザをuserAgentプロパティで確認すると、「chrome」や「safari」の文字が含まれているのです。

さらに、Chromeブラウザを調べると「safari」の文字が含まれています。

このように、本来のブラウザとは異なる名称が含まれているケースがあるので、先に調査したいブラウザを比較しておく必要があるわけです。

基本的には「Edge」→「Chrome」→「Safari」の順番は最低限守るようにしておきましょう!

まとめ

今回は、JavaScriptからブラウザの種類を判定する方法について学習をしました!

最後に、もう一度ポイントをおさらいしておきましょう!

・ブラウザの種類を判定するには「userAgentプロパティ」を使う
・userAgentプロパティで取得した情報はindexOf()でブラウザ名を抜き出す
・複数のブラウザを判定する場合はIF文で判定を行う

上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう!

LINEで送る
Pocket

ITエンジニアへ転職したい方におすすめ

自分を評価してくれる企業に転職して年収を上げたい! 自分のスキルにあった独自案件を知りたい!
エンジニアは今もっとも注目されている職業の1つ。エンジニアになって年収を増やしたい方や、あなたのスキルに見合った企業へ転職したいエンジニアの方も多いですよね。

しかし、大手の転職媒体は扱う求人数が多くても、誰もが登録しているので競争率もかなり高くなっています。そのため、あなたの条件に見合った企業を見つけても転職するためには、相応の努力とスキルが必要となります。

こういった媒体では、未経験からエンジニアを目指す方やエンジニア歴2〜3年で転職を考えている方にとって、最適な転職環境とはいえません。

そこでオススメしたいのが、未経験者や若手エンジニア向けの独自案件を多く掲載している「侍ワークス」です。

侍ワークスは、独自案件を多く掲載しているだけでなく、

・応募から就業まで一貫したサポート

・就業後もアフターフォロー

といった経験の浅い方や初めてエンジニアを目指す方にも安心のフォロー体制が整っています。もちろん登録は完全無料!しかも案件を見るだけなら登録も不要です。

まずは、お気軽にどんな求人があるか見てみてください。あなたにピッタリの企業がきっと見つかりますよ! 侍ワークスの求人情報を見る

書いた人

マサト

マサト

フリーランスのIT系ライターを8年従事。侍ブログ編集部としては、これまで270記事以上の記事を執筆。
独学でJavaScript, Node.js, Linuxを3年学習。個人プロダクトのWebメディア・アプリ作成経験あり。