【JavaScript】ユーザーエージェントからブラウザの種類を取得する

こんにちは、Ryohei（@ityryohei）です！

本記事では、JavaAScriptでユーザーエージェントからブラウザの種類を取得する方法をご紹介しています。

上記の疑問にお答えします。

では、解説していきます。

ブラウザの種類はユーザーエージェントから取得できる

ブラウザの種類はユーザーエージェントという識別子から取得することができます。ユーザーエージェントとは、Webページを閲覧する際にブラウザからサーバーに送られるユーザー情報を持った識別子です。ユーザーエージェントは様々な情報を持っており、識別子の中にはブラウザの種類やバージョンも含まれています。そのため、ユーザーエージェントを取得することで、ブラウザの種類を知ることができます。

ユーザーエージェントは、Navigatorオブジェクトが保持しています。下記の方法でNavigatorオブジェクトからユーザーエージェントを取得することができます。

window.navigator.userAgent;

主要ブラウザのユーザーエージェントを見てみる

下記は日本における主要ブラウザのユーザーエージェントです。IE、Edge、Chrome、FirefoxはWindows環境で取得、SafariはMac環境で取得したものになります。

IE	Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; Zoom 3.6.0; rv:11.0) like Gecko
Edge	Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36 Edge/18.19041
Chrome	Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.41 Safari/537.36
Firefox	Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:83.0) Gecko/20100101 Firefox/83.0
Safari	Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.1 Safari/605.1.15

お気づきの方もいらっしゃると思いますが、ユーザーエージェントはそれぞれのブラウザ名だけを持っているだけではありません。Edgeを見ていただくと、ユーザーエージェントの中にChromeやSafariの情報も含まれています。ユーザーエージェントからブラウザ名を取得する場合、文字列を検索することになります。ですので実際に取得することができるユーザーエージェントの中身を知っておくことが大切です。

ブラウザの種類を取得する

上記ユーザーエージェントの値を考えながら、処理を作っていきます。

例えば、アクセス元のブラウザがChromeであるかを判定する場合、下記の文字列がユーザーエージェントに含まれていればChromeだと判定できます。

• Chrome
• Safari

ただ、Edgeのユーザーエージェントも同じ値を持っているため、Edgeは除外するようにしなければなりません。

文字列の中に特定の値が含まれているか検索するにはindexOfを使います。indexOfはある文字列の中に指定した値が含まれていれば、値があるインデックスを返します。含まれていなければ「-1」を返すので、それを使って処理を作成します。

IE

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

if(agent.indexOf('trident') !== -1){

    alert('IEからのアクセスです');

}

Edge

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

if((agent.indexOf('edge') !== -1) && (agent.indexOf('chrome') !== -1) && (agent.indexOf('safari') !== -1)){

    alert('Edgeからのアクセスです');

}

Chrome

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

if((agent.indexOf('chrome') !== -1) && (agent.indexOf('safari') !== -1) && (agent.indexOf('edge') === -1)){

    alert('Chromeからのアクセスです');

}

Safari

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

if((agent.indexOf('safari') !== -1) && (agent.indexOf('chrome') === -1) && (agent.indexOf('edge') === -1)){

    alert('Chromeからのアクセスです');

}

Firefox

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

if(agent.indexOf('firefox') !== -1){

    alert('Firefoxからのアクセスです');

}

以上でユーザーエージェントから主要ブラウザの種類を取得することができます。

最後に

普段はコピペで済ませることが多いブラウザ種類の取得処理ですが、別々に取得する方法を知っておくとより詳細なブラウザの判定ができるようになるのでおすすめです！

以上、JavaScriptでユーザーエージェントからブラウザの種類を取得する方法のご紹介でした！