【JavaScript】ブラウザとwindowオブジェクトを解説｜Webの基礎

記事内には広告が含まれます

2026年8月4日

はじめに

前回の記事では、JavaScriptとは何か、そして<script>タグを使った基本的な書き方について解説しました。

今回は、JavaScriptが動作する土台となっている「ブラウザ」そのものについて解説します。JavaScriptは「Webページ（HTML）」だけでなく、それを表示している「ブラウザ」自体の情報を取得したり操作したりすることもできます。この仕組みを理解しておくと、後の記事で解説する「ダイアログボックス」や「イベント」の内容もスムーズに理解できるようになります。

windowオブジェクトとは？

JavaScriptからブラウザを操作する際の頂点（最上位）にあたるのがwindowオブジェクトです。

ブラウザでJavaScriptを実行すると、その実行環境（今開いているタブ・ウィンドウ）全体を表すwindowという特別なオブジェクトが自動的に用意されます。このwindowオブジェクトの中に、ブラウザに関するさまざまな情報や機能がぶら下がっている、というイメージです。

windowオブジェクトのように、ブラウザの操作に関するオブジェクトをまとめてBOM（Browser Object Model）と呼びます。Webページの中身（タグの構造）を扱う「DOM（Document Object Model）」とは役割が異なるので、区別して覚えておきましょう。

BOMの主な構成

windowオブジェクトの配下には、主に次のようなオブジェクトがあります。

オブジェクト	役割
`window.document`	Webページの中身（HTML）を扱う（＝DOM）
`window.navigator`	ブラウザの種類・バージョンなどの情報を扱う
`window.location`	現在表示しているURLの情報を扱う
`window.history`	ブラウザの閲覧履歴（進む・戻る）を扱う
`window.screen`	ディスプレイ（画面）の解像度などを扱う

このうちdocument（DOM）については内容が多いため、次々回以降の記事で改めて詳しく解説します。今回はそれ以外のnavigator・location・history・screenを中心に見ていきます。

windowは省略できる

windowオブジェクトはJavaScriptの実行環境そのものにあたるグローバルオブジェクトのため、window.の部分は省略して書くことができます。

// どちらも同じ意味
console.log(window.location.href);
console.log(location.href);

普段のコードではwindow.を省略した書き方をよく見かけますが、内部的には常にwindowオブジェクトを経由しているということを覚えておきましょう。

主要なブラウザオブジェクト

location（URL情報）

locationオブジェクトは、現在表示しているページのURLに関する情報を持っています。

console.log(location.href);     // 現在のURL全体
console.log(location.hostname); // ドメイン名（例: www.kurumico.com）
console.log(location.pathname); // パス部分（例: /web-basic-js-02/）

location.hrefに別のURLを代入すると、そのページへ移動（ページ遷移）させることもできます。

location.href = "https://www.kurumico.com/";

navigator（ブラウザ情報）

navigatorオブジェクトは、閲覧に使っているブラウザやOSに関する情報を持っています。

console.log(navigator.userAgent); // ブラウザ・OSの情報（文字列）
console.log(navigator.language);  // ブラウザの言語設定（例: ja）

navigator.userAgentを使えばブラウザの種類を判定できますが、値の書式はブラウザやバージョンによって変わることがあり、判定方法として非推奨とされています。「特定の機能が使えるかどうか」を調べたい場合は、userAgentで判定するのではなく、その機能自体が存在するかどうかを直接チェックする方法が推奨されています。

history（閲覧履歴）

historyオブジェクトは、ブラウザの「戻る」「進む」に関する操作を扱います。

history.back();    // 1つ前のページに戻る
history.forward();  // 1つ先のページに進む

screen（画面情報）

screenオブジェクトは、利用者のディスプレイの解像度など画面自体の情報を持っています。

console.log(screen.width);  // 画面の横幅（px）
console.log(screen.height); // 画面の縦幅（px）

なお、ブラウザの表示領域（ウィンドウの内側のサイズ）を調べたい場合は、screenではなくwindow.innerWidth・window.innerHeightを使います。両者は似ていますが指しているものが異なるので注意しましょう。

console.log(window.innerWidth);  // ブラウザの表示領域の横幅
console.log(window.innerHeight); // ブラウザの表示領域の縦幅

実務サンプル（画面幅に応じてメッセージを表示）

window.innerWidthを使い、画面の横幅に応じて表示するメッセージを切り替えるサンプルです。

HTML

<p id="deviceMessage"></p>

<script src="main.js"></script>

JavaScript（main.js）

const message = document.getElementById("deviceMessage");

if (window.innerWidth < 768) {
    message.textContent = "スマートフォンで閲覧中です";
} else {
    message.textContent = "PC・タブレットで閲覧中です";
}

window.innerWidthで取得した画面幅の数値をもとに条件分岐し、document.getElementById()で取得した要素のテキストを書き換えています。このように、ブラウザから取得した情報をもとにページの表示を変える、という使い方はレスポンシブなサイト作りでもよく利用されます。