JavaScript ブラウザオブジェクトを 初心者向けに解説、Window、Location、History、Navigator、Screenオブジェクトなども解説｜Javascript入門講座（12）ブラウザオブジェクトモデル（BOM）の概念と役割

JavaScript
2021.08.10
この記事は約17分で読めます。

JavaScript ブラウザオブジェクトを 初心者向けに解説、Window、Location、History、Navigator、Screenオブジェクトなども解説｜Javascript入門講座（12）ブラウザオブジェクトモデル（BOM）の概念と役割のPodcast

下記のPodcastは、Geminiで作成しました。

はじめに

ウェブ開発において、JavaScriptは単に計算を行ったりデータを処理したりするだけの言語ではありません。JavaScriptがその真価を発揮するのは、ブラウザという実行環境と密接に連携し、ユーザーの操作に応じて画面を動的に変化させる時です。このブラウザとの対話を実現するための仕組みが「ブラウザオブジェクトモデル（BOM: Browser Object Model）」です 。BOMは、ウェブブラウザ自体を一つの大きなオブジェクト（物の集まり）として捉え、その中にある様々な機能をJavaScriptから操作できるようにしたものです。例えば、新しいウィンドウを開く、現在のURLを取得する、閲覧履歴を前後させる、ユーザーの画面サイズを調べるといった操作はすべてBOMを通じて行われます 。BOMには公式な標準規格が存在しませんが、主要なブラウザメーカーが互換性を保つ形で実装を進めてきた歴史があり、現在では事実上の標準として広く利用されています 。JavaScriptを学ぶ上で、BOMと混同されやすい概念に「DOM（Document Object Model）」があります。初心者のうちはこの二つの違いを明確に理解することが重要です。DOMは、ウェブページの中に表示されている「HTML文書そのもの」を操作するための仕組みです。これに対し、BOMはHTML文書を包み込んでいる「ブラウザという器」を操作するための仕組みです 。以下の表は、それぞれの役割の違いを整理したものです。

項目ブラウザオブジェクトモデル (BOM)ドキュメントオブジェクトモデル (DOM)
操作対象ブラウザウィンドウ、URL、履歴、デバイス情報HTML要素、属性、テキスト、スタイル
最上位オブジェクトwindowdocument
主な役割ブラウザ環境の管理と制御ページコンテンツの動的更新
標準化状況各ブラウザによる実装（デファクトスタンダード）W3Cによる国際標準規格

BOMの階層構造において、すべての頂点に君臨するのが window オブジェクトです。document オブジェクトも実は window オブジェクトのプロパティの一つとして存在しており、BOMはDOMを包含する大きな枠組みであると考えることができます 。

Windowオブジェクト：すべての操作の起点

window オブジェクトは、ブラウザのタブやウィンドウを象徴する最も重要なオブジェクトであり、JavaScriptの実行環境における「グローバルオブジェクト」としての役割を担っています 。JavaScriptで変数を宣言したり関数を作成したりすると、それらは暗黙的に window オブジェクトのプロパティやメソッドとして登録されます 。

グローバルスコープと省略ルール

例えば、var message = "Hello"; と定義した場合、それは window.message としても参照可能です。同様に、普段使用する console.log() や alert()、setTimeout() といった関数も、本来は window.console.log() のように記述すべきものですが、window は省略しても良いというルールがあるため、簡潔に記述できるのです 。

ウィンドウのサイズと表示領域の制御

ブラウザのサイズに関する情報を取得することは、レスポンシブデザインや動的なスクロール演出を実装する上で欠かせません。現代のブラウザでは、ツールバーなどを含む「ウィンドウ全体」のサイズと、実際にコンテンツが表示される「表示領域（ビューポート）」のサイズを区別して取得できます 。

プロパティ取得できる内容
innerWidthコンテンツが表示される領域の幅（スクロールバー含む）
innerHeightコンテンツが表示される領域の高さ（スクロールバー含む）
outerWidthウィンドウ全体の幅（枠組みやツールバーを含む）
outerHeightウィンドウ全体の高さ（枠組みやツールバーを含む）
scrollXページが右方向にどれだけスクロールされているか（ピクセル単位）
scrollYページが下方向にどれだけスクロールされているか（ピクセル単位）

対話型メソッドとタイマー

window オブジェクトには、ユーザーにメッセージを表示したり、処理を遅延させたりするための便利なメソッドが豊富に用意されています 。

ダイアログの表示: alert() で警告を表示し、confirm() でユーザーに「OK」か「キャンセル」の選択を促し、prompt() で自由な入力を受け取ることができます 。

新しいウィンドウの操作: window.open(url) を使用すると、新しいタブやウィンドウで指定したページを開くことができます。ただし、2026年現在のブラウザではセキュリティとユーザー体験の観点から、ユーザーのクリック操作などの直接的なイベント内でのみ呼び出しが許可される「ポップアップブロック」が厳格に適用されています 。

スケジューリング: setTimeout() は指定したミリ秒後に一度だけ処理を実行し、setInterval() は指定した間隔で処理を繰り返します。これらは、一定時間後に閉じるバナーや、リアルタイムの時計表示などに利用されます。

Locationオブジェクト：URLの解析と遷移

location オブジェクトは、現在表示されているページのURL情報を管理し、ページ移動を制御するためのインターフェースを提供します。このオブジェクトは window.location または document.location を介してアクセス可能です 。

URLの構成要素を分解する

一つのURLには多くの情報が含まれています。location オブジェクトの各プロパティを参照することで、必要な部分だけを取り出すことができます。例えば、https://yanai-ke.com:443/javascript012/?query=latest#section1 というURLの場合、以下のように分解されます 。

href: URL全体の文字列。これに新しいURLを代入すると、ブラウザはそのページへ遷移します 。

protocol: 通信の種類を示す部分（例: https:） 。

hostname: ドメイン名（例: yanai-ke.com） 。

port: ポート番号（例: 443） 。

host: ホスト名とポート番号を組み合わせたもの 。

pathname: サーバー内のファイルの場所を示すパス（例: /javascript012/） 。

search: クエリパラメータと呼ばれる、サーバーへ送るデータ（例: ?query=latest） 。

hash: ページ内の特定の場所を指すアンカー（例: #section1） 。

ナビゲーションを制御するメソッド

ページを移動したり更新したりする際、location オブジェクトのメソッドを使用することで、履歴の残し方などを細かく制御できます 。

メソッド動作特徴
assign(url)指定したURLに移動するブラウザの「戻る」ボタンで前のページに戻ることができる
replace(url)現在のページを新しいURLで上書きする履歴が上書きされるため、ユーザーは「戻る」ボタンで遷移前のページに戻れない
reload()現在のページを再読み込みするブラウザの「更新」ボタンをクリックした時と同じ動作をする

セキュリティ上の重要な注意点として、location オブジェクトは「同一オリジンポリシー」の影響を受けます。異なるドメインのページのURLを読み取ることはプライバシー保護の観点から制限されることがありますが、他のページへ移動させる（代入する）操作は許可されています 。

Historyオブジェクト：セッション履歴の旅

history オブジェクトは、現在のタブまたはフレーム内での閲覧履歴（セッション履歴）を管理します 。ユーザーが過去に訪れたページに戻ったり、逆に進んだりといったブラウザ特有の操作をプログラムから再現できます。

基本的な移動操作

history.back(): 履歴を一つ戻ります。ブラウザの戻るボタンと同じです 。

history.forward(): 履歴を一つ進みます。進むボタンと同じです 。

history.go(n): 現在のページを 0 として、相対的な位置を指定して移動します。-1 なら一つ戻り、2 なら二つ進みます 。

history.length: 現在のタブで積み重なっている履歴の総数を取得できます。新しいタブを開いた直後の値は 1 です 。

モダンなウェブアプリと履歴管理

現代のシングルページアプリケーション（SPA）では、ページ全体をリロードせずにコンテンツを切り替えることが一般的です。この際、URLだけを適切に変化させて、ユーザーがブラウザの戻るボタンを使えるようにするために pushState() や replaceState() が利用されます 。

pushState(state, title, url): 履歴スタックに新しいエントリーを追加します。URLは変わりますが、画面の再読み込みは発生しません 。

replaceState(state, title, url): 現在の履歴を新しい情報で書き換えます 。

これにより、ユーザーはあたかも複数のページを遷移しているかのような体験を得つつ、実際には高速なアプリケーション動作を享受できます。なお、セキュリティ上の理由から、スクリプトが履歴内の他サイトのURLを読み取ることは禁止されています 。

Navigatorオブジェクト：ブラウザと環境の識別

navigator オブジェクトは、ユーザーが使用しているブラウザの名称、バージョン、OSの種類、およびデバイスが持つ様々な機能に関する情報を保持しています 。

User-Agent Client Hints（UA-CH）への移行

従来、ブラウザの判別には navigator.userAgent という長い文字列が使われてきました。しかし、この文字列は情報が過剰に含まれており、ユーザーの追跡（フィンガープリント）に悪用される懸念がありました 。そのため、2026年現在は、必要な情報だけをサーバーがリクエストして取得する「User-Agent Client Hints」という新しい仕組み（navigator.userAgentData）が主流となっています 。

便利な機能とプロパティ

navigator オブジェクトを通じて、ブラウザが持つ高度な機能にアクセスできます。

言語設定 (language): ユーザーがブラウザに設定している優先言語を返します（例: ja） 。

オンライン状態 (onLine): デバイスが現在ネットワークに接続されているかを真偽値で示します 。

位置情報サービス (geolocation): ユーザーの許可を得た上で、GPSなどの情報をもとに現在地（緯度・経度）を取得できます 。

クリップボード (clipboard): テキストをコピーしたり、貼り付けたりする操作を制御します 。

共有機能 (share): スマートフォンなどで、他のアプリにURLやテキストを共有するOS標準のメニューを呼び出します 。

ハードウェア情報: hardwareConcurrency でCPUの論理コア数を、deviceMemory でメモリの概算容量を知ることができます 。

Screenオブジェクト：ディスプレイの物理情報の取得

screen オブジェクトは、ブラウザを表示しているモニター（ディスプレイ）の物理的な属性に関する情報を提供します 。これはウィンドウのサイズ（window.innerWidth）とは異なり、デバイス自体のスペックを指します。

主要なプロパティ

width / height: 画面全体の幅と高さ（ピクセル単位） 。

availWidth / availHeight: タスクバーなどのOSの表示物（UI）を除いた、ブラウザがフルサイズで表示できる領域のサイズ 。

colorDepth / pixelDepth: 画面が表現できる色のビット深度 。

orientation: デバイスが縦向き（Portrait）か横向き（Landscape）かを判定したり、向きが変わったことを検知したりできます 。

マルチモニターへの対応（Window Management API）

デスクトップPCなどで複数のモニターを接続している環境において、それぞれのモニターの情報を個別に取得し、適切な場所にウィンドウを配置するための機能が「Window Management API」です 。2026年現在、window.getScreenDetails() を呼び出すことで、接続されているすべてのモニターの詳細な配置情報を取得できるようになっています 。これにより、プレゼンテーション資料を外部モニターに全画面表示しつつ、手元のモニターに操作パネルを表示するといった高度な制御が可能になります。この機能を利用するにはセキュリティ上の理由から HTTPS 環境が必要であり、ユーザーの明示的な許可が必要です 。

2026年の新標準：Navigation API

ブラウザオブジェクトの歴史において、近年最も大きな変化を遂げたのが「Navigation API」の登場です。これまで history オブジェクトや location オブジェクトで行ってきた操作を、現代的なウェブアプリケーション（特にSPA）の設計に合わせて再構築したものです 。

なぜ Navigation API が必要なのか

これまでの History API には、URLの変更を簡単に検知するイベントが不足していたり、ブラウザの「戻る」操作をインターセプト（横取り）して独自の処理を挟むのが難しかったりという課題がありました 。Navigation API はこれらの問題を解決するために、以下の機能を提供します。

navigate イベント: リンクのクリック、フォームの送信、履歴の前後移動など、あらゆるナビゲーションを一箇所で集中管理できます 。

intercept() メソッド: ナビゲーションを一時停止し、データの読み込み中にローディングアニメーションを表示してから表示を切り替えるといった制御が簡単に行えます 。

履歴の可視化: 現在のタブ内での正確な履歴リストを取得でき、各エントリーに独自の「状態（state）」を持たせることができます 。

2026年1月時点でのブラウザサポート状況は非常に良好で、Chrome 102、Edge 102、Firefox 147、Safari 26.2 以降でフルサポートされています 。これから JavaScript を本格的に学ぶ方は、従来の History API だけでなく、この新しい Navigation API の動向にも注目しておくと良いでしょう。

セキュリティ、プライバシー、およびユーザー体験

ブラウザオブジェクトを操作する際には、常にセキュリティとユーザーのプライバシーを意識する必要があります。BOMには強力な権限を持つ機能が多いため、ブラウザ側で厳しい制約が設けられています。

同一オリジンポリシーの壁

JavaScriptは、自分が属しているサイトと異なるオリジン（ドメイン、プロトコル、ポート番号）のデータにアクセスすることを制限されています。これは「同一オリジンポリシー（Same-Origin Policy）」と呼ばれ、悪意のあるサイトが別のタブで開いている銀行サイトの情報を盗んだり、URLを書き換えたりするのを防ぐための防波堤となっています 。

ユーザーの意思とパーミッション

位置情報の取得（navigator.geolocation）、カメラ・マイクの使用、通知の表示、マルチスクリーンの詳細情報取得などは、すべて「パーミッション（許可）」の対象です 。ブラウザはこれらの機能を実行する前に必ずユーザーにダイアログを表示し、許可を求めます。開発者は navigator.permissions.query() を使用して、現在の許可状態を確認し、拒否された場合に適切な代替案を提示するような実装が求められます 。

セキュアコンテキスト（HTTPS）の義務化

近年、高度なブラウザ機能の多くは「セキュアコンテキスト（HTTPS）」環境でしか動作しないようになっています 。ローカル環境（localhost）を除き、通信が暗号化されていないHTTPサイトでは、geolocation や userAgentData、Window Management API といった主要なBOM機能は無効化されるか、制限されます。

参考資料

1. Window - Web APIs | MDN, https://developer.mozilla.org/en-US/docs/Web/API/Window

2. Window: location property - Web APIs | MDN, https://developer.mozilla.org/en-US/docs/Web/API/Window/location

3. Window: open() method - Web APIs | MDN, https://developer.mozilla.org/en-US/docs/Web/API/Window/open

4. Window: window property - Web APIs | MDN, https://developer.mozilla.org/en-US/docs/Web/API/Window/window

5. Window: history property - Web APIs | MDN, https://developer.mozilla.org/en-US/docs/Web/API/Window/history

6. Document: location property - Web APIs | MDN, https://developer.mozilla.org/en-US/docs/Web/API/Document/location

7. Geolocation API - Web APIs | MDN, https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API

8. Location: origin property - Web APIs | MDN, https://developer.mozilla.org/en-US/docs/Web/API/Location/origin

9. Location - Web APIs | MDN, https://developer.mozilla.org/en-US/docs/Web/API/Location

10. History API - Web APIs | MDN, https://developer.mozilla.org/en-US/docs/Web/API/History_API

11. History: length property - Web APIs | MDN, https://developer.mozilla.org/en-US/docs/Web/API/History/length

12. Navigator - Web APIs | MDN, https://developer.mozilla.org/en-US/docs/Web/API/Navigator

13. Navigation API - Web APIs | MDN, https://developer.mozilla.org/en-US/docs/Web/API/Navigation_API

14. Navigation - Web APIs | MDN, https://developer.mozilla.org/en-US/docs/Web/API/Navigation

15. Navigator: onLine property - Web APIs | MDN, https://developer.mozilla.org/en-US/docs/Web/API/Navigator/onLine

16. Window: screen property - Web APIs | MDN, https://developer.mozilla.org/en-US/docs/Web/API/Window/screen

17. Screen - Web APIs | MDN, https://developer.mozilla.org/en-US/docs/Web/API/Screen

18. Window Management API - Web APIs | MDN, https://developer.mozilla.org/en-US/docs/Web/API/Window_Management_API

19. Window Management API specification, https://www.w3.org/TR/window-management/

20. Browser Object Model (BOM) in JavaScript, https://medium.com/@yuvaraj.io/lesson-38-browser-object-model-bom-in-javascript-cac11d4fb030

21. JavaScript BOM vs DOM explained for beginners, https://www.scholarhat.com/tutorial/javascript/dom-bom

22. Understanding BOM and DOM in JavaScript, https://www.scribd.com/document/841926962/DOM

23. User-Agent Client Hints - DeviceAtlas, https://deviceatlas.com/resources/user-agent-client-hints

24. Modern JavaScript BOM tutorial examples 2026, https://iqratechnology.com/academy/javascript-training/js-bom/

25. Navigation API support status 2026, https://caniuse.com/mdn-api_navigation

26. Permissions-Policy: window-management - HTTP | MDN, https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Permissions-Policy/window-management

コメント

タイトルとURLをコピーしました