Windowオブジェクト

さて、オブジェクトがどんなものか、を理解したら、次はブラウザのオブジェクトをもっとくわしく見てみましょう。こうしたオブジェクトはあらかじめ、JavaScriptに組くみ込こまれているので、そのプロパティもメソッドも、いきなり呼び出して使うことができます。

ブラウザで動くJavaScriptを学習するとき、一番大きな存在が Windowオブジェクト です。

留学生の方には、Windowオブジェクトは 「ブラウザの画面がめん全体を管理している『社長さん』」 だと教えてあげてください。JavaScriptでできることのほとんどは、この社長さんにお願いして動かしています。

I. Windowオブジェクト

1. Windowオブジェクトとは？

ブラウザの「タブ」ひとつひとつが、ひとつの window です。 JavaScriptを実行するとき、最初からそこにいる「グローバルオブジェクト」（一番偉いオブジェクト）です。

実は、私たちが普段使っている console.log() や alert() も、本当ほんとうは window.console.log() や window.alert() という名前です。でも、社長さんは有名すぎるので、window. を省略（しょうりゃく）して書くことができます。

2. よく使うプロパティ（画面がめんの情報）

社長さんが持っている「今のブラウザの状態（じょうたい）」についての情報です。

`window.document`

今見ている「ウェブサイトの中身（ページ）」そのものです。文字の色を変えたり、ボタンを作ったりするときに使います。

`window.location`

今の「URL（Web上の住所）」の情報です。

例れい： location.href = "https://google.com"; と書くと、別のサイトに移動できます。

`window.innerWidth` / `innerHeight`

ブラウザの「中身の横幅（よこはば）と高さ」です。

イメージ： 画面がめんの大きさに合わせてデザインを変えたいときにチェックします。たとえば「パソコンでは、画面がめんの横幅がスマートフォンより広いので、それに合わせ横にメニューなどを表示ひょうじする」というようなことをしたいときに、使います。

3. よく使うメソッド（社長さんができること）

`alert()` / `prompt()` / `confirm()`

ユーザーにメッセージを出したり、質問をしたりする「小さな窓（ダイアログ）」を出します。

alert("こんにちは！"); // メッセージを出す
let name = prompt("お名前は？"); // 名前を入力（にゅうりょく）してもらう

`setTimeout()` / `setInterval()`

「タイマー」の仕事です。

setTimeout： ○秒後に1回だけ実行する。
setInterval： ○秒ごとに、ずっと繰り返す。

`open()` / `close()`

新しいタブを開いたり、今あるタブを閉じたりします。

4. 留学生への説明ポイント：`window` と `document` の違い

ここが一番混乱（こんらん）しやすいポイントです！

「Window」は「ブラウザの枠（わく）全体」。 「Document」は「その中にある紙（ページ）」のこと。

「社長（window）は、秘書ひしょのドキュメントくん（document）に『このページを書かき換かええて！』と命令しているんだよ」と教えてあげてください。

まとめテーブル

種類	名前	やっていること
プロパティ	`document`	ページの内容をいじる
プロパティ	`location`	住所（URL）を確認・移動する
メソッド	`alert()`	お知らせを表示ひょうじする
メソッド	`setTimeout()`	タイマーをセットする
メソッド	`scrollTo()`	画面がめんを上や下に動かす（スクロール）

Tip

グローバル変数へんすうに注意！ 自分で作った変数へんすうも、実は window の持ちものになることがあります。「何でもかんでも window に入れると、社長さんの部屋が散らかって大変だよ（バグの原因になるよ）」と伝えてあげると、良いプログラミングの習慣（しゅうかん）が身につきます。

いかがでしょうか？「ブラウザのボス」というイメージが伝われば、Windowオブジェクトの理解はバッチリです！

II. Documentオブジェクト

前回ぜんかい、window オブジェクト はブラウザ全体の「社長さん」だと説明しましたね。今回の document オブジェクト は、window オブジェクトの下にあるプロパティで、その社長さんの下で働く 「現場監督（げんばかんとく）」 です。

Important

オブジェクトは別のオブジェクトのプロパティになることがあります。

留学生の方には、**「ウェブページという建物を管理し、中身を書かき換かええたり、新しくパーツを作ったりする責任者」**だと伝えるとイメージが湧きやすくなります！

documentオブジェクトとは、ブラウザに表示ひょうじされているHTML（ウェブページの中身） そのものを指します。 JavaScriptを使って、文字の色を変えたり、ボタンが押されたときに動うごきをつけたりするのは、すべてこの「現場監督（document）」に命令を出しているからです。

これを専門用語で DOM（ドム / Document Object Model） と呼びます。HTMLを「木の枝（えだ）」のような構造として管理しているのが特徴です。

DOMツリーについては、次のセクションで、くわしく説明します。ここでは、Windowとdocumentの違いをしっかり頭に入れてください。

1. documentオブジェクトとは？

ブラウザに表示ひょうじされているHTML（ウェブページの中身） そのものを指します。 JavaScriptを使って、文字の色を変えたり、ボタンが押されたときに動うごきをつけたりするのは、すべてこの「現場監督（document）」に命令を出しているからです。

これを専門用語で DOM（ドム / Document Object Model） と呼びます。HTMLを「木の枝（えだ）」のような構造として管理しているのが特徴です。

2. よく使うプロパティ（ページの情報）

現場監督が知っている、今のページの情報です。

document.title ブラウザのタブに表示ひょうじされている「ページのタイトル」です。JavaScriptで書かき換かええることもできます。
document.body HTMLの <body> タグの中身全体です。ページ全体の背景はいけい色を変えたいときなどに使います。
document.URL 現在開いているページの住所（URL）を教えてくれます。

3. よく使うメソッド（現場監督への命令）

これが一番大切です！特定の場所を探したり、中身を変えたりする命令です。

場所を探す（セレクタ）

getElementById("ID名") 特定のIDがついたパーツを1つだけ探します。一番速くて正確です。
querySelector("セレクタ") CSSと同じ書かき方かた（.class や #id）でパーツを探せます。とても便利です！

これらは、以前にも出てきましたね。実はdocumentオブジェクトのメソッドだったのです！

Note

document.getElementById("ID名")のように書いてもかまいませんが、普通はdocument.を省略して、getElementById("ID名")と書きます。

中身を書かき換かええる・作る

createElement("タグ名") 新しいパーツ（<div> や <li> など）をメモリの中に作ります。
write("文字") ページに直接文字を書かき込こみます（※最近はあまり使いませんが、基本として覚えます）。

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

コンソールを開いて、ここをクリックし、下のJavaScriptを入力にゅうりょくしてみましょう。

コンソールを開くには、F12 キー（ノートPCは Fn + F12）または Ctrl + Shift + I を使います。

// 1. IDが "greeting" というパーツを探す
const message = document.getElementById("greeting");

// 2. その中身を書（か）き換（かえ）える
message.textContent = "こんにちは、日本へようこそ！";

// 3. スタイル（色）も変えちゃう
message.style.color = "red";

オブジェクトと const の意外な関係

上のコードを見て、疑問に思いませんでしたか？「const で宣言せんげんされた変数へんすうは、後から値を変更できないはずでは？」そう思った人は、変数へんすうの説明をとてもよく覚えている人です。

しかし、上のコードはエラーになりません。それについて、説明しましょう。

JavaScriptの初心者しょしんしゃが混乱しやすい点のひとつが、オブジェクトと const の意外な関係です。

「 const で宣言せんげんした変数へんすうは中身を変えられない」と説明しましたが、オブジェクトの場合は少し違います。

名札の固定（参照の不変性）：const で作ったオブジェクトそのものを別のオブジェクトに入いれ替かえることはできません（別の箱に名札を付け替えるのは禁止）。
中身の変更はOK：箱の中に入っている個別こべつのデータ（プロパティ）を書かき換かええることは可能です。

「強力なガムテープで名札が貼られた箱」をイメージしてください。ガムテープで固定されているので、名札を別の新しい箱に貼り直すことはできません。でも、箱の蓋（ふた）をひとつ開けて、中に入っているお菓子を入いれ替かえたり、ジャムを塗ったりすることは自由なのです。

例たとえるなら、「ファイルの保存場所（パス）」は固定されているけれど、「ファイルの中身」は自由に書かき換かええられるようなイメージです。

先ほどの例れいでは、constを使って宣言せんげんしたmessageという箱を開けて、中身を“こんにちは、日本へようこそ！“に入いれ替かえました。これはエラーにはなりません。

しかし、

// 1. IDが "greeting" というパーツを探す
const message = document.getElementById("greeting");

// 2. タグがpのパーツを探す
message = document.querySelector("p")

はエラーになります。message というラベルを「“greeting“というIDの箱」からはがして、「“p“というタグの別の箱」に貼ろうとしているからです。

const は message というラベルと、それを入れる入れ物との関係を固定して、ラベルの張替えを許しません。

しかし、あくまで ラベルと入れ物との関係 であって、 入れ物が同じであれば、その中身が変わっても、かまわない のです。

5. 留学生へのアドバイス：`window` と `document` の使つかい分わけ

「どっちを使えばいいの？」と聞かれたら、こう答えてあげてください。

「ブラウザの機能（タイマー、アラート、URL移動）を使いたいときは window」

「ページの中身（文字、画像がぞう、ボタン）をいじりたいときは document」

まとめテーブル

命令・情報の名前	役割	例たとえ話
`title`	ページのタイトル	本の表紙の名前
`getElementById()`	特定のパーツを指名する	「出席番号○番の人！」と呼ぶ
`querySelector()`	自由にパーツを探す	「赤い服を着ている人！」と探す
`textContent`	文字を書かき換かええる	看板の文字を書かき直なおす
`createElement()`	新しい要素を作る	新しいレンガを用意する

いかがでしょうか？「現場監督の document くん」がいれば、ウェブページを思った通りに操あやつれるようになります。

III. Locationオブジェクト

Locationオブジェクト は、今ブラウザで見ているウェブサイトの「住所（URL）」を管理するオブジェクトです。

留学生の方には、Locationオブジェクトは 「ブラウザの住所録（じゅうしょろく）」 や 「カーナビ」 だと教えてあげてください。今の場所を知ることもできるし、新しい場所へ移動することもできます。

1. Locationオブジェクトとは？

window.location を通じてアクセスします。URLを「プロトコル」「ドメイン」「パス」などのパーツに分けて持っているので、JavaScriptで簡単にURLの情報を調べたり、変更したりできます。

2. よく使うプロパティ（住所の情報）

現在のURLの「どの部分を知りたいか」によって使つかい分わけます。例れい：https://example.com:8080/search?q=js#result というURLの場合

href URLの全部ぜんぶです。
console.log(location.href);
protocol 「http:」や「https:」の部分です。
host ドメイン名とポート番号です。（example.com:8080）
pathname ドメインの後の「フォルダやファイル」の場所です。（/search）
search ? から始まる「クエリパラメータ」です。検索けんさくキーワードなどが入ります。（?q=js）
hash # から始まる「アンカー（ページ内の場所）」です。（#result）

3. よく使うメソッド（場所を移動する）

新しいページへ行きたいときや、今のページをやり直したいときに使います。

`assign("URL")`

指定したURLに移動します。

特徴： ブラウザの「戻る」ボタンで、前のページに戻れます。
location.assign("https://google.com");

`replace("URL")`

新しいURLに移動しますが、今のページの履歴（ひれき）を消します。

特徴： 「戻る」ボタンを押しても、今のページには戻れません。ログイン後の画面がめんなどでよく使います。

`reload()`

今のページを「再読（さいよ）み込み」します。ブラウザの更新ボタンを押すのと同じです。

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

留学生がよく使う「ボタンを押して別のページへ行く」コードです。

// 3秒後に自動（じどう）でGoogleへ移動する
setTimeout(function() {
  location.href = "https://google.com";
  // 実は location.assign() と同じ意味になります
}, 3000);

// 「更新（こうしん）ボタン」を作るなら
function refreshPage() {
  location.reload();
}

5. 留学生へのアドバイス：`href` の書かき換かええが一番人気

URLを操作する方法はたくさんありますが、現場で一番よく使われるのは location.href への代入だいにゅうです。

「一番簡単な移動（いどう）のやり方かたは、location.href に新しい住所を代入だいにゅうすることだよ。一番覚えやすくて便利だよ！」

まとめテーブル

プロパティ・メソッド	役割	例たとえ話
`href`	URLのすべて	正式な住所
`pathname`	ファイルの場所	建物の「何階の何号室ごうしつ」か
`search`	検索けんさくデータ	住所に添えられた「おまけ情報」
`assign()`	ページを移動する	次の目的地へ歩いていく（戻れる）
`replace()`	履歴を残さず移動	瞬間移動して前の場所を忘れる（戻れない）
`reload()`	ページを更新する	同じ場所でもう一度やり直す

いかがでしょうか？URLをパーツごとに理解できると、特定のページだけで動くプログラムを作ったり、ユーザーを別のページに誘導（ゆうどう）したりできるようになります。

次は、今のページから「ひとつ前に戻る」など、ブラウザの履歴をさらに詳しく操あやつる History オブジェクトについても見てみますか？

IV. Styleオブジェクト

Styleオブジェクトは、JavaScriptを使ってウェブサイトの見みた目め（CSS）を自由に変えるための道具です。

留学生の方には、Styleオブジェクトは**「パーツに新しい服を着せたり、メイクをしたりする『スタイリストさん』」**だと教えてあげてください。

1. Styleオブジェクトとは？

HTMLの各要素（Element）が持っているオブジェクトです。これを使うと、ボタンの色を赤くしたり、文字を大きくしたり、アニメーションのように動かしたりできます。

基本の書かき方かたはこうです： 要素.style.プロパティ = "値";

2. よく使うプロパティ（見みた目めの変更）

CSSのプロパティ名とほぼ同じですが、1つだけ大きなルールがあります。

「キャメルケース」で書く！

CSSでハイフン（-）を使う名前は、JavaScriptではハイフンを消して、次の文字を大文字にします。

background-color → backgroundColor
font-size → fontSize
margin-top → marginTop

よく使うプロパティ	役割
`color`	文字の色を変える
`backgroundColor`	背景はいけい（はいけい）の色を変える
`display`	パーツを表示ひょうじするか消す（`none`）か決める
`width` / `height`	幅と高さを変える（“100px” のように単位が必要！）
`borderRadius`	角を丸くする

3. よく使うメソッド（より高度な操作）

style.color = "red" のような直接の変更以外に、便利な命令（メソッド）もあります。

`setProperty("プロパティ名", "値")`

CSSのプロパティをセットします。これを使うときは、CSSと同じ形（background-color）で書けます。

element.style.setProperty("background-color", "blue");

`removeProperty("プロパティ名")`

JavaScriptで設定せっていしたスタイルを消して、元のCSSの状態に戻します。

`getPropertyValue("プロパティ名")`

設定せっていされているスタイルの値を取得しゅとくします。

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

留学生に「マウスが乗ったら色が変わるボタン」の仕組しくみを説明するコード例れいです。

const box = document.querySelector(".box");

// 1. 背景（はいけい）をオレンジ色にする
box.style.backgroundColor = "orange";

// 2. 文字を白くして、大きくする
box.style.color = "white";
box.style.fontSize = "24px"; // ⚠️ "px" を忘れないで！

// 3. 枠線（わくせん）をつける
box.style.border = "5px solid black";

5. 留学生へのアドバイス：Styleオブジェクトの限界

ここが中級ちゅうきゅう者へのステップアップとして大切なポイントです。

「element.style で調べられるのは、JavaScriptで直接つけたスタイルだけなんだ。もともとCSSファイル（.css）に書いてあるスタイルを知りたいときは、getComputedStyle(element) という別の魔法まほうを使う必要があるよ！」

まとめテーブル

特徴	内容
役割	JavaScriptからCSSを操作する
書かき方かたのルール	ハイフンなしの「キャメルケース」
値のルール	必ず “ “（ダブルクォーテーション）で囲む文字列にする
単位	数値すうちだけでなく “px” や “%” を必ずつける

いかがでしょうか？「スタイリストのStyleくん」を使えば、クリックしたときに画面がめんを暗くしたり、メニューを横から出したりするような、リッチなサイトが作れるようになります。

V. Historyオブジェクト

Historyオブジェクトは、ブラウザの「戻る」ボタンや「進む」ボタンと同じ役割をするオブジェクトです。

留学生の方には、Historyオブジェクトは**「ブラウザの中にある『タイムマシン』」**だと教えてあげてください。ユーザーが今までに見てきたページの履歴（ひれき）を管理しています。

1. Historyオブジェクトとは？

window.history を通じてアクセスします。ユーザーがそのタブでこれまでに訪れたページのリストを持っていて、JavaScriptから「1つ前のページに戻る」といった操作ができます。

2. よく使うプロパティ（履歴の情報）

length 現在のタブの履歴リストに、全部でいくつページがあるかを教えてくれます。
console.log(history.length);
初めて開いたタブなら 1 になります。

3. よく使うメソッド（タイムマシンを動かす）

直感的に使えるメソッドが揃そろっています。

`back()`

ブラウザの「戻る（←）」ボタンを押すのと同じです。1つ前のページに戻ります。

history.back();

`forward()`

ブラウザの「進む（→）」ボタンを押すのと同じです。

history.forward();

`go(数字)`

指定した数だけ、履歴を移動します。

history.go(-1); （1つ戻る。back() と同じ）
history.go(-2); （2つ戻る）
history.go(1); （1つ進む。forward() と同じ）

4. 高度なメソッド：URLを書かき換かええる（履歴を作る）

最近のモダンなウェブサイト（SPAなど）でよく使われる、少し魔法まほうのようなメソッドです。

`pushState(データ, タイトル, URL)`

ページを読み直さずに、URLだけを新しく書かき換かええて履歴に追加します。

例れい： 検索けんさく結果をフィルタリングしたときに、ページはそのままでURLだけを変えたいときに使います。

`replaceState(データ, タイトル, URL)`

今の履歴を、新しいURLで 上書うわがき（書かき換かええ） します。

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

留学生に「戻るボタン」を自作する方法を教えてあげましょう。

// 「戻る」ボタンを作るとき
function goBack() {
  // 履歴が1つ以上あれば戻る
  if (history.length > 1) {
    history.back();
  } else {
    alert("戻るページがありません！");
  }
}

6. 留学生へのアドバイス：プライバシーに注意！

留学生が「ユーザーがどのサイトから来たか（URLの中身）」を知りたがることがありますが、それはできません。

「Historyオブジェクトは『何個戻れるか』や『戻れ！』という命令はできるけど、プライバシーを守るために『戻る先の具体的なURL』を覗（のぞ）くことはできないんだよ」

まとめテーブル

プロパティ・メソッド	役割	例たとえ話
`length`	履歴の数	今まで何箇所（なんかしょ）の駅を通ったか
`back()`	戻る	電車を1駅戻す
`forward()`	進む	電車を1駅進める
`go(-2)`	指定した数戻る	特急で2駅分戻る
`pushState()`	履歴を偽造ぎそう（？）する	実際に移動せずに、切符のスタンプだけ増やす

いかがでしょうか？「タイムマシンのボタン」をJavaScriptで操作できると、よりアプリらしい便利なサイトが作れるようになります。

VI. Imageオブジェクト

JavaScriptで画像がぞうを扱う Imageオブジェクト は、画面がめんに写真やイラストを表示ひょうじするための特別な道具です。

留学生の方には、Imageオブジェクトは**「デジタルの『写真立て』」**だと教えてあげてください。新しい写真（データ）を読よみ込こんで、それをウェブサイトという「部屋」の好きな場所に飾ることができます。

1. Imageオブジェクトとは？

HTMLの <img> タグと同じ役割をしますが、JavaScriptの中で 「まだ画面がめんにない画像がぞう」をあらかじめ準備する のにとても便利です。

作り方は2通りあります：

HTMLから持ってくる： document.getElementById("myImg")
新しく作る： new Image()

2. よく使うプロパティ（写真の状態）

写真がどんな大きさか、どこにあるかを知るための情報です。

src（ソース）画像がぞうの「ファイルの場所（URL）」です。ここを書かき換かええると、別の画像がぞうに切きりり替かわります。
**width / height** 画像がぞうの「横幅（よこはば）」と「高さ」です。
complete 画像がぞうの読よみ込こみが終わったかどうかを true / false で教えてくれます。
alt（オルト）画像がぞうが表示ひょうじできなかったときに出る「説明文」です。

3. よく使うイベント（メソッド的な役割）

Imageオブジェクトでは、メソッドよりも 「状態が変わったときのイベント」 をよく使います。

onload 画像がぞうの読よみ込こみが 「成功（せいこう）」 して、表示ひょうじできるようになったときに動うごきます。
onerror 画像がぞうのファイルが見つからないなど、読よみ込こみに 「失敗（しっぱい）」 したときに動うごきます。

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

留学生に「JavaScriptで新しく画像がぞうを作って表示ひょうじする」流れを説明するコード例れいです。

// 1. 新しい「写真立て（Imageオブジェクト）」を作る
const myPic = new Image();

// 2. 読（よ）み込（こ）みが終わったあとの「お祝い」を決める
myPic.onload = function() {
  console.log("画像（がぞう）の準備ができました！サイズは " + myPic.width + "px です。");
  // 画面（がめん）に表示（ひょうじ）する（bodyに追加）
  document.body.appendChild(myPic);
};

// 3. 失敗したとき（エラー）の準備
myPic.onerror = function() {
  console.log("画像（がぞう）が見つかりませんでした...");
};

// 4. 最後に「写真（データ）」を入れる（読（よ）み込（こ）みスタート！）
myPic.src = "https://example.com/japan.jpg";

5. 留学生へのアドバイス：プリロード（先読さきよみ）

「どうしてHTMLに書かずにJavaScriptで作るの？」と聞かれたら、こう答えてあげてください。

「ゲームや重いサイトでは、画像がぞうが出るまで時間がかかるよね。JavaScriptで先に読よみ込こんでおけば（プリロード）、ユーザーがボタンを押した瞬間にパッと画像がぞうを出せるから、親切なんだよ！」

まとめテーブル

プロパティ・イベント	役割	例たとえ話
`src`	画像がぞうの住所	どの写真を入れるか決める
`width` / `height`	画像がぞうのサイズ	写真の大きさ
`onload`	読よみ込こみ完了	「写真の表示が完了した現像げんぞうが終わったよ！」
`onerror`	読よみ込こみエラー	「写真をなくしちゃった！」

いかがでしょうか？Imageオブジェクトをマスターすると、スライドショーやキャラクターが動くゲームなどが作れるようになります。

VI. Anchorオブジェクト

Anchor（アンカー）オブジェクトは、ウェブサイトにある「リンク（<a> タグ）」のことです。

留学生の方には、Anchorオブジェクトは**「別の場所へつなぐ『ワープの門（もん）』」**だと教えてあげてください。Locationオブジェクトと似ていますが、Locationが「ブラウザ自身」の居場所いばしょを扱うのに対し、Anchorは「ページ内にある個別こべつのリンク」を扱います。

1. Anchorオブジェクトとは？

HTMLの <a> 要素（アンカー要素）が、JavaScriptの世界では「HTMLAnchorElement」というオブジェクトになります。

JavaScriptからは、主に以下の方法でアクセスします。

document.links[0]（ページにある1番目のリンク）
document.getElementById("myLink")（IDで指定）

2. よく使うプロパティ（門の設定せってい情報）

Anchorオブジェクトは、移動先のURLをバラバラに分解して持っています。これは Locationオブジェクトとほぼ同じ です！

href リンク先のフルアドレス（住所）です。
myLink.href = "https://example.com"; と書けば、飛び先を自由に変えられます。
**protocol / host / pathname** URLの「http:」の部分や、「ドメイン名」の部分だけを個別こべつに読よみ書かきできます。
target リンクをどこで開くか（今のタブか、新しいタブか）の設定せっていです。
"_blank" にすると、新しいタブで開くようになります。
text（または textContent） 画面がめんに表示ひょうじされている「リンクの文字」です。

3. よく使うメソッド

Anchorオブジェクト専用せんようの特別なメソッドは少ないですが、Elementオブジェクトから受うけ継ついだ大切なメソッドを使います。

click() 人間がマウスでクリックしたのと同じことを、JavaScriptで実行します。
例れい： 「3秒後に自動的どうてきにボタンをクリックしてワープさせる」といったことができます。

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

留学生に「危ないリンクをチェックする」というイメージでコードを見せてあげましょう。

// 1. ページ内の最初のリンクを取得（しゅとく）
const link = document.links[0];

// 2. リンク先が「https」で始まっているかチェック（正規（せいき）表現（ひょうげん）の ^ を活用！）
if (/^https:/.test(link.protocol)) {
  console.log("このリンクは安全です。");
} else {
  // 安全じゃない場合は、色を赤くして警告（けいこく）する
  link.style.color = "red";
  link.text = "⚠️ 注意：安全ではないリンクです";
}

// 3. クリックしたときに新しいタブで開くようにする
link.target = "_blank";

Note

正規表現は付録参照

5. 留学生へのアドバイス：Locationとの違い

「window.location と何が違うの？」と聞かれたら、こう答えてあげてください。

「location は、今あなたが乗っている『船（ブラウザ）』そのものの操縦席（そうじゅうせき）だよ。書かき換かええると船が動く。 anchor は、ページの中にたくさんある『ワープボタン』のこと。それをいじっても、クリックするまでは船は動かないんだよ」

まとめテーブル

プロパティ・メソッド	役割	例たとえ話
`href`	リンク先の住所	どこにワープするか
`target`	開き方の設定せってい	今の場所を離はなれるか、新しい窓を作るか
`text`	表示ひょうじされる文字	門に書いてある看板（かんばん）
`click()`	クリックを実行	誰かの代わりにボタンを押してあげる

いかがでしょうか？「ワープの門」であるAnchorオブジェクトを操作できれば、ユーザーを正しいページに案内したり、安全なリンクだけを許可したりするプログラムが作れるようになります。

VII. Navigator（ナビゲーター）オブジェクト

Navigator（ナビゲーター）オブジェクトは、今使っている「ブラウザ（ChromeやSafariなど）」や「パソコン・スマホの状態」を教えてくれるオブジェクトです。

留学生の方には、Navigatorオブジェクトは**「ブラウザの身分証明書（みぶんしょうめいしょ）」**だと教えてあげてください。どこの国の言葉を使っているか、インターネットにつながっているか、などの情報をすべて持っています。

1. Navigatorオブジェクトとは？

window.navigator を通じてアクセスします。このオブジェクトを見れば、ユーザーがどんな環境（かんきょう）でサイトを見ているかが分かります。

2. よく使うプロパティ（ブラウザの情報）

「この人は誰？」「どんな設定せってい？」を知るためのプロパティです。

userAgent（ユーザーエージェント）ブラウザの名前やバージョン、OS（WindowsかMacか）などの詳細な情報です。
例れい： これを見て「iPhoneの人にはiPhone用の画面がめんを見せる」といった判断ができます。
language ブラウザで設定せっていされている「言語（げんご）」です。
例れい： 日本語なら ja、英語なら en-US が返ってきます。これを使えば、自動でメッセージを英語に変えられます。
onLine 今、インターネットに つながっているか（オンラインか） を true / false で教えてくれます。
cookieEnabled クッキー（ブラウザにデータを保存する機能）が使える設定せっていになっているかを確認できます。

3. よく使うメソッド（便利な機能）

最近のブラウザでは、Navigatorを使って高度な機能（カメラ、位置情報、コピーなど）を動かすことができます。

`clipboard.writeText()`

文字を 「クリップボードにコピー」 します。

navigator.clipboard.writeText("コピーしたい文字");

`geolocation.getCurrentPosition()`

ユーザーの 「今の場所（GPS）」 を取得しゅとくします。

イメージ： 地図アプリなどを作る時に使います。

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

留学生に「おもてなし（自動言語切きりり替かえ）」のイメージでコードを見せてあげましょう。

// 1. ユーザーの言語をチェック
const userLang = navigator.language;

if (userLang.includes("ja")) {
  console.log("こんにちは！");
} else if (userLang.includes("en")) {
  console.log("Hello!");
}

// 2. ネットがつながっているか監視（かんし）する
if (navigator.onLine) {
  console.log("オンラインです 🟢");
} else {
  alert("ネットワークが切れています 🔴");
}

5. 留学生へのアドバイス：情報の正確性（せいかくせい）

「userAgent を見れば、100% 正確にブラウザがわかりますか？」と聞かれたら、こう答えてあげてください。

「userAgent は昔からの複雑な歴史があって、実は少しウソが混ざっていることもあるんだ（Chrome なのに Safari と書いてあったりする）。だから、あまり深く信じすぎず、『だいたいこんな感じ』と判断するために使うのがプロのコツだよ！」

まとめテーブル

プロパティ・メソッド	役割	例たとえ話
`userAgent`	ブラウザ・OS情報	自己じこ紹介（名前や出身地）
`language`	言語設定せってい	何語で話してほしいか
`onLine`	通信状態	今、電話がつながっているか
`clipboard`	コピー機能	メモをクリップで留める
`geolocation`	位置情報	今どこにいるか教える

いかがでしょうか？「身分証明書」であるNavigatorオブジェクトを使えば、世界中のユーザー一人ひとりに合わせた親切なサイトが作れるようになります。

VIII. Cookieオブジェクト

1. クッキー（Cookie）ってなに？

通常つうじょう、ブラウザはページを閉じると「さっきまで何をしていたか」を忘れてしまいます。そこで、**「ユーザーの情報をブラウザに保存しておいて、次にサイトに来たときに思い出せるようにする」**のがクッキーの仕事です。

ログイン維持： 「お帰りなさい！」と名前が出る。
買い物カゴ： ページを移動しても選んだ商品が消えない。
設定せってい保存： ダークモードなどの設定せっていを覚えておく。

2. JavaScriptでのクッキー操作

JavaScriptでは document.cookie という特別なプロパティを使って、このメモ帳を読よみ書かきします。

クッキーを保存する（書く）

クッキーは「名前=値」のセットで保存します。

// 「username」という名前に「Taro」を保存する
document.cookie = "username=Taro";

クッキーに期限（きげん）をつける

期限を決めないと、ブラウザを閉じると消えてしまいます。ずっと覚えておいてほしいときは max-age（秒数）を使います。

// 7日間（604800秒）覚えておいてね！
document.cookie = "username=Taro; max-age=604800";

クッキーを読み取る

document.cookie を見ると、保存されているすべてのクッキーが1つの長い文字列で返ってきます。

console.log(document.cookie); // "username=Taro; theme=dark"

3. 留学生への説明ポイント：クッキーの「ルール」

クッキーを扱うときには、留学生に以下の3つのルールを教えてあげてください。

サイズが小さい： 4KB（約2000文字）くらいしか保存できません。あくまで「短いメモ」用です。
有効期限（ゆうこうきげん）： 期限が切れると、魔法まほうが解けるように消えてしまいます。
セキュリティ： クッキーにはパスワードなどの大事な情報は直接書かないのがルールです（盗まれる危険があるため）。

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

留学生に「名前を覚えるプログラム」のイメージを見せてあげましょう。

// 1. クッキーをセットする関数（かんすう）
function saveName() {
  const name = prompt("あなたのお名前は？");
  // 1日後まで保存
  document.cookie = "userName=" + name + "; max-age=86400";
  alert("保存しました！");
}

// 2. クッキーから名前を探す関数（かんすう）
function greet() {
  const cookies = document.cookie;
  if (cookies.includes("userName")) {
    // 文字列の中から名前の部分だけ取り出す（少し工夫が必要）
    const nameValue = cookies.split("userName=")[1].split(";")[0];
    alert("お帰りなさい、" + nameValue + "さん！");
  } else {
    alert("はじめまして！");
  }
}

5. 留学生へのアドバイス：LocalStorageとの違い

最近はクッキーの代わりに localStorage という新しい道具を使うことが多いです。

「クッキーはサーバー（サイトの裏側うらがわ）に自動で送信そうしんされるメモ。 localStorage は、ブラウザだけに保存する大きな物置（ものおき）。 最近のプログラミングでは、大きなデータを保存するなら localStorage を使うのが主流だよ！」

まとめテーブル

特徴	内容	例たとえ話
役割	ユーザーの情報を一時保存	お店の「ポイントカード」
保存場所	ブラウザの中	自分の財布（さいふ）の中
プロパティ名	`document.cookie`	共有きょうゆうのメモ帳
最大サイズ	約 4KB	付箋（ふせん）1枚分
主な用途	ログイン状態の管理	「この人は会員です」という印

いかがでしょうか？「ブラウザが持っている記憶きおくの付箋」というイメージが伝われば、クッキーの基本は完璧かんぺきです。

I. Eventオブジェクト

JavaScriptはウェブページの上で起こるさまざまな「事件」に反応はんのうして、動うごきます。

マウスでウェブページのボタンをクリックする
ボックスに文字を入力にゅうりょくする
画面がめんをスクロールする

そうした「事件」をJavaScriptでは 「イベント」 と呼びます。

JavaScriptにおける Event（イベント）オブジェクト は、ウェブサイトで「何かが起きたとき」に作られる、たくさんの情報が詰まった 「報告書（ほうこくしょ）」 のようなものです。

「クリックやキー入力にゅうりょくという『事件』が起きたときに、警察官が書くメモ」 なのです。

1. Eventオブジェクトとは？

マウスをクリックした、キーボードを叩いた、画面がめんをスクロールした…。これらはすべて「イベント」です。イベントが発生したとき、JavaScriptは自動的どうてきに「誰が、いつ、どこで何をしたか」という情報をまとめたオブジェクトを作ります。

// ボタンがクリックされたとき
button.addEventListener("click", function(event) {
  // この「event」という引数（ひきすう）が、Eventオブジェクト（報告書）です
  console.log(event); 
});

2. よく使うプロパティ（何が起きたかの情報）

報告書に書かれている、大切なチェック項目です。

`event.target`（ターゲット）

「誰が」事件を起こしたか、つまり イベントが発生したパーツ（要素） を指します。

例れい： クリックされた「ボタンそのもの」を指します。

`event.type`（タイプ）

イベントの 種類（なまえ） です。

例れい： “click”（クリック）、“keydown”（キーを押した）、“mouseover”（マウスが乗った）など。

`event.key`（キー）

キーボードのイベント（keydownなど）のとき、どのキーを押したか を教えてくれます。

例れい： “Enter”、“a”、“ArrowUp”（上矢印）など。

イメージ： 「リンク（<a>）を押したけど、ページを移動させないで！」というときに使います。
よく使う場所： フォームの入力にゅうりょくが間違っているとき、送信そうしんを止めるために使います。

`event.stopPropagation()`（ストップ・プロパゲーション）

イベントが 「親の要素」に伝わるのを止めます。（イベントのバブリング停止）

イメージ： 小さいボタンを押したのに、後ろにある大きい枠（わく）までクリックされたことになってしまうのを防ぎます。

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

留学生に「入力にゅうりょくされたキーをチェックする」コードを見せてあげましょう。

const input = document.querySelector("input");

input.addEventListener("keydown", function(event) {
  // どのキーを押したか報告書を見る
  console.log("押されたキーは: " + event.key);
  
  // もし Enterキー だったら
  if (event.key === "Enter") {
    alert("Enterが押されました！送信（そうしん）します。");
  }
});

5. 留学生へのアドバイス：名前は何でもいい？

関数かんすうのカッコの中にある (event) という名前について、よく質問されます。

「カッコの中の名前は e や evt と短く書くプログラマーも多いよ。でも、中身は同じ 『イベントの報告書』 だから安心してね！」

まとめテーブル

プロパティ・メソッド	役割	例たとえ話
`target`	発生した場所	「犯人（はんにん）」はどのボタン？
`type`	イベントの種類	「クリック事件」か「キー入力にゅうりょく事件」か
`preventDefault()`	元の動うごきを止める	「勝手に動かないで！」とブレーキをかける
`stopPropagation()`	伝言を止める	「周りの人には内緒（ないしょ）にして！」

いかがでしょうか？ Eventオブジェクトが使えるようになると、「ユーザーが何をしたか」に合わせた細かいリアクションができるようになります。

Keyboard shortcuts

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