JavaScript ブラウザオブジェクト实例: ウェブページ操作を掌握する鍵
インタラクティブで動的なウェブサイトを構築する上で、JavaScriptは必要不可欠なツールです。特に、ブラウザオブジェクトモデル（BOM）は、ブラウザウィンドウの制御、画面情報の取得、履歴操作など、ウェブサイトの表現力を格段に高める機能を提供します。
本稿では、BOMの中核をなす主要なオブジェクト、Window、Navigator、Screen、History、Locationについて、具体的なコード例を交えながら解説し、JavaScriptを用いたウェブページ操作の基礎を習得します。
1. Window オブジェクト: ブラウザウィンドウの司令塔
Windowオブジェクトは、JavaScriptにおいて最も重要なオブジェクトの一つであり、ブラウザウィンドウそのものを表します。グローバルオブジェクトとして、ウェブページ全体を統括する役割を担います。
よく使うプロパティ
| プロパティ | 説明 |
| innerHeight | ブラウザウィンドウの表示領域の高さ (ピクセル単位) |
| innerWidth | ブラウザウィンドウの表示領域の幅 (ピクセル単位) |
| outerHeight | ブラウザウィンドウの全体の高さ (ピクセル単位) |
| outerWidth | ブラウザウィンドウの全体の幅 (ピクセル単位) |
| screenX | ウィンドウの左上角の、画面の左上角からの水平距離 (ピクセル単位) |
| screenY | ウィンドウの左上角の、画面の左上角からの垂直距離 (ピクセル単位) |
| location | 現在のURL情報 ( href、protocol、hostname などのプロパティを含む) |
よく使うメソッド
| メソッド | 説明 |
| open() | 新しいブラウザウィンドウを開く |
| close() | 現在のブラウザウィンドウを閉じる |
| alert() | アラートダイアログを表示 |
| confirm() | 確認ダイアログを表示 |
| prompt() | 入力ダイアログを表示 |
| setTimeout() | 指定時間後に処理を実行 |
| setInterval() | 指定間隔で処理を繰り返し実行 |
例
<button onclick="window.alert('こんにちは、世界！')">クリックしてアラートを表示</button>2. Navigator オブジェクト: ブラウザ自身を知る
Navigator オブジェクトは、ブラウザの種類、バージョン、OSなど、ブラウザ自身に関する情報を提供します。
よく使うプロパティ
| プロパティ | 説明 |
| appName | ブラウザの名前 |
| appVersion | ブラウザのバージョン情報 |
| platform | ブラウザの実行プラットフォーム |
| userAgent | ブラウザのユーザーエージェント文字列 |
例
<p>ブラウザ名: <script>document.write(navigator.appName)</script></p>3. Screen オブジェクト: 画面情報を取得
Screen オブジェクトは、ユーザーの画面の解像度、色深度などの情報を提供します。レスポンシブデザインや、画面サイズに合わせたコンテンツ表示などに役立ちます。
よく使うプロパティ
| プロパティ | 説明 |
| width | 画面の幅 (ピクセル単位) |
| height | 画面の高さ (ピクセル単位) |
| availWidth | 利用可能な画面の幅 (タスクバーなどを除く) (ピクセル単位) |
| availHeight | 利用可能な画面の高さ (タスクバーなどを除く) (ピクセル単位) |
| colorDepth | 画面の色深度 |
例
<p>画面解像度: <script>document.write(screen.width + ' x ' + screen.height)</script></p>4. History オブジェクト: browsing の履歴を操作
History オブジェクトは、ユーザーが訪れたページの履歴を管理します。ページの「戻る」、「進む」機能などを実装する際に使用します。
よく使うメソッド
| メソッド | 説明 |
| back() | 一つ前のページに戻る |
| forward() | 一つ先のページに進む |
| go() | 指定した数の履歴を移動する |
例
<button onclick="history.back()">戻る</button>5. Location オブジェクト: URL を自由に操る
Location オブジェクトは、現在のURLに関する情報を提供し、新しいURLへのジャンプなどを実行できます。
よく使うプロパティ
| プロパティ | 説明 |
| href | URL全体 |
| protocol | 使用しているプロトコル (例: "https:") |
| hostname | ホスト名 (例: "www.example.com") |
| pathname | パス名 (例: "/index.html") |
よく使うメソッド
| メソッド | 説明 |
| reload() | 現在のページを再読み込みする |
| assign() | 指定したURLにジャンプする |
例
<button onclick="location.assign('https://www.example.com')">Example ウェブサイトに移動</button>6. まとめ: JavaScript でリッチなウェブ体験を
JavaScriptのブラウザオブジェクトモデル（BOM）を理解することで、ブラウザをより深く制御し、ユーザーにリッチなウェブ体験を提供することができます。
よくある質問
Q: BOM と DOM の違いは何ですか？
A: BOM (ブラウザオブジェクトモデル) は、ブラウザウィンドウ自体を操作するためのモデルです。DOM (Document Object Model) は、HTML や XML 文書を操作するためのモデルです。
Q: ユーザーのブラウザの種類を判別するにはどうすればよいですか？
A: navigator.userAgent プロパティでブラウザの種類を判別できます。ただし、この方法は完全ではなく、ユーザーエージェントは変更される可能性があるので注意が必要です。
Q: ページを閉じる際に確認ダイアログを表示するにはどうすればよいですか？
A: beforeunload イベントで確認メッセージを表示できます。ただし、使いすぎるとユーザーの邪魔になる可能性があるので、注意が必要です。