JavaScript - オブジェクト:初級者のガイド

こんにちは、将来のプログラマーさんたち!JavaScriptのオブジェクトの世界への興奮的な旅にあなた们的ガイドとして参加できることを嬉しく思います。プログラミングを教えてきた経験から言えることは、オブジェクトを理解するのはJavaScriptにおける秘密のスーパーパワーを手に入れるようなものです。それでは、始めましょう!

JavaScript - Objects

JavaScript オブジェクトとは?

あなたのペットの犬を説明するとします。名前、年齢、品種、お気に入りのおもちゃなどがあります。JavaScriptでは、これらの特徴をオブジェクトとして表現できます。まず、最初のオブジェクトを作成してみましょう:

let myDog = {
name: "Buddy",
age: 3,
breed: "Golden Retriever",
favoriteToy: "ささき球"
};

これがオブジェクトリテラルと呼ばれるものです。関連する情報を保持する容器のようなものです。各情報はプロパティで、名前(例えば「name」や「age」)と値(「Buddy」や3)があります。

オブジェクトのプロパティ

myDogオブジェクトを作成したので、どのようにプロパティにアクセスするのでしょうか?2つの方法があります:

  1. ドット記法:

    console.log(myDog.name); // 出力:Buddy
  2. ブラケット記法:

    console.log(myDog["age"]); // 出力:3

どちらも同じことをしますが、ブラケット記法はプロパティ名が変数に格納されている場合やスペースがある場合に便利です。

オブジェクトに新しいプロパティを追加することもできます:

myDog.isGoodBoy = true;
console.log(myDog.isGoodBoy); // 出力:true

または、既存のプロパティを修正することもできます:

myDog.age = 4;
console.log(myDog.age); // 出力:4

オブジェクトメソッド

メソッドはオブジェクトに関連する関数です。オブジェクトが行うアクションのようなものです。myDogオブジェクトにメソッドを追加してみましょう:

myDog.bark = function() {
console.log("ワンワン!");
};

myDog.bark(); // 出力:ワンワン!

今では犬が吠えることができます!すごくないですか?

新しいオブジェクトの作成

オブジェクトリテラルを使用してオブジェクトを作成する方法を見ましたが、もう一つの方法としてObject()コンストラクタを使用することもあります:

let myCat = new Object();
myCat.name = "Whiskers";
myCat.age = 5;
myCat.meow = function() {
console.log("メーゾ!");
};

myCat.meow(); // 出力:メーゾ!

この方法は珍しいですが、存在することを知っておくと良いでしょう。

オブジェクトにメソッドを定義する

オブジェクトを作成する際にメソッドを定義することもできます:

let myParrot = {
name: "Polly",
age: 2,
speak: function() {
console.log("Pollyはクラッカーが欲しい!");
}
};

myParrot.speak(); // 出力:Pollyは克拉ッカーが欲しい!

メソッドを定義するショートカットもあります:

let myHamster = {
name: "Fuzzy",
age: 1,
run() {
console.log("車輪で走る!");
}
};

myHamster.run(); // 出力:車輪で走る!

withキーワード

同じオブジェクトのプロパティを複数回使用する際に、withキーワードを使うとコードが短くなります:

with(myDog) {
console.log(name);
console.log(age);
bark();
}

しかし、withキーワードはコードを不明瞭にする可能性があるため、厳格モードでは推奨されません。

JavaScriptのネイティブオブジェクト

JavaScriptには、便利な機能を提供するいくつかのビルトインオブジェクトがあります。以下に最も一般的なものをいくつか紹介します:

オブジェクト 説明
String テキストを表現し操作します
Number 数値を表現します
Boolean true/falseの値を表現します
Array 値のリストを表現します
Math 数学演算を提供します
Date 日付と時間を表現します

以下にいくつかの例を見てみましょう:

let greeting = "Hello, World!";
console.log(greeting.length); // 出力:13

let pi = Math.PI;
console.log(pi); // 出力:3.141592653589793

let today = new Date();
console.log(today); // 出力:現在の日時

JavaScript オブジェクトメソッド

JavaScriptのオブジェクトにはいくつかのビルトインメソッドがあります。以下にいくつか重要なものを紹介します:

メソッド 説明
Object.keys() オブジェクトのプロパティ名の配列を返します
Object.values() オブジェクトのプロパティ値の配列を返します
Object.entries() オブジェクトの[key, value]のペアの配列を返します
Object.assign() 一つのオブジェクトから別のオブジェクトにプロパティをコピーします

以下にこれらのメソッドの使用例を見てみましょう:

let keys = Object.keys(myDog);
console.log(keys); // 出力:["name", "age", "breed", "favoriteToy", "isGoodBoy", "bark"]

let values = Object.values(myDog);
console.log(values); // 出力:["Buddy", 4, "Golden Retriever", "ささき球", true, ƒ]

let entries = Object.entries(myDog);
console.log(entries); // 出力: [["name", "Buddy"], ["age", 4], ...]

let newDog = Object.assign({}, myDog);
console.log(newDog); // 出力:myDogのコピー

それでは、JavaScriptのオブジェクトの世界への第一歩を踏み出しました。練習することが大事ですので、自分でオブジェクトやメソッドを作成して試してみてください。そうすれば、プロプログラマーのようにオブジェクトを弄ぶことができるようになるでしょう!

ハッピーコーディング、そしてあなたのオブジェクトが常にバグフリーでありますように!

Credits: Image by storyset