JavaScript　ブラウザの種類やバージョンを取得する方法：navigatorオブジェクトの使い方

　JavaScriptのnavigatorオブジェクトを使用して、ユーザーが使用しているブラウザの種類やバージョンを取得する方法を解説します。

ブラウザの種類やバージョンを取得するにはどうしたらいいですか？

JavaScriptのnavigatorオブジェクトを使用することで、ユーザーが使用しているブラウザの種類やバージョンを取得することができます。

navigatorオブジェクトとは

　JavaScriptのnavigatorオブジェクトは、ブラウザの情報を提供するオブジェクトです。このオブジェクトには、ブラウザの種類やバージョンなど、さまざまな情報が含まれています。

　navigatorオブジェクトは、Webブラウザの情報を提供するオブジェクトです。navigatorオブジェクトは、以下のような情報を提供します。

　これらの情報は、JavaScriptコードから取得することができます。navigatorオブジェクトは、JavaScriptの組み込みオブジェクトの一つで、ブラウザ上で実行されるJavaScriptコードからは、グローバルオブジェクトのwindow.navigatorでアクセスすることができます。

例えば、以下のようなコードを実行することで、ブラウザの言語設定を取得することができます。

const language = navigator.language;
console.log(language); // 出力例: "ja"

このように、navigatorオブジェクトを使用することで、ブラウザ上で実行されるJavaScriptコードからブラウザの情報を取得することができます。

navigatorオブジェクトの主なプロパティ

以下に、navigatorオブジェクトの主なプロパティとその説明を表でまとめました。

これらのプロパティを使用することで、JavaScriptコードからブラウザの情報を取得することができます。例えば、以下のようにしてuserAgentプロパティを取得することができます。

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

ユーザーが使用しているブラウザの種類を取得するには、navigatorオブジェクトのプロパティであるuserAgentを使用します。以下は、userAgentを使用したサンプルコードです。

const userAgent = navigator.userAgent;

if (userAgent.indexOf("Chrome") !== -1) {
  console.log("Chromeを使用しています");
} else if (userAgent.indexOf("Firefox") !== -1) {
  console.log("Firefoxを使用しています");
} else if (userAgent.indexOf("Edge") !== -1) {
  console.log("Edgeを使用しています");
} else {
  console.log("その他のブラウザを使用しています");
}

このコードでは、userAgentに含まれる文字列を検索して、各ブラウザの名前を判定しています。

ブラウザのバージョンを取得する方法

　ユーザーが使用しているブラウザのバージョンを取得するには、navigatorオブジェクトのプロパティであるappVersionを使用します。以下は、appVersionを使用したサンプルコードです。

const appVersion = navigator.appVersion;

console.log("ブラウザのバージョンは " + appVersion + " です");

このコードでは、appVersionに含まれる文字列を取得して、ブラウザのバージョンを表示しています。

サンプルプログラムを使った解説

　以下は、userAgentとappVersionを使用したサンプルプログラムです。これらのプロパティを使用して、ユーザーが使用しているブラウザの情報を取得して、画面上に表示しています。

const userAgent = navigator.userAgent;
const appVersion = navigator.appVersion;

let browserName = "";
if (userAgent.indexOf("Chrome") !== -1) {
  browserName = "Chrome";
} else if (userAgent.indexOf("Firefox") !== -1) {
  browserName = "Firefox";
} else if (userAgent.indexOf("Edge") !== -1) {
  browserName = "Edge";
} else {
  browserName = "その他のブラウザ";
}

const browserVersion = appVersion.match(/(chrome|firefox|edge)\/(\d+)/i)[2];

const message = `${browserName} ${browserVersion}を使用しています`;
console.log(message);

　このコードでは、まず、userAgentを使用してブラウザの名前を判定しています。そして、appVersionを使用してブラウザのバージョンを取得し、画面上に表示しています。

リスキリングでキャリアアップしてみませんか？

リスキリング(学び直し)は、経済産業省が推奨しており、

今だけ、最大７０％のキャッシュバックを受けることができます。

最大70％の給付金が出るおすすめのプログラミングスクール！

リスキリングで給付金が出るスクールを７つ紹介 ≫

国策で予算が決められているため申し込みが多い場合は早期に終了する可能性があります！

興味のある方はすぐに確認しましょう。

まとめ

　navigatorオブジェクトを使用して、ユーザーが使用しているブラウザの種類やバージョンを取得する方法を解説しました。

ブラウザの情報を取得することで、ブラウザに最適化したWebサイトの表示や動作の改善など、さまざまな用途に活用できそうです。

JavaScriptのnavigatorオブジェクトは、ブラウザの情報を提供するオブジェクトとして、Web開発に欠かせない存在です。しかし、このオブジェクトを使用した情報の取得は、ユーザーのプライバシーに関わるため、適切に扱うことが重要です。