JavaScript - オブジェクトプロパティ

こんにちは、未来のJavaScriptの魔法使いさんたち！今日は、JavaScriptのオブジェクトプロパティの魔法の世界に飛び込みます。あなたの近所の親切なコンピュータサイエンスの先生として、このエキサイティングな旅を案内します。那么、バーチャルの杖（キーボード）を握りしめ、コードの魔法をかけてみましょう！

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

JavaScriptのオブジェクトは宝箱のようで、プロパティという形で価値ある情報を保持しています。各プロパティはキーと値のペアで、キーはラベルのようなもので、値は宝そのものです。まず最初のオブジェクトを作ってみましょう：

let wizard = {
name: "Harry",
age: 17,
house: "Gryffindor"
};

ここで、私たちは wizard オブジェクトを3つのプロパティ name、age、house を持たせて作成しました。各プロパティにはキー（例えば "name"）と値（例えば "Harry"）があります。

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

今では wizard オブジェクトを持っていますが、どうやってそのプロパティにアクセスするのでしょうか？2つの方法があります：

1. ドット表記
2. ブラケット表記

それぞれを試してみましょう：

// ドット表記
console.log(wizard.name);  // 出力: Harry

// ブラケット表記
console.log(wizard["house"]);  // 出力: Gryffindor

ドット表記はシンプルでよく使われますが、ブラケット表記はプロパティ名にスペースや特殊文字がある場合や、変数を使ってプロパティにアクセスする場合に便利です。

let property = "age";
console.log(wizard[property]);  // 出力: 17

ネストされたオブジェクトプロパティのアクセス

時々、オブジェクトは他のオブジェクトを含むことがあります。まるで魔法のナスカート！wizard オブジェクトを拡張してみましょう：

let wizard = {
name: "Harry",
age: 17,
house: "Gryffindor",
wand: {
wood: "Holly",
core: "Phoenix feather",
length: 11
}
};

ネストされたプロパティにアクセスするためには、ドットまたはブラケット表記を連鎖します：

console.log(wizard.wand.wood);  // 出力: Holly
console.log(wizard["wand"]["core"]);  // 出力: Phoenix feather

オブジェクトプロパティの追加または更新

JavaScriptのオブジェクトは変更可能で、作成後に変更できます。那么、私たちの魔法使いに新しいスキルを与えてみましょう：

// 新しいプロパティの追加
wizard.skill = "Quidditch";

// 既存のプロパティの更新
wizard.age = 18;

console.log(wizard.skill);  // 出力: Quidditch
console.log(wizard.age);  // 出力: 18

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

時々、プロパティを消去する必要があります。そのためには delete オペレータを使います：

delete wizard.house;
console.log(wizard.house);  // 出力: undefined

パフ！ "house" プロパティは消えました。忘れないでください、delete を使うとオブジェクトからプロパティを削除しますが、そのプロパティの値を持つ変数には影響を与えません。

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

オブジェクトのすべてのプロパティを見たい場合はどうしますか？ for...in ループを使います：

for (let key in wizard) {
console.log(key + ": " + wizard[key]);
}

これは wizard オブジェクトのすべての列挙可能なプロパティをリストアップします。でも、まだあります！Object.keys()、Object.values()、または Object.entries() を使うと、オブジェクトのキー、値、または両方の配列を取得することもできます：

console.log(Object.keys(wizard));    // 出力: ["name", "age", "wand", "skill"]
console.log(Object.values(wizard));  // 出力: ["Harry", 18, {wood: "Holly", core: "Phoenix feather", length: 11}, "Quidditch"]
console.log(Object.entries(wizard)); // 出力: [["name", "Harry"], ["age", 18], ["wand", {...}], ["skill", "Quidditch"]]

プロパティ属性

JavaScriptの各プロパティには、その行動を定義する特定の属性があります。これらの属性はプロパティの性格のようなものです。それらに会いましょう：

1. value：プロパティの値（明確ですよね！）
2. writable：プロパティの値を変更できますか？
3. enumerable：このプロパティがオブジェクトのプロパティを列挙するときに表示されるべきですか？
4. configurable：このプロパティを削除したり、その属性を変更したりできますか？

デフォルトでは、通常作成したプロパティはすべて true に設定されています。しかし、Object.defineProperty() を使ってそれらを変更することもできます：

Object.defineProperty(wizard, "name", {
writable: false,
enumerable: false
});

wizard.name = "Ron";  // これは動作しません
console.log(wizard.name);  // 出力: Harry

for (let key in wizard) {
console.log(key);  // "name" はここに表示されません
}

以下は、私たちが学んだプロパティメソッドの表です：

メソッド	説明
object.property	ドット表記を使ってプロパティにアクセス
object["property"]	ブラケット表記を使ってプロパティにアクセス
object.property = value	プロパティを追加または更新
delete object.property	プロパティを削除
for...in	オブジェクトプロパティを列挙
Object.keys(object)	オブジェクトのキーの配列を取得
Object.values(object)	オブジェクトの値の配列を取得
Object.entries(object)	オブジェクトの [キー, 値] ペアの配列を取得
Object.defineProperty()	新しいプロパティを定義するか、既存のプロパティを修正

そして、ここまでで、若いコーダーの皆さんがJavaScriptオブジェクトプロパティのクライズコースを完了しました！実践は完璧を生みますので、これらの概念を続けて実験してください。間もなく、あなたは真のJavaScriptの魔法使いとして複雑なオブジェクトを操ることができるようになるでしょう！

Credits: Image by storyset