🌍 JavaScriptの「世界地図」｜3つのオブジェクト世界を旅しよう（2025年版）

はじめに：JavaScriptは“ひとつの宇宙”だった？

JavaScriptを学び始めると、すぐに出てくる言葉――「オブジェクト」。
でも、これがいったい何を指しているのか、最初はピンとこない人が多いはずです。

「配列もオブジェクト？関数もオブジェクト？ブラウザもオブジェクト？」

はい、実はその通りなんです。
JavaScriptの世界はすべて“オブジェクト”でできていて、それぞれが異なる役割をもつ「世界」のように存在しています。

この導入ページでは、その**3つの世界（層）**を地図のように整理してご紹介します。
これを読めば、JavaScriptがどういう構造で動いているのかが、スッと頭に入るはずです。

🪐 JavaScriptの世界は3つの“層”でできている

JavaScriptを大きく見ると、次の3つの領域に分かれています。

層	名前	役割
①	組み込みオブジェクト（Built-in Object）	JavaScriptに最初から備わっている基本機能
②	ブラウザオブジェクト（Browser Object Model / BOM）	ブラウザそのものを操作するための機能
③	DOMオブジェクト（Document Object Model）	HTMLを直接触って画面を動かす機能

　① 組み込みオブジェクトの世界 ―― JavaScriptの“道具箱”

まず最初に知っておきたいのが、言語の内部に最初から組み込まれているオブジェクトたちです。

例えばこんなものが代表です👇

Math：数値計算を助ける道具箱
Date：日付や時刻を扱う
String：文字列を操作する
Array：データをまとめるリスト
Object：すべての基本になる型

console.log(Math.floor(Math.random() * 10)); // 0〜9の乱数
console.log(new Date().getFullYear());       // 現在の年
console.log("hello".toUpperCase());          // "HELLO"

これらはJavaScriptそのものの機能であり、ブラウザがなくても動作します。
いわば「言語の骨格を支える道具箱」なのです。

　② ブラウザオブジェクトの世界 ―― JavaScriptが“外の世界”とつながる窓

2つ目の世界は、ブラウザの情報や機能を操作するためのオブジェクト群です。
「Browser Object Model（BOM）」と呼ばれます。

JavaScriptがブラウザ上で動くとき、
ブラウザ自体を表す window を中心に、次のような仲間たちが使えます👇

オブジェクト	できること
`window`	すべての親。アラートやタイマーなどの入口
`navigator`	ブラウザやOSの情報を取得
`screen`	画面の幅や高さを取得
`history`	戻る・進むボタンを制御
`location`	URLの取得・変更

alert("ようこそJavaScriptの世界へ！");
console.log(navigator.userAgent);
console.log(location.href);

つまりこの層は、「JavaScriptがブラウザという外界と会話できるようにする世界」です。

　③ DOMの世界 ―― HTMLを動かす“現実のステージ”

最後にたどり着くのが、Webページを実際に動かす世界です。
「Document Object Model（DOM）」は、HTMLを“オブジェクトの木”として扱う仕組み。

たとえばHTMLの見出しをJavaScriptで書き換えることも簡単です👇

const title = document.getElementById("main-title");
title.textContent = "ようこそ、DOMの世界へ！";

document はページ全体を表すオブジェクト
HTMLの要素（タグ）は「ノード」として管理されている
それを取得・変更・追加・削除するのがDOM操作

💡 JavaScriptの力が“見える形”で発揮されるのがこの層です。

3つの世界は、すべて「オブジェクト」でつながっている

これら3つの世界は、すべて「オブジェクト」という共通のルールでできています。

実際に確かめてみると、すべて「object」として認識されます👇

console.log(typeof Math);      // "object"（組み込みオブジェクト）
console.log(typeof window);    // "object"（ブラウザオブジェクト）
console.log(typeof document);  // "object"（DOMオブジェクト）

つまりJavaScriptは「オブジェクトが連鎖して世界を作っている言語」なのです。
この構造を理解すると、コードの“つながり”がぐっと見えてきます。