ブラウザのオブジェクト

初心者しょしんしゃのためのJavaScript：ブラウザを動かす「オブジェクト」の仕組しくみ

みなさん、こんにちは！IT専門学校（せんもんがっこう）でプログラミングを教えているシニア講師（こうし）です。留学生りゅうがくせいのみなさんも、これからJavaScriptを使ってウェブサイトに「動うごき」をつける方法を楽しく学んでいきましょう。

プログラミングは難（むずか）しく見えますが、実は 「ブラウザという家」の中にある「道具（どうぐ）」の使い方を覚（おぼ）えるだけなんです。今日は、その道具である「オブジェクト」について、プロの視点してん（してん）からやさしく解説かいせつします。

I. JavaScriptは「誰が」「何をするか」を指示するマニュアル

ここでもう一度、最初に説明したイメージを思い出してください。

ウェブページの中には、たくさんのオブジェクトと呼ばれるものがいて、JavaScriptを使って、彼らに命令すれば、仕事をしてくれるらしい

JavaScriptは「誰が」「何をするか」を指示するマニュアルです。

マニュアルですから、「みんなで協力して、これをやりなさい」とぼんやりした命令をするのではなく、「Aさんはこれをして」「Bさんはあれをして」と一人ひとりの作業を正確に、細かく書く必要があります。そうしないと、みんなが同じ仕事をしようとしたり、大事な仕事を誰もしなかったり、ということが起こります。

ここでは、 「誰が」（つまり、どのオブジェクトが）その作業をするのか を、間違いなく伝えるために、 JavaScriptがどのようにそのオブジェクトを見つけるのか 、その方法を説明します。

1. BOM/DOMツリーは「ブラウザが作った地図」

われわれが「これをしなさい」と命令する相手は、オブジェクトと呼ばれる、ウェブページのいろいろな部品です。その部品とは、たとえば、ひとまとまりの文である『段落だんらく<p>』であり、『見出し<h1>』であり、あなたが文字を入力にゅうりょくする『入力にゅうりょくボックス<input>』であり、あなたがクリックする『ボタン』です。これらは 「ツリー構造（木の枝のような形）」 で整理されています。

ブラウザは、HTMLファイルを受け取ると、中身を読み取って、その指示に従って オブジェクト たちを作り、それらをコンピュータが扱いやすい 「木（Tree）」 の形に並べ替えます。これを DOM（Document Object Model）ツリー と呼びます。

またブラウザ自身も自分の持っている機能をツリーの形で整理しています。これを BOM（Browser Object Model） と呼びます。

ブラウザ世界の構造

一番上のボスは window オブジェクトです。

window (ブラウザ全体)
- location (URLの情報)
- document (ウェブページの内容)
  - html
    - body (ページの本文ほんぶん)

2. ツリーの「家族（かぞく）」関係

DOMツリーの中では、それぞれの要素（Element）を 「ノード（Node）」 と呼び、家族のような名前で関係を表します。

Document（ルート）： 木の「一番下の根ねっこ」または「一番上の先祖」。すべての始まりです。
Parent（親）： ある要素を包んでいる外側そとがわのタグ。
Child（子）： タグの中に入っている内側うちがわのタグ。
Sibling（兄弟）： 同じ親の中に並んでいるタグ同士どうし。

3. JavaScriptの仕事：地図をたどって操作する

JavaScriptはこの「地図」を使って、オブジェクトの場所を探し出し、命令めいれいを出します。

見つける（Select） 「IDが ‘btn’ のボタン（子）を探して！」
変える（Change） 「そのボタンの色を赤くして！」
作る・消す（Create / Delete） 「新しいリストを1つ増やして、古いのは消して！」

4. 留学生へのアドバイス：なぜ「ツリー」と呼ぶの？

「HTMLのコードはただのテキストだけど、ブラウザの中では 『生きている木』 のように枝分えだわかれしているんだ。枝（えだ）の先にある葉はっぱ（文字や画像がぞう）を動かしたいときは、幹かみきから順番にたどっていくイメージを持つと、プログラミングがすごく分かりやすくなるよ！」

まとめテーブル

言葉	意味	役割
Document	木の全体	JavaScriptが操作する入り口
Node（ノード）	木の節（ふし）	タグやテキストのひとつひとつ
Element（要素）	タグそのもの	具体的なパーツ（`<div>`, `<h1>`など）

まずは、この家の「家主（やぬし）」であり、すべてを管理（かんり）している「Windowオブジェクト」から見ていきましょう。

II. すべての基点きてん：Windowオブジェクト

ブラウザのタブを開（ひら）いたとき、その画面がめん全体（がめんぜんたい）を管理しているのがWindow（ウィンドウ）オブジェクトです。これはJavaScriptの世界（せかい）の「王様（おうさま）」です。

階層かいそう（かいそう：重なりの順番）のイメージ： Windowオブジェクトはすべての「ルート（根ねっこ）」です。Windowという大きな箱（はこ）の中に、この後説明するDocument（書類）やLocation（場所）など、すべての道具が入っています。
王様のインパクト：もし王様（Window）がいなくなると、その国（タブ）にあるすべてのデータや書類（Document）も消えてしまいます。タブを閉じるとページの情報が消えるのはそのためです。
Windowの便利な機能（きのう）： alert() や prompt() などがあります。
- alert(“こんにちは！”)：画面がめんにメッセージを出す「拡声器かくせいき（かくせいき：大きな声を出す機械）」のようなものです。
- prompt(“お名前は？”)：ユーザーに文字を入力にゅうりょくしてもらう「アンケート用紙」のような役割（やくわり）です。

次は、王様が持っている大切な「書類」、つまりページの中身を指す「Document」についてお話はなししします。

III. ウェブページを操あやつる：DOMとDocumentオブジェクト

ウェブページに表示ひょうじされている文字や画像がぞうそのものを操作（そうさ）するのがDocument（ドキュメント）オブジェクトです。

ここで大切なのが DOM（Document Object Model）です。HTMLの構造こうぞうは、枝分えだわかれした「木（ツリー）」 のような親子おやこ関係（おやこかんけい）になっています。これを「DOMツリー」と呼びます。

DOMツリーの中から、操作したい「特定のパーツ」を見つけることを、プログラミングでは 「要素の取得しゅとく（しゅとく）」 や 「セレクタ」 と呼びます。

留学生の方には、「たくさんの家が並んでいる街の中から、特定の家を探さがし出だす方法」 だと教えてあげてください。住所（ID）で探す方法もあれば、家の色（クラス）で探す方法もあります。

1. よく使う4つの「探し方」

JavaScriptには、目的のオブジェクトを見つけるための代表的な命令が4つあります。

① `getElementById`（一番確実な「住所」）

世界にひとつしかない「ID（アイディー）」を使って探します。

イメージ： 「東京都○○区…」という絶対的な住所で家を特定する。
特徴： 一番スピードが速くて正確です。

② `getElementsByClassName`（同じ「グループ」）

同じ「クラス名」がついているものを、まとめて全部探します。

イメージ： 「赤い屋根の家を全部集めて！」とお願いする。
特徴： 複数の要素が「リスト（配列はいれつのような形）」で返ってきます。

③ `getElementsByTagName`（「種類」で探す）

<div> や <li> など、タグの種類で探します。

イメージ： 「この街にある『コンビニ』を全部探して！」

④ `querySelector` / `querySelectorAll`（最強さいきょうの「万能ばんのうメガネ」）

CSSのセレクタ（.class や #id）を使って探します。最近のプログラミングで最もよく使われます。

イメージ： 「2番目の角にある、青いドアの家を探して」という複雑な指定ができます。

2. 実際に動かしてみよう！

留学生に、コードの書かき方かたの違いを見せてあげましょう。

// 1. IDで探す（1つだけ見つかる）
const title = document.getElementById("main-title");
title.style.color = "red";

// 2. クラスで探す（たくさん見つかるので、[0]のように番号を指定する）
const items = document.getElementsByClassName("menu-item");
items[0].textContent = "最初のメニュー";

// 3. 万能（ばんのう）な探し方（CSSと同じ書（か）き方（かた））
const firstLink = document.querySelector("nav a"); // navの中の最初のaタグ

3. 留学生へのアドバイス：HTMLCollection に注意！

初心者しょしんしゃがよくハマるポイントを、優しく教えてあげてください。

「getElementsByClassName や querySelectorAll を使ったときは、**『1人』ではなく『グループ（リスト）』**が返ってくるんだ。だから、1人だけに命令したいときは、items[0] のように 『0番目の人！』 と番号で呼んであげてね。これを忘れると、命令が届かないから気をつけて！」

まとめテーブル

命令（メソッド）	探し方	見つかる数	おすすめ度
`getElementById`	ID名	1つ	⭐⭐⭐
`querySelector`	CSS形式	1つ（最初）	⭐⭐⭐
`querySelectorAll`	CSS形式	全部	⭐⭐
`getElementsByClassName`	クラス名	全部	⭐

IV. まとめ：オブジェクトを自由に操あやつるために

お疲れ様（おつかれさま）でした！今回学んだオブジェクトたちは、バラバラではなく、みんなで協力（きょうりょく）してひとつのページを動かしています。

いかがでしょうか？「どうやって特定のパーツを指名するか」が分かれば、DOM操作の半分はマスターしたも同然です！

ターゲットが見つかったら、次は具体的にその「部品」をどう動かすかを見ていきましょう。

学習（がくしゅう）のアドバイス：

まずは「Window」の alert で遊ぶ。
次に「Document」で文字を書かき換かええる。
そして「Event」でユーザーの動うごきに反応はんのうさせる。

このステップで進めば、きっと上達（じょうたつ）します。エラーが出ても大丈夫、それは成長（せいちょう）のチャンスです。

みなさんのプログラミング学習を、心（こころ）から応援（おうえん）しています！

Keyboard shortcuts

留学生のためのJavaScript学習ガイド