JavaScript 速習チュートリアル

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

1. プロパティは「キー:値」のペア

JavaScriptのオブジェクトは、プロパティ(Properties)の集合体です。
プロパティは、追加、変更、および削除が可能です。

2. プロパティへのアクセス方法

オブジェクトのプロパティには、以下の方法でアクセスできます。

  • ドット記法(Dot notation)
  • ブラケット記法(Bracket notation)
  • 式(Expression)によるアクセス

2.1 コード例

// objectName.property (ドット記法)
let age = person.age;

// objectName["property"] (ブラケット記法)
let age = person["age"];

// objectName[expression] (式)
let age = person[x];

3. ドット記法 (Dot Notation)

構文:objectName.propertyName

person.firstname + " は " + person.age + " 歳です";

4. ブラケット記法 (Bracket Notation)

構文:objectName["propertyName"]

person["firstname"] + " は " + person["age"] + " 歳です";

一般的に、可読性とシンプルさの観点からドット記法が好まれます。
ただし、以下のようなケースではブラケット記法が必要になります。

  1. プロパティ名が変数に格納されている場合:person[myVariable]
  2. プロパティ名が有効な識別子(Identifier)ではない場合(例:ハイフンを含む):person["last-name"]

4.1 変数を使用したアクセス例

ブラケット記法は、プロパティ名を変数で管理する場合に非常に便利です。

let n1 = "firstName";
let n2 = "lastName";

let name = person[n1] + " " + person[n2];

5. プロパティの変更

既存のプロパティの値を変更することができます。

// ageプロパティを10に変更
person.age = 10;

6. 新しいプロパティの追加

オブジェクトに新しいプロパティを追加するには、単に新しいキーに値を代入するだけです。

// nationality(国籍)プロパティを追加
person.nationality = "イギリス";

7. プロパティの削除

delete キーワードを使用して、オブジェクトからプロパティを削除できます。

const person = {
  firstName: "ジョン",
  lastName: "ドウ",
  age: 50,
};

// ageプロパティを削除
delete person.age;

または、ブラケット記法でも削除可能です。

const person = {
  firstName: "ジョン",
  lastName: "ドウ",
  age: 50,
};

delete person["age"];

delete キーワードは、プロパティ自体の両方を削除します。
削除された後のプロパティにアクセスしようとすると、undefined が返されます。

8. プロパティの存在確認

in 演算子を使用すると、特定のプロパティがオブジェクト内に存在するかどうかを確認できます。

const person = {
  firstName: "ジョン",
  lastName: "ドウ"
};

// "firstName"プロパティが存在するか確認
let result = ("firstName" in person); // true が返る

9. ネストされたオブジェクト (Nested Objects)

プロパティの値として、別のオブジェクトを格納することもできます。

9.1 コード例

myObj = {
  name: "ジョン",
  age: 30,
  myCars: {
    car1: "フォード",
    car2: "BMW",
    car3: "フィアット"
  }
}

ネストされたオブジェクトには、ドット記法またはブラケット記法を連鎖させてアクセスします。

// アクセス例
myObj.myCars.car2; // "BMW"
myObj.myCars["car2"]; // "BMW"
myObj["myCars"]["car2"]; // "BMW"

// 変数を使用したアクセス
let p1 = "myCars";
let p2 = "car2";
myObj[p1][p2]; // "BMW"

10. まとめ

  • オブジェクトプロパティは、キー:値(key:value)のペアである
  • プロパティへのアクセスは、ドット記法またはブラケット記法を使用する
  • 代入演算子(=)でプロパティの追加・変更、delete で削除が可能
  • in 演算子を使って、オブジェクト内にプロパティが存在するかチェックできる