JavaScript object:変数のデータ型

2023年4月6日2023年4月18日

English version.

object 型は JavaScript における基本的なデータ型の一つであり、キーと値のペアを持つ複雑なデータ構造を表します。連想配列、ハッシュマップとも呼ばれますが、JavaScript においては、オブジェクトは非常に柔軟な機能を持っており、他の言語の連想配列やハッシュマップよりも多くの機能を提供しています。

作成

オブジェクトは中括弧 {} で囲まれ、以下のような形で定義されます。

const myObject = {
  key1: 'value1',
  key2: 'value2',
  key3: 'value3'
};

オブジェクトのキーは、文字列、数値、またはシンボルである必要があります。値は任意の JavaScript のデータ型を持つことができます。キーと値は、コロン : で区切られ、複数のペアはカンマ , で区切られます。

空のオブジェクト

空のオブジェクトを作る方法には、以下の2つがあります。

中括弧 {} を使用する方法

const emptyObject = {};

Object コンストラクターを使用する方法

const emptyObject = new Object();

どちらの方法でも、空のオブジェクトを作成することができます。

要素の取得

JavaScriptのオブジェクトから値を取得するには、ドット(.)記法またはブラケット([])記法を使用します。

例えば、以下のようなオブジェクトがあったとします。

const myObject = {
  name: 'Alice',
  age: 30,
  gender: 'female'
};

このオブジェクトから、nameプロパティの値を取得するには、ドット記法を使用します。

console.log(myObject.name); // 'Alice'

または、ブラケット記法を使用することもできます。

console.log(myObject['name']); // 'Alice'

ブラケット記法を使用する場合、プロパティ名は引用符で囲む必要があります。プロパティ名は変数としても使用できます。

const myKey = 'name';
console.log(myObject[myKey]); // 'Alice'

また、存在しないプロパティにアクセスすると undefined が返されるため、プロパティの存在をチェックすることも重要です。

console.log(myObject.unknown); // undefined

全てのキー

JavaScriptのデータ型object型の全てのキーをループで取得する方法には、Object.keys()メソッドを使用する方法があります。このメソッドは、指定されたオブジェクトが持つ列挙可能なプロパティの名前の配列を返します。

以下は例です。

const person = {
  name: 'John',
  age: 30,
  address: '123 Main St'
};

const keys = Object.keys(person);

for (let i = 0; i < keys.length; i++) {
  console.log(keys[i]); // "name", "age", "address"
}

この例では、Object.keys()メソッドを使用して、personオブジェクトのキーの配列を取得し、forループを使用して各キーをログに出力しています。Object.keys()メソッドは、プロトタイプチェーンにあるプロパティは含まれないことに注意してください。

全ての要素

JavaScriptのオブジェクトの全ての要素をループで取得する方法は、いくつかありますが、最も一般的な方法は、for...inループを使用することです。以下は例です。

const myObject = {
  name: 'Alice',
  age: 30,
  gender: 'female'
};

for (const key in myObject) {
  console.log(`${key}: ${myObject[key]}`);
}

この例では、for...inループを使用して、オブジェクトのプロパティ名をループしています。ループの各反復で、プロパティ名をkey変数に割り当て、myObject[key]を使用してプロパティの値を取得しています。これにより、オブジェクトのすべてのプロパティとその値を取得することができます。

注意点としては、for...inループは、オブジェクトのプロトタイプチェーンにあるプロパティも含めてループするため、これが意図しないプロパティを取得する可能性があることです。また、for...inループは、ループ順序が保証されていないため、順序が重要な場合は、Object.keys()メソッドを使用してプロパティ名を配列として取得し、その配列をループすることをお勧めします。

プロトタイプチェーンにあるプロパティも含めてループするfor...inループの例は以下の通りです。

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.sayHello = function() {
  console.log('Hello!');
};

const alice = new Person('Alice', 30);
for (const key in alice) {
  console.log(`${key}: ${alice[key]}`);
}

この例では、Personコンストラクタで新しいオブジェクトを作成し、プロトタイプにsayHelloメソッドを定義しています。その後、for...inループを使用してaliceオブジェクトのプロパティをループしています。このループは、name、age、そしてsayHelloメソッドを取得します。しかし、sayHelloメソッドは、aliceオブジェクトでは定義されていないため、予期しないプロパティが取得されてしまっています。

プロトタイプチェーンにあるプロパティを含めないようにするには、hasOwnProperty()メソッドを使用します。このメソッドは、オブジェクトが指定されたプロパティを持っているかどうかをチェックします。以下は、hasOwnProperty()メソッドを使用した上記の例の修正版です。

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.sayHello = function() {
  console.log('Hello!');
};

const alice = new Person('Alice', 30);

for (const key in alice) {
  if (alice.hasOwnProperty(key)) {
    console.log(`${key}: ${alice[key]}`);
  }
}

この修正版では、if文を追加し、hasOwnProperty()メソッドを使用して、オブジェクトが指定されたプロパティを持っているかどうかをチェックしています。これにより、プロトタイプチェーンにあるプロパティは取得されなくなります。

プロパティの存在チェック

in演算子

in演算子を使用して、オブジェクトに指定したプロパティが存在するかどうかをチェックすることができます。存在する場合はtrueを返し、存在しない場合はfalseを返します。

例えば、以下のようなオブジェクトがある場合を考えます。

const myObject = {
  name: 'Alice',
  age: 30,
  gender: 'female'
};

オブジェクトに name プロパティがある場合:

console.log('name' in myObject); // true

オブジェクトに存在しないプロパティをチェックする場合:

console.log('unknown' in myObject); // false

hasOwnProperty()メソッド

hasOwnProperty()メソッドを使用して、オブジェクトに指定したプロパティが存在し、かつ、そのプロパティがオブジェクト自身のプロパティであるかどうかをチェックすることができます。存在する場合はtrueを返し、存在しない場合はfalseを返します。

例えば、以下のようなオブジェクトがある場合を考えます。

const myObject = {
  name: 'Alice',
  age: 30,
  gender: 'female'
};

オブジェクトに name プロパティがある場合:

console.log(myObject.hasOwnProperty('name')); // true

オブジェクトに存在しないプロパティをチェックする場合:

console.log(myObject.hasOwnProperty('unknown')); // false

要素数の取得

const myObject = {
  name: 'Alice',
  age: 30,
  gender: 'female'
};

const objectLength = Object.keys(myObject).length;

console.log(objectLength); // 3

この例では、Object.keys()メソッドを使用して、オブジェクトのプロパティ名を含む配列を取得し、その配列のlengthプロパティを使用して配列の要素数を取得しています。オブジェクトのプロパティ名を含む配列の長さがオブジェクトの要素数となります。

操作

要素の追加、削除、変更などが可能です。

追加と変更

JavaScriptにおいて、オブジェクトはキーと値のペアを保持することができるデータ型です。オブジェクトのプロパティに新しい値を設定することで、オブジェクトにデータを追加または変更することができます。

オブジェクトのプロパティに新しい値を設定する方法はいくつかあります。以下に、代表的な方法を示します。

ドット表記法を使用する方法

ドット表記法を使用する場合、オブジェクトのプロパティ名をドットで区切って指定します。例えば、以下のように書くことで、personオブジェクトのageプロパティに30という値を設定することができます。

let person = {name: "John"};
person.age = 30;

ブラケット表記法を使用する方法

ブラケット表記法を使用する場合、オブジェクトのプロパティ名を文字列で囲って指定します。例えば、以下のように書くことで、personオブジェクトのageプロパティに30という値を設定することができます。

let person = {name: "John"};
person['age'] = 30;

Object.assign()メソッドを使用する方法

Object.assign()メソッドを使用する場合、既存のオブジェクトに新しいプロパティを追加することができます。また、既存のプロパティの値を変更することもできます。以下の例では、personオブジェクトにageプロパティを追加し、既存のnameプロパティの値を"Jane"に変更しています。

let person = {name: "John"};
Object.assign(person, {age: 30, name: "Jane"});

削除

一つの要素

delete演算子を使用する方法

JavaScriptのdelete演算子を使用して、オブジェクトからプロパティを削除することができます。以下は、personオブジェクトからageプロパティを削除する例です。

let person = { name: "John", age: 30 };
delete person.age;

上記のコードでは、delete演算子を使用してpersonオブジェクトからageプロパティを削除しています。この演算子は、オブジェクトからプロパティを削除するために使用されます。削除されたプロパティは、後でアクセスすることはできません。

ただし、delete演算子はオブジェクトからプロパティを削除するために使用されますが、オブジェクト自体を削除することはできません。また、delete演算子を使用して、変数や関数、またはその他のJavaScriptの構成要素を削除することはできません。delete演算子は、オブジェクトのプロパティを削除するために使用されるものです。

Object.keys()メソッドを使用する方法

JavaScriptのObject.keys()メソッドを使用して、オブジェクトからプロパティを削除することができます。Object.keys()メソッドは、オブジェクトのプロパティ名の配列を返します。この配列を使用して、オブジェクトからプロパティを削除することができます。

以下は、personオブジェクトからageプロパティを削除する例です。

let person = { name: "John", age: 30 };
let keys = Object.keys(person);
delete person[keys[1]];

上記のコードでは、Object.keys()メソッドを使用してpersonオブジェクトのプロパティ名の配列を取得し、delete演算子を使用してageプロパティを削除しています。配列keysのインデックス1にはageプロパティが含まれているため、このインデックスを使用してageプロパティを削除しています。

Object.keys()メソッドを使用することで、オブジェクトのプロパティ名を配列として取得し、その配列を使用してプロパティを削除することができます。

Reflect.deleteProperty() メソッドを使用する方法

JavaScriptのReflect.deleteProperty()メソッドを使用することで、オブジェクトからプロパティを削除することができます。このメソッドは、オブジェクトと削除するプロパティ名を引数に取ります。

以下は、personオブジェクトからageプロパティを削除する例です。

let person = { name: "John", age: 30 };
Reflect.deleteProperty(person, "age");

上記のコードでは、Reflect.deleteProperty()メソッドを使用してpersonオブジェクトからageプロパティを削除しています。このメソッドを使用することで、オブジェクトからプロパティを削除することができます。

Reflect.deleteProperty()メソッドは、delete演算子と似たような機能を持っていますが、オブジェクトからプロパティを削除する場合は、このメソッドを使用することが推奨されます。Reflect.deleteProperty()メソッドは、delete演算子とは異なり、削除に成功した場合にtrueを返します。また、Proxyオブジェクトを使用する場合には、Reflect.deleteProperty()メソッドを使用する必要があります。

全ての要素

for...inループ

for...inループを使用する場合の例は以下の通りです。

const obj = {
  prop1: 'value1',
  prop2: 'value2',
  prop3: 'value3'
};

for (let prop in obj) {
  delete obj[prop];
}

console.log(obj);

この例では、for...inループを使用して、オブジェクトobjのすべてのプロパティを削除しています。delete演算子は、指定されたプロパティを削除するために使用されます。この方法では、オブジェクト自体が削除されないため、オブジェクトを再利用することができます。

Object.keys()メソッド

Object.keys()メソッドを使用する場合の例は以下の通りです。

const obj = {
  prop1: 'value1',
  prop2: 'value2',
  prop3: 'value3'
};

Object.keys(obj).forEach(prop => {
  delete obj[prop];
});

console.log(obj);

この例では、Object.keys()メソッドを使用して、オブジェクトobjのすべてのプロパティを取得し、forEach()メソッドを使用して、各プロパティを削除しています。この方法でも、オブジェクト自体が削除されないため、オブジェクトを再利用することができます。

これらの方法は、JavaScriptのオブジェクト型の全ての要素を削除するための便利な方法です。しかし、オブジェクトにプロトタイプチェーンがある場合、for...inループまたはObject.keys()メソッドを使用して、プロパティを削除する場合は注意が必要です。プロトタイプチェーンのプロパティを削除することができますので、Object.hasOwnProperty()を使用して、オブジェクト自体が持つプロパティのみを削除することをお勧めします。

Object.hasOwnProperty()メソッド

Object.hasOwnProperty()メソッドを使用すると、指定されたオブジェクトが指定されたプロパティを持っている場合にtrueを返します。つまり、オブジェクト自体が持っているプロパティである場合にtrueを返し、プロトタイプチェーンのプロパティである場合にはfalseを返します。Object.hasOwnProperty()を使用することで、オブジェクト自体が持つプロパティだけを削除することができます。

以下は、Object.hasOwnProperty()メソッドを使用して、オブジェクト自体が持つプロパティだけを削除する例です。

const obj = {
  prop1: 'value1',
  prop2: 'value2',
  prop3: 'value3'
};

for (let prop in obj) {
  if (obj.hasOwnProperty(prop)) {
    delete obj[prop];
  }
}

console.log(obj);

この例では、for...inループを使用して、オブジェクトobjのすべてのプロパティを取得し、Object.hasOwnProperty()メソッドを使用して、オブジェクト自体が持つプロパティだけを削除しています。この方法を使用することで、プロトタイプチェーンのプロパティを削除することを避けることができます。

このように、Object.hasOwnProperty()メソッドを使用することで、オブジェクト自体が持つプロパティだけを削除することができます。

統合

スプレッド構文

スプレッド構文は、配列やオブジェクトの要素を展開して、新しい配列やオブジェクトを作成するために使用されます。

以下は、オブジェクトのスプレッド構文を使用して、複数のオブジェクト型変数を統合する例です。

const obj1 = {
  prop1: 'value1',
  prop2: 'value2'
};

const obj2 = {
  prop3: 'value3',
  prop4: 'value4'
};

const combinedObj = {...obj1, ...obj2};

console.log(combinedObj);

この例では、オブジェクトobj1とobj2を統合し、combinedObjという新しいオブジェクトを作成しています。combinedObjには、obj1とobj2のすべてのプロパティが含まれます。

Object.assign()メソッド

Object.assign()メソッドを使用して、複数のオブジェクト型変数を統合する例です。

const obj1 = {
  prop1: 'value1',
  prop2: 'value2'
};

const obj2 = {
  prop3: 'value3',
  prop4: 'value4'
};

const combinedObj = Object.assign({}, obj1, obj2);

console.log(combinedObj);

この例では、Object.assign()メソッドを使用して、obj1とobj2を統合しています。combinedObjには、obj1とobj2のすべてのプロパティが含まれます。

---

関連記事

JavaScriptの記事一覧

JavaScript