Window操作

I. Windowの操作

「ダイアログボックスを表示ひょうじする」「新しいウィンドウやタブを開く」

ブラウザの「社長さん」である Windowオブジェクト は、画面がめん全体をコントロールする力を持っています。

留学生の方には、Windowの操作は 「ユーザーに話しかけたり、新しい部屋（タブ）を作ったりするコミュニケーション」 だと教えてあげてください。

1. ダイアログボックスを表示ひょうじする（話しかける）

ユーザーに短いメッセージを伝えたり、質問をしたりする「小さな窓」を表示ひょうじします。これらはすべて、一時的に他の操作を止めて注目させる効果があります。

alert("メッセージ") 「お知らせ」です。「OK」ボタンしかありません。
confirm("質問") 「確認」です。「OK」か「キャンセル」を選んでもらいます。
戻もどり値ち：true（OK）または false（キャンセル）
prompt("質問", "初期値") 「入力にゅうりょく」です。ユーザーに文字を書いてもらいます。
戻もどり値ち：入力にゅうりょくされた文字、または null（キャンセル時）

if (confirm("本当（ほんとう）に消去（しょうきょ）しますか？")) {
    const name = prompt("確認のため、お名前を入力（にゅうりょく）してください");
    alert(name + "さん、削除を受け付けました");
}

2. 新しいウィンドウやタブを開く・閉じる

今のページから別のページへ「ジャンプ」させるのではなく、**「新しい窓」**を用意する操作です。

`window.open("URL", "名前", "オプション")`

新しいタブやウィンドウを開きます。

第1引数ひきすう： 開きたいページの住所（URL）。
第3引数ひきすう： ウィンドウのサイズなどを指定できます。
例れい："width=400,height=400"

`window.close()`

今開いているウィンドウやタブを閉じます。

注意： セキュリティ上、JavaScriptで開いた窓（window.open で作ったもの）以外は、勝手に閉じられないようになっています。

3. ウィンドウのサイズと位置を操あやつる

今のウィンドウを動かしたり、大きさを変えたりする魔法まほうです（最近のブラウザでは制限されることもあります）。

window.moveTo(x, y)：指定した場所へウィンドウを移動させる。
window.resizeTo(width, height)：指定したサイズにウィンドウを変える。

4. スクロールをコントロールする

長いページを自動で動かしたいときに使います。

window.scrollTo(x, y)：指定した場所まで一気いっきに飛ばす。
window.scrollBy(x, y)：今の場所から「あと○○px」だけ動かす。

// ボタンを押したら一番上（0, 0）に戻る
function goToTop() {
    window.scrollTo({
        top: 0,
        behavior: "smooth" // ゆっくり動くアニメーション
    });
}

5. 留学生へのアドバイス：使いすぎに注意！

「alert や window.open はとても目立つから、使いすぎるとユーザーがびっくりして『このサイト、うるさいな！』と思ってしまうよ。 本当ほんとうに大切なときだけ使うのが、良いエンジニアのルールだよ！」

まとめテーブル

命令	役割	ユーザーの反応はんのう
`alert()`	お知らせ	「わかった！」とOKを押す
`confirm()`	はい／いいえ	「やる」か「やめる」か選ぶ
`prompt()`	文字入力にゅうりょく	キーボードで何か書く
`open()`	新しい窓	新しいタブが開く
`scrollTo()`	スクロール	画面がめんが上下に動く

いかがでしょうか？これで「ブラウザの外側そとがわ」も自由に操あやつれるようになりましたね。

II. タイマー

JavaScriptには、時間をコントロールする**「タイマー（Timer）」**という便利な魔法まほうが2つあります。

留学生の方には、**「一度きりのアラーム時計」と「ずっと繰り返すリズム時計」**の違いとして説明すると、とてもスムーズに理解してもらえます。

1. `setTimeout`（一度だけ実行）

指定した時間がたった後に、1回だけプログラムを動かします。

イメージ： カップラーメンのタイマー（3分たったら1回鳴る）。
書かき方かた： setTimeout(動かしたいプログラム, <ruby>待<rt>ま</rt></ruby>ち<ruby>時間<rt>じかん</rt></ruby>ms)
※時間は「ミリ秒（ms）」で書きます。1000ms = 1秒 です。

console.log("タイマースタート！");

// 3秒（3000ms）後に実行
setTimeout(function() {
  console.log("3秒たちました！ 🍜");
}, 3000);

2. `setInterval`（繰くり返かえし実行）

指定した時間ごとに、何度も繰くり返かえしプログラムを動かします。

イメージ： 目覚まし時計の「スヌーズ機能」や、心臓のドクドクというリズム。
書かき方かた： setInterval(<ruby>繰<rt>く</rt></ruby>り<ruby>返<rt>かえ</rt></ruby>したいプログラム, 間隔ms)

// 1秒（1000ms）ごとに「ピッ！」と表示（ひょうじ）する
setInterval(function() {
  console.log("ピッ！ ⏰");
}, 1000);

3. タイマーを止める方法（重要！）

タイマーをセットすると、ブラウザから**「予約番号（タイマーID）」**がもらえます。この番号を使って、タイマーをキャンセルできます。

clearTimeout(ID)：setTimeout をキャンセルする。
clearInterval(ID)：setInterval を止める。

// 1. タイマーをセットして、番号（timerId）をもらう
const timerId = setInterval(function() {
  console.log("動いています...");
}, 1000);

// 2. 5秒後にタイマーを止める
setTimeout(function() {
  clearInterval(timerId); // 番号を指定してストップ！
  console.log("タイマーを止めました。");
}, 5000);

4. 留学生への説明ポイント：ミリ秒の計算

留学生が「5秒は何ミリ秒？」と迷わないように、覚え方を教えてあげましょう。

「1秒は 1,000。だから、秒数に 0 を 3つつけるだけだよ！」

1秒 = 1000

5秒 = 5000

10秒 = 10000

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

留学生と一緒に作れる、簡単な「カウントダウン」の例れいです。

let count = 5;

const countdown = setInterval(function() {
  console.log(count);
  count--;

  if (count < 0) {
    clearInterval(countdown); // 0になったら止める
    console.log("打ち上げ！ 🚀");
  }
}, 1000);

まとめテーブル

関数かんすう名	役割	繰り返す？	例たとえ話
`setTimeout`	○秒後に実行	しない（1回だけ）	カップラーメンのタイマー
`setInterval`	○秒おきに実行	する（ずっと）	メトロノーム
`clear...`	タイマーを消去しょうきょ	-	キャンセルボタン

いかがでしょうか？「時間を操あやつる力」を手に入れると、スライドショーやゲーム、リアルタイムの時計など、動うごきのあるサイトが作れるようになります。

Keyboard shortcuts

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