こんにちは、ライターのマサトです！
今回は、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文で判定を行う
上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！
