【JavaScript】ブラウザ判定！User-Agentって？

今回は、JavaScriptでブラウザ判定をする方法を説明していきます。まずはボタンを押してみてください。

ブラウザを確認

どうですか？使っているブラウザが表示されましたよね！

ブラウザはUser-Agentで判定
サンプルコード
まとめ

ブラウザはUser-Agentで判定

ブラウザはUser-Agent（ユーザーエージェント）文字列で判定します。

ユーザーエージェントとは｜「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典

「ユーザーエージェント」の意味を何となく説明しています。

一度ユーザーエージェント文字列を確認してみましょう！

ユーザーエージェント文字列

このユーザーエージェント文字列を取得するには window.navigator.userAgent と記述します。

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

toLowerCase()メソッドを使用しているのは、ユーザーエージェント文字列を小文字で取得したいからです。ブラウザの判定をするには、小文字で取得したユーザーエージョント文字列から、indexOf()メソッドを使って対象の文字列があるかを判定します。コードを見ていきましょう。

function checkBrowser() {
  var agent = window.navigator.userAgent.toLowerCase();
  var message = '';

  if (agent.indexOf('msie') > -1 || agent.indexOf('trident/') > -1) {
    message = 'IE';
  } else if (agent.indexOf('edg/') > -1 || agent.indexOf('edge') > -1) {
    message = 'Edge';
  } else if (agent.indexOf('chrome') > -1) {
    message = 'Chrome';
  } else if (agent.indexOf('safari') > -1 && agent.indexOf('chrome') == -1) {
    message = 'Safari';
  } else if (agent.indexOf('firefox') > -1) {
    message = 'Firefox';
  } else {
    message = 'その他のブラウザです';
  }

  alert(message);
}

IE(Internet Explorer)の判定は、文字列に’msie’または’trident/’が含まれているかを確認しています。‘msie’ はInternet Explorer 10 以下に含まれている文字列で、Internet Explorer 11には ‘trident/’ が含まれています。Edgeの判定も同じように、新しいEdgeと古いEdgeを判定するために agent.indexOf(‘edg/’) > -1 || agent.indexOf(‘edge’) > -1 としています。

Chromeのユーザーエージェント文字列には、safariという文字列も含まれているため、Safariを判定する場合は ‘chrome’ という文字列がないことまで判定しなければいけません。そのため、agent.indexOf(‘safari’) > -1 && agent.indexOf(‘chrome’) == -1 と記述しています。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ブラウザ判別</title>
    <script>
        function checkBrowser() {
            var agent = window.navigator.userAgent.toLowerCase();
            var message = '';

            if(agent.indexOf('msie') > -1 || agent.indexOf('trident') > -1) {
                message = 'IE';
            } else if(agent.indexOf('edg/') > -1 || agent.indexOf('edge') > -1) {
                message = 'Edge';
            } else if(agent.indexOf('chrome') > -1) {
                message = 'Chrome';
            } else if(agent.indexOf('safari') > -1 && agent.indexOf('chrome') == -1) {
                message = 'Safari';
            } else if(agent.indexOf('firefox') > -1) {
                message = 'Firefox';
            } else {
                message = 'その他のブラウザです';
            }

            alert(message);
        }
    </script>
</head>
<body>
    <button onclick="checkBrowser()">ブラウザを確認</button>
</body>
</html>