JavaScript - グローバルオブジェクト

JavaScriptのグローバルオブジェクトへの紹介

こんにちは、未来のJavaScript魔法使いの皆さん！今日は、JavaScriptのグローバルオブジェクトの世界に楽しく飛び込んでみましょう。これらのオブジェクトは、JavaScriptのユニバースのVIPです。どこにいるても、すぐに助けてくれます。さあ、これらの全知全能な存在の力を解き放ちましょう！

グローバルオブジェクトとは？

JavaScriptのグローバルオブジェクトは、プログラミングにおけるスイスアーミーナイフのようです。常に利用できる多様なツールです。これらのオブジェクトはJavaScriptを実行し始める際に自動的に作成され、コードのどこからでもアクセスできます。助け舟を提供してくれる便利なアシスタントのように考えてください。

ウィンドウオブジェクト：グローバルオブジェクトの王様

ウェブブラウザでは、すべてのグローバルオブジェクトの王様はwindowオブジェクトです。あなたのウェブページのボスであり、すべての活動を監視しています。簡単な例を見てみましょう：

console.log(window.innerWidth);
console.log(window.innerHeight);

ブラウザでこのコードを実行すると、ブラウザの幅と高さが表示されます。coolですね？ウェブページ用の内蔵メジャーのようなものです！

グローバルオブジェクトとそのメソッドの例

さあ、最もよく使われるグローバルオブジェクトとそのメソッドを探ってみましょう。これらを使うとプログラマーの生活がずっと楽になります。

1. Mathオブジェクト：あなたの数学的な相棒

Mathオブジェクトは、非常に賢い計算機を常に手元に置いているようなものです。以下にいくつかの例を示します：

console.log(Math.PI); // 出力: 3.141592653589793
console.log(Math.round(4.7)); // 出力: 5
console.log(Math.random()); // 出力: 0から1のランダムな数

この例では、Mathオブジェクトを使ってPIの値にアクセスし、数を丸め、ランダムな数を生成しています。数学の天才が個人的なアシスタントのように感じられます！

2. Dateオブジェクト：あなたのタイムトラベリングパートナー

Dateオブジェクトは、日付と時間を扱うのに役立ちます。タイムマシンを持っているようなものです！

let today = new Date();
console.log(today.getFullYear()); // 出力: 現在の年（例: 2023）
console.log(today.getMonth()); // 出力: 現在の月（0-11）
console.log(today.getDate()); // 出力: 現在の月の日

このコードは、現在の日付と時間を表す新しいDateオブジェクトを作成し、特定の部分を抽出しています。タイムトラベリングパートナーに、「今年は何年？」と尋ねるようなものです。

3. Stringオブジェクト：テキスト操作の達人

Stringオブジェクトは、テキストを扱うのに非常に便利なヘルパーです。以下の便利なメソッドを見てみましょう：

let message = "Hello, World!";
console.log(message.length); // 出力: 13
console.log(message.toUpperCase()); // 出力: HELLO, WORLD!
console.log(message.split(", ")); // 出力: ["Hello", "World!"]

ここでは、Stringオブジェクトのメソッドを使って文字数を数え、メッセージを大文字に変換し、分割しています。テキストを操作する達人のような友達がいるようなものです！

グローバルオブジェクトを使ったポリフィル

さあ、もっと高度な概念について話しましょう：ポリフィル。威圧的な響きがありますが、心配しないでください！簡単に説明します！

ポリフィルは、古いブラウザと新しいJavaScriptの間の橋のようなものです。古いブラウザがまだサポートしていない新しいJavaScriptの機能を利用できるようにします。グローバルオブジェクトは、ポリフィルを作成するのに重要な役割を果たします。

以下に、Array.prototype.includesメソッドのポリフィルの例を示します：

if (!Array.prototype.includes) {
Array.prototype.includes = function(searchElement, fromIndex) {
if (this == null) {
throw new TypeError('"this" is null or not defined');
}

var o = Object(this);
var len = o.length >>> 0;

if (len === 0) {
return false;
}

var n = fromIndex | 0;
var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);

while (k < len) {
if (o[k] === searchElement) {
return true;
}
k++;
}
return false;
};
}

このコードは、includesメソッドがArray.prototypeに存在しない場合に、そのメソッドを追加します。これにより、includesメソッドをサポートしていないブラウザでも利用できます。

古い犬に新しい技を教えるようなものです。古いブラウザに新しいJavaScript機能を理解させ、利用させます！

結論

そして、ここまででした、私の愛する学生の皆さん！JavaScriptのグローバルオブジェクトの whirlwind tour（旋風的な旅）を楽しんでいただけたでしょうか。これらのグローバルオブジェクトは、JavaScriptの世界で常にあなたを助けてくれる信頼のパートナーです。

コードを書く旅を続ける中で、これらのグローバルオブジェクトをますます利用するようになるでしょう。工具箱の中の達人の道具のように、ますますその力と多様性を理解するでしょう。

練習を続け、探求を続け、最も重要なのは、JavaScriptを楽しむことを忘れないでください！いつか、あなたが作成した素晴らしいグローバルオブジェクトが、将来のプログラマーに学ばれるかもしれません。ハッピーコーディング！

Credits: Image by storyset