navigator は「今使っているブラウザと環境のプロフィールカード」
navigator は、
「このページを開いているブラウザや環境の情報」をまとめたオブジェクト です。
どんなブラウザか（Chrome / Safari / Firefox など）
どんな OS か（Windows / macOS / Android / iOS など）
オンラインかオフラインか
言語設定は何か
クリップボード・位置情報・通知などの機能が使えるか
こういった「クライアント側の情報」や「機能への入り口」が、navigator の下に集まっています。
ただし、ユーザーのプライバシー保護のために、昔よりも細かい情報は取りづらくなっている、という前提も一緒に持っておくといいです。
navigator の基本的な立ち位置
window.navigator と navigator は同じもの
navigator は window.navigator の省略形です。
console.log(window.navigator === navigator); // true
window のところで話したように、
ブラウザ環境では「グローバルに見えているものの多くは window のプロパティ」です。navigator もその一つです。
ブラウザのコンソールで navigator と打って中身を覗いてみると、
かなりたくさんのプロパティやメソッドがぶら下がっているのが分かります。
navigator は「ユーザーを特定するためのもの」ではない
昔は navigator.userAgent などを使って、
「このユーザーはどのブラウザで、どの OS で…」と細かく判定していました。
しかし今は、
指紋採取（フィンガープリント）やトラッキングの問題 もあり、
ブラウザ側が情報をぼかしたり、仕様が変わったりしています。
なので、navigator は
「ざっくりとした環境情報」
「機能への入り口」
として使うのが現代的なスタンスです。
よく使う基本プロパティを押さえる
navigator.userAgent（ただし“頼りすぎ注意”）
userAgent は、
「ブラウザがサーバーに送る自己紹介文字列」です。
console.log(navigator.userAgent);
例えば、Chrome ならそれっぽい長い文字列が出てきます。
昔はこれをパースして、
Chrome か？
Safari か？
iPhone か？
などを判定していましたが、
今は あまり推奨されません。
理由は、
ブラウザが偽装することがある
仕様変更で文字列が変わる
セキュリティ・プライバシーの観点で不安定
だからです。
「デバッグでざっくり見る」くらいに留めておくのが安全です。
navigator.language / languages（ユーザーの言語設定）
console.log(navigator.language); // 例: "ja", "en-US"
console.log(navigator.languages); // 例: ["ja", "en-US", ...]
language は「優先される言語」、languages は「優先順に並んだ言語の配列」です。
多言語対応サイトで、
「最初にどの言語で表示するか」を決めるときなどに使われます。
ただし、これも「ユーザーがブラウザで設定している言語」なので、
必ずしもユーザーの母語とは限らない、という点は意識しておきましょう。
navigator.onLine（オンラインかオフラインか）
console.log(navigator.onLine); // true ならオンライン、false ならオフラインの可能性
onLine は「ネットワークにつながっているかどうか」の目安です。
ただし、これも完璧ではなく、
true でも実際にはサーバーに届かないことがある
false でもローカルネットワークにはつながっているかもしれない
など、あくまで「参考値」です。
オフライン対応のときは、onLine だけに頼らず、実際に fetch してみてエラーを見る、などと組み合わせます。
イベントと組み合わせて「オンライン・オフライン」を扱う
online / offline イベントで状態変化を検知する
navigator.onLine は「今どうか」しか教えてくれませんが、window には「オンラインになった」「オフラインになった」というイベントが飛んできます。
window.addEventListener("online", () => {
console.log("オンラインになりました");
});
window.addEventListener("offline", () => {
console.log("オフラインになりました");
});
これを使うと、
オフラインになったら「オフラインモード」の表示に切り替える
オンラインに戻ったら「同期中…」と表示してサーバーとデータを合わせる
といった UI を作れます。
navigator 単体というより、navigator.onLine と online/offline イベントをセットで使うイメージです。
navigator を入り口にした「機能系 API」
ここから少しだけ、
「navigator 経由で使う代表的な機能」を紹介します。
全部を覚える必要はなく、「こんな入り口があるんだ」と知っておく感じで大丈夫です。
クリップボード API（navigator.clipboard）
ユーザーの許可が必要ですが、navigator.clipboard からクリップボードにアクセスできます。
navigator.clipboard.writeText("コピーしたい文字列")
.then(() => {
console.log("コピーしました");
})
.catch((err) => {
console.error("コピーに失敗しました", err);
});
ボタンを押したら URL をコピーする
コードスニペットをワンクリックでコピーする
といった UI でよく使われます。
Geolocation API（navigator.geolocation）
位置情報も navigator の下にあります。
navigator.geolocation.getCurrentPosition(
(pos) => {
console.log("緯度:", pos.coords.latitude);
console.log("経度:", pos.coords.longitude);
},
(err) => {
console.error("位置情報が取得できませんでした", err);
}
);
もちろん、
ユーザーの許可がないと取得できません。
地図アプリ
近くの店舗検索
位置ベースのゲーム
などで使われますが、
プライバシー的にセンシティブなので、
「本当に必要なときだけ」「理由を明示して」使うのが大前提です。
通知 API（Notification）と組み合わせる
通知自体は Notification という別のオブジェクトですが、
許可状態の確認などで navigator と一緒に使われることがあります。
if (Notification.permission === "default") {
Notification.requestPermission().then((result) => {
console.log("結果:", result);
});
}
ここでは navigator というより、
「ブラウザ機能の一部としての通知」という話ですが、navigator の世界観の延長線上にあるものとして捉えておくとよいです。
navigator と「ユーザーエージェント判定」の話を少し深掘り
「ブラウザ判定」はできるだけ避ける
昔はこういうコードがよくありました。
const ua = navigator.userAgent;
if (ua.includes("iPhone")) {
// iPhone 用の処理
} else if (ua.includes("Android")) {
// Android 用の処理
}
しかし、今は あまり推奨されません。
理由は、
文字列の形式が変わる
ユーザーが偽装できる
ブラウザごとの差分をコードに埋め込むとメンテが地獄
だからです。
代わりに、
「その機能が使えるかどうか」で分岐する
（＝ フィーチャーディテクション）
という考え方が主流です。
例えば、
「クリップボード API が使えるかどうか」を知りたいなら、
if (navigator.clipboard) {
// クリップボード API が使える
} else {
// 使えない環境向けのフォールバック
}
というように、
「ブラウザの種類」ではなく「機能の有無」で判断する のが現代的です。
それでも userAgent を見ることがあるとしたら
どうしても、
特定の古いブラウザだけを避けたい
バグを抱えた特定バージョンをピンポイントで回避したい
といった事情があるときに、navigator.userAgent を使うことがあります。
ただし、それは「最後の手段」であり、
基本は「機能で判定する」というスタンスを忘れないほうがいいです。
小さな実例：オンライン状態とブラウザ情報を表示する
HTML
<div id="info"></div>
JavaScript
const info = document.querySelector("#info");
function render() {
const online = navigator.onLine ? "オンライン" : "オフライン";
const lang = navigator.language;
const ua = navigator.userAgent;
info.innerHTML = `
<p>状態: ${online}</p>
<p>言語: ${lang}</p>
<p>UserAgent: ${ua}</p>
`;
}
window.addEventListener("online", render);
window.addEventListener("offline", render);
render();
ここでは、
navigator.onLine でオンライン・オフライン
navigator.language で言語
navigator.userAgent でブラウザ情報
を表示しつつ、
オンライン・オフラインの変化に応じて表示を更新しています。
「navigator がどんな情報を持っているか」を体感するには、
こういう小さな UI を作ってみるのが一番早いです。
初心者として navigator で本当に掴んでほしいこと
navigator は「ブラウザと環境の情報・機能への入り口」
language / languages / onLine などで、ざっくりした環境情報が取れる
online / offline イベントと組み合わせて、ネットワーク状態に応じた UI を作れる
クリップボード・位置情報など、いろいろな Web API の入り口が navigator の下にある
userAgent でブラウザ判定はできるが、今は「機能の有無で判定する」のが基本スタンス
まずはブラウザのコンソールで、
console.log(navigator);
console.log(navigator.language);
console.log(navigator.onLine);
console.log(navigator.userAgent);
を叩いてみてください。
「自分が今どんな環境でページを開いているのか」を
コードから覗き見る感覚が、一度でも掴めると、navigator はただの謎オブジェクトではなく、
「ブラウザと対話するための窓口」 に見えてくるはずです。