JavaScript | Web API：ウィンドウ・ブラウザ制御 － window オブジェクト

JavaScript JavaScript
スポンサーリンク

window オブジェクトは「ブラウザタブそのもの」を表す巨大な入り口

JavaScript でいう window は、
「今あなたが見ているブラウザのタブ（ウィンドウ）そのものを表すオブジェクト」 です。

「ブラウザのサイズは？」
「URL は？」
「アラート出したい」
「別タブを開きたい」
「タイマーを使いたい」

こういう「ブラウザに関わるあれこれ」は、ほぼ全部 window の下にぶら下がっています。

しかも、ブラウザ上の JavaScript では、
window は「グローバルオブジェクト」として特別扱いされていて、
window.alert() と書いても alert() と書いても同じ意味になります。

「ブラウザの世界の一番上の親」が window だ、とイメージしておくといいです。

window とグローバルオブジェクトの関係

なぜ alert() は window.alert() と同じなのか

次の 2 つは、実はまったく同じです。

alert("こんにちは");
window.alert("こんにちは");
JavaScript

alert は window のプロパティなので、
本当は window.alert と書くのが正確です。

でも、ブラウザ環境では
「グローバル変数・関数は window のプロパティとしても見える」
というルールがあるので、短く alert() と書けます。

同じように、次のようなものも全部 window のプロパティです。

console.log(window.setTimeout === setTimeout); // true
console.log(window.document === document);     // true
JavaScript

「グローバルに見えているものの多くは、実は window の子どもたち」
という感覚を持っておくと、構造が見えやすくなります。

自分で作ったグローバル変数も window にぶら下がる

例えば、こう書くとします。

var x = 10;
console.log(window.x); // 10
JavaScript

var で宣言したグローバル変数は、
window.x としてもアクセスできます。

一方で、let や const で宣言したグローバル変数は、
window にはぶら下がりません。

let y = 20;
console.log(window.y); // undefined
JavaScript

この違いは少し高度な話ですが、
「var は window に乗る、let / const は乗らない」
ということだけ覚えておけば十分です。

window と document の違いをはっきりさせる

window は「ブラウザの枠」、document は「ページの中身」

よく混ざるのが window と document です。

ざっくり言うと、

window
ブラウザのタブ・ウィンドウそのもの
URL、履歴、サイズ、タイマー、アラートなど

document
そのタブの中に表示されている HTML 文書
DOM（要素の取得・追加・削除・書き換え）など

例えば、こういうイメージです。

ブラウザの枠（window）の中に
ページの紙（document）が 1 枚入っている

window は「外側」、document は「中身」です。

例：タイトルと URL を見る

console.log(document.title); // ページタイトル
console.log(window.location.href); // 現在のURL
JavaScript

タイトルは「文書の情報」なので document。
URL は「ブラウザのアドレスバーの情報」なので window.location。

このように、
「それは枠の話か？中身の話か？」
と考えると、どっちを触るべきかが分かりやすくなります。

window のよく使うプロパティ・メソッドをざっくり体験する

アラート・確認ダイアログ・入力ダイアログ

window.alert("こんにちは"); // 単純なメッセージ
const ok = window.confirm("本当に削除しますか？"); // OK/キャンセル
const name = window.prompt("名前を入力してください"); // テキスト入力
JavaScript

これらは全部 window のメソッドです。
alert / confirm / prompt は、
「とりあえず動きを確認したいとき」にも便利です。

画面サイズやスクロール位置

console.log(window.innerWidth, window.innerHeight); // 表示領域の幅・高さ
console.log(window.scrollX, window.scrollY);        // スクロール量
JavaScript

レスポンシブ対応や、
「一定位置までスクロールしたら何かする」
といった処理を書くときに使います。

URL や履歴の操作（location / history）

console.log(window.location.href); // 現在のURL
// window.location.href = "https://example.com"; // 別のページへ遷移

console.log(window.history.length); // 履歴の長さ
// window.history.back();  // 戻る
// window.history.forward(); // 進む
JavaScript

SPA（シングルページアプリ）などでは、
history.pushState などを使って URL を書き換えたりもしますが、
まずは「今の URL は window.location から取れる」と覚えておけば OK です。

window とタイマー・イベントの関係

タイマー系は全部 window のメソッド

これまで出てきたタイマーたちも、
実は全部 window のメソッドです。

window.setTimeout(() => {
  console.log("1秒後");
}, 1000);

window.setInterval(() => {
  console.log("毎秒");
}, 1000);

window.requestAnimationFrame((time) => {
  console.log("描画タイミング", time);
});
JavaScript

普段は setTimeout とだけ書きますが、
「本当は window.setTimeout なんだ」と知っておくと、
window が「ブラウザの機能の入り口」であることがより実感できます。

ウィンドウ自体のイベント（resize / scroll など）

window 自体にもイベントが発生します。

window.addEventListener("resize", () => {
  console.log("ウィンドウサイズが変わりました", window.innerWidth, window.innerHeight);
});

window.addEventListener("scroll", () => {
  console.log("スクロールしました", window.scrollY);
});
JavaScript

画面サイズに応じてレイアウトを変えたり、
スクロール位置に応じてアニメーションを始めたりするのは、
このあたりのイベントと組み合わせることが多いです。

window を意識すると「グローバル汚染」を避けやすくなる

なんでもかんでもグローバルに置くと window がごちゃごちゃになる

例えば、こういうコード。

var count = 0;

function increment() {
  count++;
}
JavaScript

これは window.count と window.increment を増やしているのと同じです。

スクリプトが増えてくると、

同じ名前を別のファイルでも使ってしまう
→ 上書きされる
→ 意味不明なバグ

という「グローバル汚染」が起きます。

window が「グローバルの入れ物」だと分かっていると、
「ここに何でも突っ込むのは危ないな」という感覚が持てます。

名前空間として window の下にまとめる、という設計もある

少し進んだ話ですが、
「自分のアプリ用の名前空間」を window の下に作ることもあります。

window.MyApp = window.MyApp || {};

window.MyApp.counter = {
  value: 0,
  increment() {
    this.value++;
  },
};
JavaScript

こうすると、

window の直下にバラバラに置くのではなく
MyApp の下にまとめて管理できる

というメリットがあります。

モダンな開発では ES Modules を使うことが多いですが、
「window の下に自分の領域を作る」という発想は、
グローバルとどう付き合うかを考えるうえで良い練習になります。

実用的な小さな例：ウィンドウサイズに応じてメッセージを変える

HTML

<div id="info"></div>

JavaScript

const info = document.querySelector("#info");

function updateSize() {
  const w = window.innerWidth;
  const h = window.innerHeight;
  info.textContent = `幅: ${w}px, 高さ: ${h}px`;

  if (w < 600) {
    info.textContent += "（スマホサイズっぽい）";
  } else {
    info.textContent += "（PCサイズっぽい）";
  }
}

window.addEventListener("resize", updateSize);
updateSize();
JavaScript

ここで使っているのは、

window.innerWidth / innerHeight でサイズ取得
window.addEventListener("resize", ...) でサイズ変更を監視

という、window の典型的な使い方です。

「ブラウザの枠の情報を取って、それに応じて UI を変える」
というのは、実務でもよくあるパターンです。

初心者として window オブジェクトで本当に掴んでほしいこと

window は「ブラウザタブ（ウィンドウ）そのもの」を表すオブジェクト
グローバルに見える多くのもの（alert, setTimeout, document など）は実は window のプロパティ
window は「枠」、document は「中身」という役割分担
タイマー、ダイアログ、URL、履歴、サイズ、スクロールなど「ブラウザの機能の入り口」が window に集まっている
グローバル変数や関数は window にぶら下がるので、「何をグローバルに置くか」を意識することが大事

まずは、

console.log(window) をブラウザのコンソールで叩いて、
「こんなにいろいろぶら下がってるのか」と眺めてみてください。

そのうえで、

window.innerWidth
window.location.href
window.alert()

あたりを実際に触ってみると、
「ブラウザと JavaScriptの境界」がだんだん見えてきます。

スポンサーリンク
タイトルとURLをコピーしました