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

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

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

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

受講者数No.1！初心者からプロへ導く信頼のスクール

短期間で習得可能！未経験から実践力を磨く充実のプログラム

テックアカデミー公式ページへ ≫

今なら無料相談でAmazonギフトカードがもらえる！

navigatorオブジェクトとは

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

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

ブラウザの種類
ブラウザのバージョン
オペレーティングシステムの種類
デバイスの種類
ブラウザの言語設定
ブラウザの設定
クッキーの有効・無効

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

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

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

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

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

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

プロパティ	説明
userAgent	ブラウザのユーザーエージェント文字列を返します。この文字列には、ブラウザの種類、バージョン、オペレーティングシステムの種類などが含まれています。
appCodeName	ブラウザのコードネームを返します。Firefoxの場合は”Mozilla”が返されます。
appName	ブラウザの名前を返します。Firefoxの場合は”Netscape”が返されます。
appVersion	ブラウザのバージョンを返します。
platform	オペレーティングシステムの種類を返します。
language	ブラウザの言語設定を返します。
cookieEnabled	クッキーが有効かどうかを返します。有効の場合はtrue、無効の場合はfalseが返されます。

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

navigatorオブジェクトは、ブラウザの情報を取得するためのプロパティが用意されたオブジェクトです。
navigatorオブジェクトの主なプロパティには、userAgent、appName、appVersion、platformなどがあります。
userAgentプロパティは、ブラウザのユーザーエージェントを表し、ブラウザの種類やバージョンを判別するのに使用されます。
appNameプロパティは、ブラウザの名前を表し、Internet Explorer、Chrome、Firefoxなどのブラウザを判別するのに使用されます。
appVersionプロパティは、ブラウザのバージョンを表し、ブラウザのバージョンを判別するのに使用されます。
platformプロパティは、ブラウザが実行されているプラットフォームを表し、Windows、Mac OS X、LinuxなどのOSを判別するのに使用されます。