目次
🌐 はじめに：「ブラウザオブジェクト」の扉を開ける
前回の記事では、言語そのものに備わっている「組み込みオブジェクト（Built-in Objects）」を学びました。
今回は、JavaScriptが“実行される環境”、つまり ブラウザそのものを操作できる世界 に足を踏み入れます。
この世界では、例えば：
- 「現在のURL」を取得・変更できる
- 「閲覧履歴」を操作できる
- 「ブラウザ情報（ユーザーの環境）」を得られる
これらはすべて BOM（Browser Object Model） と呼ばれる仕組みの一部です。
JavaScriptで“ただウェブページを操作する”だけでなく、“そのウェブページが動いているブラウザを操作する”“環境を読み取る”というステップに進むための知識です。
1. BOMとは？ ―― “ブラウザを操作／監視するためのオブジェクト群”
1-1. 概念整理
- 通常、JavaScriptではページ中のHTMLを操作するために Document Object Model（DOM） を使います。
- しかし、ブラウザが提供する「ページ外の情報」「ブラウザ内の機能」も含めて操作できるのがBOMです。
- BOMに公式の仕様があるわけではなく、ブラウザごとに若干差異があります。ウィキペディア
1-2. 全体像
window
├─ navigator
├─ location
├─ history
├─ screen
└─ … 他ブラウザ機能オブジェクト
すべてのBOMオブジェクトは最上位の window オブジェクトの下にあります。
2. 主要なブラウザオブジェクトとその使い方
2-1. window – 全ての入り口
console.log(window.innerWidth, window.innerHeight); // ビューポートのサイズ
alert("JavaScriptからの挨拶"); // ダイアログを表示
windowは最上位のオブジェクトで、グローバル変数や関数も実はwindowのプロパティ・メソッドです。- 実務では、画面の幅・高さを取得してレスポンシブ処理を行ったり、ポップアップ制御・タブ操作を実装したりします。
2-2. navigator – ユーザーの環境を知る
console.log(navigator.userAgent); // ブラウザの識別文字列
console.log(navigator.language); // ブラウザ設定の言語
console.log(navigator.onLine); // オンラインかどうか
- ユーザーのブラウザ・OS・言語などの情報を取得できます。
- ただし、「ブラウザ判定」に頼りすぎると非互換性の原因になるため、機能検出（feature detection）が推奨されます。
2-3. location – URLを読む・変える
console.log(location.href); // 現在のURL
location.href = "https://example.com"; // ページ移動
console.log(location.search); // クエリ文字列（?key=...）
- URLの情報を取得・書き換えでき、シングルページアプリ（SPA）では履歴操作と併せて活躍します。
location.replace()を使えば「履歴を残さずリダイレクト」が可能。
2-4. history – 履歴操作
history.back(); // 前のページへ
history.forward();
history.go(-2); // 2つ前へ
- Webアプリで「戻る／進む」を制御したり、SPAでURLは変わるがページ遷移に見せない場合にも使われます。
2-5. screen – 画面情報を取得
console.log(screen.width, screen.height); // 画面解像度
- レイアウトの最適化や、大きな画面・小さな画面で表示を変える際に利用されます。
3. 実務で使えるシナリオとコード例
3-1. モバイル／タブレット判定によるUI切り替え
if (navigator.userAgent.match(/Mobi|Android/i)) {
document.body.classList.add("is-mobile");
}
3-2. URLクエリを読み取ってページを変える
const params = new URLSearchParams(location.search);
const mode = params.get("mode");
if (mode === "dark") {
document.body.classList.add("theme-dark");
}
3-3. 履歴を使った「戻る用ボタン」実装
document.getElementById("btn-back").addEventListener("click", () => {
if (history.length > 1) {
history.back();
} else {
location.href = "/";
}
});
4. 初学者がつまずきやすいポイント
windowを省略しても動くが、背後でwindowのプロパティとして扱われていることを意識する。- ユーザーエージェント（
navigator.userAgent）だけでブラウザ判定をしない。将来的な非互換の原因になります。 - SPAやモバイル対応では、
history.pushState／replaceStateとlocationの使い方を知ることが重要。 - 画面幅を判定してレイアウトを切り替える場合、CSSメディアクエリと併用する方が一貫性がある。
5. 次のステップへ：DOMの世界へ進もう
BOMを使いこなせるようになると、ブラウザそのものの環境が読めて・制御できるようになります。
次はいよいよ、ページ内の HTML要素を動的に操作する「DOM（Document Object Model）」の世界 へ進みます。
