日本語訳
こんにちは、未来のJavaScript魔法使いの皆さん！今日は、Windowオブジェクトの世界に興味深い旅に出かけます。あなたの近所の親切なコンピュータ教師として、私はこの魅力的なトピックを案内します。では、仮の魔杖（キーボード）を手に取り、JavaScriptの魔法をかけましょう！
Windowオブジェクトとは？
ブラウザのウィンドウを魔法のポータルと考えてください。Windowオブジェクトはこのポータルの守護者のように、ウェブページ上で見たり操作したりするすべてのものをコントロールしています。それほど重要な存在なので、JavaScriptでは「グローバルオブジェクト」とも呼ばれています。
Windowオブジェクトとしてのグローバルオブジェクト
ウェブページ用のJavaScriptを書く際、Windowオブジェクトは常にそこにあります。空気のように、どこにでもあるのに、いつも気づかない存在です。
簡単な例から始めましょう：
console.log("Hello, World!");このコードは、実際には以下の省略形です：
window.console.log("Hello, World!");windowという部分は通常省略されます。すごいですね？
Windowオブジェクトのプロパティ
では、私たちのWindowオブジェクトの魔法のようなプロパティを探ってみましょう。これらのプロパティは、ブラウザ城のそれぞれの部屋のように、それぞれ特別な目的を持っています。
1. window.innerWidthとwindow.innerHeight
これらのプロパティは、ブラウザウィンドウのサイズを教えてくれます。実際に見てみましょう：
console.log("Window width: " + window.innerWidth);
console.log("Window height: " + window.innerHeight);ブラウザウィンドウのサイズを変更して、このコードを再実行してみてください。数字が変わるのが見えるでしょう！
2. window.location
このプロパティはブラウザのGPSのようなものです。現在のウェブ上の場所を教えてくれ、新しい場所に移動させることができます。
console.log("Current URL: " + window.location.href);
// 新しいページに移動するには：
// window.location.href = "https://www.example.com";3. window.history
これはブラウザの日記のようなものです。どこに行ったかを記録しています。
console.log("Number of pages in history: " + window.history.length);
// 一つ前のページに戻るには：
// window.history.back();以下の表にこれらのプロパティをまとめます：
| プロパティ | 説明 |
|---|---|
| innerWidth | ブラウザウィンドウの幅 |
| innerHeight | ブラウザウィンドウの高さ |
| location | 現在のURLに関する情報 |
| history | ブラウザの履歴 |
Windowオブジェクトのメソッド
では、Windowオブジェクトにかけられる魔法（メソッド）を学びましょう！
1. window.alert()
このメソッドは、「ちょっと聞いとけ！」とユーザーに叫ぶようなものです。メッセージを表示するポップアップボックスを作成します。
window.alert("Welcome to JavaScript!");2. window.prompt()
このメソッドは、ユーザーに質問するようなものです。テキスト入力を表示するポップアップボックスを作成します。
let name = window.prompt("What's your name?");
console.log("Hello, " + name + "!");3. window.setTimeout()
このメソッドは、コードにタイマーを設定するようなものです。指定された遅延後に関数を実行します。
window.setTimeout(function() {
console.log("This message appears after 3 seconds!");
}, 3000);4. window.setInterval()
このメソッドは、リカーリングアラームを設定するようなものです。指定された間隔で関数を繰り返し実行します。
let counter = 0;
window.setInterval(function() {
counter++;
console.log("This message appears every 2 seconds. Count: " + counter);
}, 2000);以下の表にこれらのメソッドをまとめます：
| メソッド | 説明 |
|---|---|
| alert() | アラートボックスを表示 |
| prompt() | テキスト入力用のダイアログボックスを表示 |
| setTimeout() | 指定された遅延後に関数を実行 |
| setInterval() | 指定された間隔で関数を繰り返し実行 |
すべてを合わせて
これらの魔法のようなプロパティとメソッドを学んだので、簡単なインタラクティブなウェブページを作成してみましょう：
<!DOCTYPE html>
<html>
<body>
<h1 id="greeting">Welcome!</h1>
<button onclick="startGame()">Start Game</button>
<script>
function startGame() {
let name = window.prompt("What's your name, adventurer?");
document.getElementById("greeting").innerHTML = "Welcome, " + name + "!";
let counter = 5;
let countdown = window.setInterval(function() {
if(counter > 0) {
window.alert(counter + " seconds until the game starts!");
counter--;
} else {
window.clearInterval(countdown);
window.alert("Game start!");
}
}, 1000);
}
</script>
</body>
</html>この例では、以下のようなシンプルな「ゲーム」を作成しています：
-
prompt()を使用してプレイヤーの名前を尋ねます - グリーティングをDOM操作で更新します
-
setInterval()を使用してカウントダウンを作成します -
alert()を使用してカウントダウンとゲーム開始を通知します
そして、若いJavaScriptの弟子の皆さん！私たちはWindowオブジェクトの魔法の領域を探求し、そのプロパティからメソッドまでを学びました。実践が完璧にするものですので、これらの概念を試行錯誤してみてください。間もなく、プロのようにJavaScriptの魔法をかけられるようになるでしょう！
次回まで、ハッピーコーディング！
Credits: Image by storyset