MENU

JavaScriptのオブジェクトのプロパティディスクリプタと設定方法を完全解説

JavaScript

JavaScriptのオブジェクトは、柔軟で強力なデータ構造として知られています。オブジェクトの各プロパティには、値だけでなく、属性（プロパティディスクリプタ）も設定できます。これにより、プロパティの挙動を細かく制御することが可能です。例えば、プロパティが変更可能か、列挙可能か、または読み取り専用かなどを設定できます。この記事では、JavaScriptのオブジェクトのプロパティディスクリプタについて、その基本概念から具体的な設定方法、そして実際の応用例までを詳しく解説します。プロパティディスクリプタをマスターすることで、より堅牢でメンテナブルなコードを書くことができるようになるでしょう。

ITtripTOOLS
その「面倒」、無料で解決。 ITtripがつくる、6つの道具。 無料ツール一覧へ すべて無料・追加課金なし
先頭0を守るCSV編集こわさないCSV PDFに直接書き込みかけるPDF 写真＋説明をPDFに写レポ スマホ⇄PCで共有コピペ便 · 文章・写真 みんなの日程を調整日程Fit 匿名質問・投票を集めるKOEQ
目次

プロパティディスクリプタとは

プロパティディスクリプタとは、JavaScriptのオブジェクトプロパティの挙動を詳細に定義するためのオブジェクトです。通常、オブジェクトのプロパティには値だけが設定されますが、プロパティディスクリプタを使うことで、プロパティの特性（例えば、書き換え可能か、列挙可能か、削除可能かなど）を細かく制御することができます。

プロパティディスクリプタの基本概念

プロパティディスクリプタには二つの主要なタイプがあります：データプロパティディスクリプタとアクセサプロパティディスクリプタです。どちらも、プロパティの挙動を制御するために使用されますが、それぞれ異なる属性を持っています。

データプロパティディスクリプタ

データプロパティディスクリプタは、通常のプロパティの値を保持し、その値の書き換えや列挙の可否などを制御します。属性には以下のものがあります：

  • value: プロパティの値
  • writable: 値の書き換えが可能かどうか（デフォルトはfalse）
  • enumerable: プロパティが列挙可能かどうか（デフォルトはfalse）
  • configurable: プロパティが削除可能か、またはその属性が変更可能かどうか（デフォルトはfalse）

アクセサプロパティディスクリプタ

アクセサプロパティディスクリプタは、ゲッターとセッター関数を通じてプロパティの値を取得・設定するためのものです。属性には以下のものがあります：

  • get: プロパティの値を取得するための関数
  • set: プロパティの値を設定するための関数
  • enumerable: プロパティが列挙可能かどうか（デフォルトはfalse）
  • configurable: プロパティが削除可能か、またはその属性が変更可能かどうか（デフォルトはfalse）

プロパティディスクリプタを使用することで、オブジェクトのプロパティを詳細に制御し、意図しない変更や操作を防ぐことができます。次のセクションでは、これらのディスクリプタの具体的な構成要素についてさらに詳しく説明します。

データプロパティとアクセサプロパティ

JavaScriptのプロパティディスクリプタには、データプロパティとアクセサプロパティの二種類があります。これらはプロパティの動作を異なる方法で制御します。

データプロパティ

データプロパティは、プロパティの値を直接保持し、その値の書き換えや列挙の可否などを制御します。データプロパティディスクリプタの主な属性は以下の通りです：

value

プロパティの値を設定します。この値は、オブジェクトのプロパティに格納され、後でアクセスすることができます。

let obj = {};
Object.defineProperty(obj, 'name', {
  value: 'John',
  writable: true,
  enumerable: true,
  configurable: true
});
console.log(obj.name); // John

writable

プロパティの値が書き換え可能かどうかを示します。trueの場合、値の変更が可能です。デフォルトはfalseです。

let obj = {};
Object.defineProperty(obj, 'name', {
  value: 'John',
  writable: false
});
obj.name = 'Jane'; // 変更されない
console.log(obj.name); // John

enumerable

プロパティが列挙可能かどうかを示します。trueの場合、for...inループやObject.keysメソッドでプロパティが列挙されます。デフォルトはfalseです。

let obj = {};
Object.defineProperty(obj, 'name', {
  value: 'John',
  enumerable: true
});
console.log(Object.keys(obj)); // ['name']

configurable

プロパティが削除可能かどうか、またはその属性が変更可能かどうかを示します。trueの場合、delete演算子でプロパティを削除でき、プロパティディスクリプタを変更できます。デフォルトはfalseです。

let obj = {};
Object.defineProperty(obj, 'name', {
  value: 'John',
  configurable: true
});
delete obj.name;
console.log(obj.name); // undefined

アクセサプロパティ

アクセサプロパティは、値を直接保持するのではなく、ゲッター関数とセッター関数を使ってプロパティの値を取得・設定します。アクセサプロパティディスクリプタの主な属性は以下の通りです：

get

プロパティの値を取得するための関数を設定します。この関数は、プロパティがアクセスされたときに呼び出されます。

let obj = {};
Object.defineProperty(obj, 'name', {
  get: function() {
    return 'John';
  }
});
console.log(obj.name); // John

set

プロパティの値を設定するための関数を設定します。この関数は、プロパティに値が設定されたときに呼び出されます。

let obj = {};
let nameValue = '';
Object.defineProperty(obj, 'name', {
  set: function(value) {
    nameValue = value;
  }
});
obj.name = 'John';
console.log(nameValue); // John

アクセサプロパティのenumerableとconfigurable属性はデータプロパティと同じ意味を持ちます。データプロパティとアクセサプロパティを使い分けることで、JavaScriptのオブジェクトを柔軟に制御することができます。

プロパティディスクリプタの構成要素

プロパティディスクリプタは、JavaScriptオブジェクトのプロパティに対して詳細な設定を行うためのオブジェクトです。ここでは、プロパティディスクリプタを構成する各要素について詳しく説明します。

データプロパティディスクリプタの構成要素

データプロパティディスクリプタは、プロパティの値を直接設定するために使用されます。その構成要素は以下の通りです：

value

プロパティに関連付けられた値です。この値は、プロパティが読み取られるときに返されます。任意のデータ型を設定できます。

let obj = {};
Object.defineProperty(obj, 'name', {
  value: 'John',
  writable: true,
  enumerable: true,
  configurable: true
});
console.log(obj.name); // John

writable

プロパティの値が書き換え可能かどうかを示すブール値です。trueの場合、プロパティの値を変更できます。デフォルトはfalseです。

let obj = {};
Object.defineProperty(obj, 'name', {
  value: 'John',
  writable: false
});
obj.name = 'Jane'; // 値は変更されない
console.log(obj.name); // John

enumerable

プロパティが列挙可能かどうかを示すブール値です。trueの場合、for...inループやObject.keysメソッドでプロパティが列挙されます。デフォルトはfalseです。

let obj = {};
Object.defineProperty(obj, 'name', {
  value: 'John',
  enumerable: true
});
console.log(Object.keys(obj)); // ['name']

configurable

プロパティが削除可能か、またはその属性が変更可能かどうかを示すブール値です。trueの場合、delete演算子でプロパティを削除したり、プロパティディスクリプタの属性を変更したりできます。デフォルトはfalseです。

let obj = {};
Object.defineProperty(obj, 'name', {
  value: 'John',
  configurable: true
});
delete obj.name;
console.log(obj.name); // undefined

アクセサプロパティディスクリプタの構成要素

アクセサプロパティディスクリプタは、ゲッター関数とセッター関数を使ってプロパティの値を取得・設定するために使用されます。その構成要素は以下の通りです：

get

プロパティの値を取得するための関数です。プロパティが読み取られるときにこの関数が呼び出されます。

let obj = {};
Object.defineProperty(obj, 'name', {
  get: function() {
    return 'John';
  }
});
console.log(obj.name); // John

set

プロパティの値を設定するための関数です。プロパティに値が設定されるときにこの関数が呼び出されます。

let obj = {};
let nameValue = '';
Object.defineProperty(obj, 'name', {
  set: function(value) {
    nameValue = value;
  }
});
obj.name = 'John';
console.log(nameValue); // John

enumerable

アクセサプロパティも列挙可能かどうかを設定できます。データプロパティと同様に、trueの場合、for...inループやObject.keysメソッドでプロパティが列挙されます。

configurable

アクセサプロパティが削除可能か、またはその属性が変更可能かどうかを設定します。データプロパティと同様に、trueの場合、プロパティを削除したり、属性を変更したりできます。

プロパティディスクリプタのこれらの構成要素を理解することで、JavaScriptオブジェクトのプロパティを細かく制御し、予期しない動作を防ぐことができます。次のセクションでは、プロパティのデフォルト属性について詳しく見ていきます。

プロパティのデフォルト属性

JavaScriptのオブジェクトプロパティには、特定のデフォルト属性が設定されています。これらのデフォルト属性を理解することで、プロパティの挙動を予測しやすくなり、必要に応じて適切な設定を行うことができます。

データプロパティのデフォルト属性

データプロパティのデフォルト属性は以下の通りです：

value

プロパティに関連付けられた値です。デフォルトではundefinedです。

let obj = {};
Object.defineProperty(obj, 'name', {
  value: undefined
});
console.log(obj.name); // undefined

writable: false

プロパティの値が書き換え可能かどうかを示します。デフォルトではfalseです。

let obj = {};
Object.defineProperty(obj, 'name', {});
obj.name = 'John'; // 値は設定されない
console.log(obj.name); // undefined

enumerable: false

プロパティが列挙可能かどうかを示します。デフォルトではfalseです。

let obj = {};
Object.defineProperty(obj, 'name', {});
console.log(Object.keys(obj)); // []

configurable: false

プロパティが削除可能かどうか、またはその属性が変更可能かどうかを示します。デフォルトではfalseです。

let obj = {};
Object.defineProperty(obj, 'name', {});
delete obj.name; // プロパティは削除されない
console.log(obj.name); // undefined

アクセサプロパティのデフォルト属性

アクセサプロパティのデフォルト属性は以下の通りです：

get: undefined

プロパティの値を取得するための関数です。デフォルトでは設定されていません（undefined）。

let obj = {};
Object.defineProperty(obj, 'name', {
  get: undefined
});
console.log(obj.name); // undefined

set: undefined

プロパティの値を設定するための関数です。デフォルトでは設定されていません（undefined）。

let obj = {};
Object.defineProperty(obj, 'name', {
  set: undefined
});
obj.name = 'John'; // 値は設定されない
console.log(obj.name); // undefined

enumerable: false

アクセサプロパティが列挙可能かどうかを示します。デフォルトではfalseです。

configurable: false

アクセサプロパティが削除可能かどうか、またはその属性が変更可能かどうかを示します。デフォルトではfalseです。

これらのデフォルト属性を念頭に置くことで、Object.definePropertyやObject.definePropertiesを使ってプロパティを定義する際に、必要な属性を正確に設定できます。次のセクションでは、実際にオブジェクトのプロパティを定義する方法について詳しく見ていきます。

オブジェクトのプロパティを定義する

JavaScriptでは、Object.definePropertyメソッドを使ってオブジェクトのプロパティを詳細に定義することができます。このメソッドを使うことで、プロパティのデフォルト属性を変更し、特定の動作を制御することが可能になります。

Object.definePropertyの使用方法

Object.definePropertyメソッドは、以下のシンタックスで使用されます：

Object.defineProperty(obj, prop, descriptor);
  • obj: プロパティを定義するオブジェクト
  • prop: 定義するプロパティの名前
  • descriptor: プロパティディスクリプタオブジェクト

プロパティの定義例

ここでは、Object.definePropertyを使ってプロパティを定義する具体的な例を紹介します。

基本的なプロパティの定義

以下の例では、オブジェクトobjに対してnameプロパティを定義し、その値を"John"に設定します。また、プロパティが書き換え可能（writable: true）、列挙可能（enumerable: true）、および構成可能（configurable: true）であるように設定します。

let obj = {};
Object.defineProperty(obj, 'name', {
  value: 'John',
  writable: true,
  enumerable: true,
  configurable: true
});
console.log(obj.name); // John

プロパティの書き換えを禁止

次の例では、nameプロパティの値を書き換え不可に設定しています（writable: false）。

let obj = {};
Object.defineProperty(obj, 'name', {
  value: 'John',
  writable: false
});
obj.name = 'Jane'; // 値は変更されない
console.log(obj.name); // John

プロパティの列挙を禁止

この例では、nameプロパティが列挙不可に設定されています（enumerable: false）。

let obj = {};
Object.defineProperty(obj, 'name', {
  value: 'John',
  enumerable: false
});
console.log(Object.keys(obj)); // []

プロパティの削除を禁止

以下の例では、nameプロパティの削除を禁止しています（configurable: false）。

let obj = {};
Object.defineProperty(obj, 'name', {
  value: 'John',
  configurable: false
});
delete obj.name; // プロパティは削除されない
console.log(obj.name); // John

Object.definePropertiesを使用して複数のプロパティを定義

Object.definePropertiesメソッドを使うと、一度に複数のプロパティを定義できます。以下の例では、nameとageプロパティを同時に定義しています。

let obj = {};
Object.defineProperties(obj, {
  name: {
    value: 'John',
    writable: true,
    enumerable: true,
    configurable: true
  },
  age: {
    value: 30,
    writable: false,
    enumerable: true,
    configurable: true
  }
});
console.log(obj.name); // John
console.log(obj.age);  // 30

これらのメソッドを使用することで、JavaScriptオブジェクトのプロパティを詳細に制御し、意図した動作を実現することができます。次のセクションでは、プロパティの書き換えや削除を制御する方法についてさらに詳しく見ていきます。

プロパティの書き換えや削除の制御

JavaScriptのオブジェクトプロパティは、デフォルトでは書き換えや削除が可能です。しかし、プロパティディスクリプタを使用して、これらの操作を制御することができます。これにより、オブジェクトの整合性を保ち、不正な変更を防ぐことができます。

プロパティの書き換えを制御する

プロパティのwritable属性を使用して、そのプロパティの値が書き換え可能かどうかを制御できます。デフォルトではwritableはfalseに設定されています。

書き換え可能なプロパティ

writable属性をtrueに設定することで、プロパティの値を書き換え可能にできます。

let obj = {};
Object.defineProperty(obj, 'name', {
  value: 'John',
  writable: true
});
obj.name = 'Jane'; // 値は変更される
console.log(obj.name); // Jane

書き換え不可のプロパティ

writable属性をfalseに設定すると、プロパティの値は変更できなくなります。

let obj = {};
Object.defineProperty(obj, 'name', {
  value: 'John',
  writable: false
});
obj.name = 'Jane'; // 値は変更されない
console.log(obj.name); // John

プロパティの削除を制御する

プロパティのconfigurable属性を使用して、そのプロパティが削除可能かどうかを制御できます。デフォルトではconfigurableはfalseに設定されています。

削除可能なプロパティ

configurable属性をtrueに設定することで、プロパティを削除可能にできます。

let obj = {};
Object.defineProperty(obj, 'name', {
  value: 'John',
  configurable: true
});
delete obj.name; // プロパティは削除される
console.log(obj.name); // undefined

削除不可のプロパティ

configurable属性をfalseに設定すると、プロパティは削除できなくなります。

let obj = {};
Object.defineProperty(obj, 'name', {
  value: 'John',
  configurable: false
});
delete obj.name; // プロパティは削除されない
console.log(obj.name); // John

プロパティ属性の変更を制御する

configurable属性をfalseに設定すると、プロパティのディスクリプタも変更できなくなります。ただし、writable属性がtrueの場合、値は変更可能です。

let obj = {};
Object.defineProperty(obj, 'name', {
  value: 'John',
  writable: true,
  configurable: false
});
Object.defineProperty(obj, 'name', {
  writable: false
}); // エラー: プロパティのディスクリプタは変更できない

プロパティの書き換えや削除を制御することで、オブジェクトのデータを保護し、予期しない変更を防ぐことができます。次のセクションでは、複数のプロパティを一度に定義する方法について説明します。

複数のプロパティを一度に定義する

JavaScriptでは、Object.definePropertiesメソッドを使用して、一度に複数のプロパティを定義することができます。これにより、オブジェクトのプロパティ設定を効率的に行うことができます。

Object.definePropertiesの使用方法

Object.definePropertiesメソッドは、以下のシンタックスで使用されます：

Object.defineProperties(obj, {
  prop1: descriptor1,
  prop2: descriptor2,
  ...
});
  • obj: プロパティを定義するオブジェクト
  • prop1, prop2, …: 定義するプロパティの名前
  • descriptor1, descriptor2, …: 各プロパティのプロパティディスクリプタオブジェクト

複数のプロパティを定義する例

ここでは、Object.definePropertiesを使って複数のプロパティを定義する具体的な例を紹介します。

基本的なプロパティの定義

以下の例では、オブジェクトobjに対してnameとageのプロパティを同時に定義しています。それぞれのプロパティに対して異なるディスクリプタを設定しています。

let obj = {};
Object.defineProperties(obj, {
  name: {
    value: 'John',
    writable: true,
    enumerable: true,
    configurable: true
  },
  age: {
    value: 30,
    writable: false,
    enumerable: true,
    configurable: false
  }
});
console.log(obj.name); // John
console.log(obj.age);  // 30

書き換え不可のプロパティと列挙不可のプロパティ

次の例では、nameプロパティを列挙不可にし、ageプロパティを書き換え不可に設定しています。

let obj = {};
Object.defineProperties(obj, {
  name: {
    value: 'John',
    writable: true,
    enumerable: false,
    configurable: true
  },
  age: {
    value: 30,
    writable: false,
    enumerable: true,
    configurable: true
  }
});
console.log(Object.keys(obj)); // ['age']
obj.age = 31; // 値は変更されない
console.log(obj.age);  // 30

ゲッターとセッターを使用したプロパティの定義

以下の例では、ゲッターとセッターを使用してプロパティを定義しています。fullNameプロパティはfirstNameとlastNameプロパティに基づいて値を取得および設定します。

let person = {};
Object.defineProperties(person, {
  firstName: {
    value: 'John',
    writable: true,
    enumerable: true,
    configurable: true
  },
  lastName: {
    value: 'Doe',
    writable: true,
    enumerable: true,
    configurable: true
  },
  fullName: {
    get: function() {
      return `${this.firstName} ${this.lastName}`;
    },
    set: function(name) {
      [this.firstName, this.lastName] = name.split(' ');
    },
    enumerable: true,
    configurable: true
  }
});
console.log(person.fullName); // John Doe
person.fullName = 'Jane Smith';
console.log(person.firstName); // Jane
console.log(person.lastName);  // Smith

Object.definePropertiesを使うことで、複数のプロパティを一度に定義し、オブジェクトの設定を一括して行うことができます。次のセクションでは、プロパティの属性を取得する方法について詳しく見ていきます。

プロパティの属性を取得する

JavaScriptでは、Object.getOwnPropertyDescriptorメソッドを使用して、オブジェクトプロパティの属性を取得することができます。このメソッドは、プロパティディスクリプタを返し、プロパティの詳細な情報を提供します。

Object.getOwnPropertyDescriptorの使用方法

Object.getOwnPropertyDescriptorメソッドは、以下のシンタックスで使用されます：

let descriptor = Object.getOwnPropertyDescriptor(obj, prop);
  • obj: プロパティの属性を取得するオブジェクト
  • prop: 属性を取得するプロパティの名前

このメソッドは、指定されたプロパティのディスクリプタオブジェクトを返します。

プロパティの属性を取得する例

ここでは、Object.getOwnPropertyDescriptorを使用してプロパティの属性を取得する具体的な例を紹介します。

基本的な属性の取得

以下の例では、オブジェクトobjのnameプロパティのディスクリプタを取得し、その属性を表示します。

let obj = {
  name: 'John'
};
let descriptor = Object.getOwnPropertyDescriptor(obj, 'name');
console.log(descriptor);
// 出力: { value: 'John', writable: true, enumerable: true, configurable: true }

カスタムプロパティの属性の取得

次の例では、Object.definePropertyを使用して定義されたカスタムプロパティのディスクリプタを取得します。

let obj = {};
Object.defineProperty(obj, 'name', {
  value: 'John',
  writable: false,
  enumerable: false,
  configurable: false
});
let descriptor = Object.getOwnPropertyDescriptor(obj, 'name');
console.log(descriptor);
// 出力: { value: 'John', writable: false, enumerable: false, configurable: false }

アクセサプロパティの属性の取得

以下の例では、アクセサプロパティのディスクリプタを取得し、ゲッターとセッター関数の情報を表示します。

let person = {
  firstName: 'John',
  lastName: 'Doe'
};
Object.defineProperty(person, 'fullName', {
  get: function() {
    return `${this.firstName} ${this.lastName}`;
  },
  set: function(name) {
    [this.firstName, this.lastName] = name.split(' ');
  },
  enumerable: true,
  configurable: true
});
let descriptor = Object.getOwnPropertyDescriptor(person, 'fullName');
console.log(descriptor);
// 出力: { get: [Function: get fullName], set: [Function: set fullName], enumerable: true, configurable: true }

ディスクリプタ情報の活用

プロパティディスクリプタを取得することで、オブジェクトの構造やプロパティの特性を理解しやすくなります。例えば、デバッグやプロパティの管理に役立ちます。また、既存のプロパティを変更する際に、そのプロパティがどのように設定されているかを確認することができます。

let obj = {
  name: 'John'
};
let descriptor = Object.getOwnPropertyDescriptor(obj, 'name');
if (!descriptor.writable) {
  Object.defineProperty(obj, 'name', {
    writable: true
  });
}

このように、Object.getOwnPropertyDescriptorを使用してプロパティの属性を取得し、オブジェクトのプロパティを効率的に管理することができます。次のセクションでは、プロパティの列挙性を管理する方法について詳しく見ていきます。

プロパティの列挙性を管理する

JavaScriptでは、プロパティのenumerable属性を使用して、そのプロパティが列挙可能かどうかを制御できます。列挙可能なプロパティは、for...inループやObject.keysメソッドなどを使用して列挙されます。

プロパティの列挙性を制御する

enumerable属性を設定することで、プロパティが列挙可能かどうかを制御できます。デフォルトでは、プロパティは列挙可能に設定されています。

列挙可能なプロパティ

enumerable属性をtrueに設定すると、プロパティは列挙可能になります。

let obj = {};
Object.defineProperty(obj, 'name', {
  value: 'John',
  enumerable: true
});
for (let key in obj) {
  console.log(key); // 'name'
}
console.log(Object.keys(obj)); // ['name']

列挙不可のプロパティ

enumerable属性をfalseに設定すると、プロパティは列挙されなくなります。

let obj = {};
Object.defineProperty(obj, 'name', {
  value: 'John',
  enumerable: false
});
for (let key in obj) {
  console.log(key); // 出力されない
}
console.log(Object.keys(obj)); // []

プロパティの列挙性の変更例

ここでは、既存のプロパティの列挙性を変更する例を紹介します。

プロパティの列挙性を変更

以下の例では、オブジェクトobjのnameプロパティを非列挙可能に設定します。

let obj = { name: 'John' };
Object.defineProperty(obj, 'name', {
  enumerable: false
});
for (let key in obj) {
  console.log(key); // 出力されない
}
console.log(Object.keys(obj)); // []

複数のプロパティの列挙性を一度に設定

Object.definePropertiesメソッドを使用して、複数のプロパティの列挙性を一度に設定できます。

let obj = {};
Object.defineProperties(obj, {
  name: {
    value: 'John',
    enumerable: true
  },
  age: {
    value: 30,
    enumerable: false
  }
});
for (let key in obj) {
  console.log(key); // 'name'のみ出力
}
console.log(Object.keys(obj)); // ['name']

列挙性の確認

プロパティの列挙性を確認するには、Object.getOwnPropertyDescriptorメソッドを使用します。

let obj = { name: 'John' };
Object.defineProperty(obj, 'name', {
  enumerable: false
});
let descriptor = Object.getOwnPropertyDescriptor(obj, 'name');
console.log(descriptor.enumerable); // false

応用例：プロパティの隠蔽

列挙不可のプロパティを活用することで、オブジェクトの内部データを隠蔽することができます。例えば、内部状態を持つオブジェクトを作成する場合に役立ちます。

function createPerson(name) {
  let person = {};
  Object.defineProperty(person, '_name', {
    value: name,
    writable: true,
    enumerable: false
  });
  Object.defineProperty(person, 'name', {
    get: function() {
      return this._name;
    },
    set: function(newName) {
      this._name = newName;
    },
    enumerable: true
  });
  return person;
}
let john = createPerson('John');
for (let key in john) {
  console.log(key); // 'name'のみ出力
}
console.log(Object.keys(john)); // ['name']
console.log(john._name); // 'John' （直接アクセスは可能だが、列挙されない）

このように、プロパティの列挙性を管理することで、オブジェクトの構造やアクセス性を制御することができます。次のセクションでは、アクセサプロパティの具体例について詳しく見ていきます。

アクセサプロパティの具体例

アクセサプロパティは、ゲッター関数とセッター関数を使用してプロパティの値を取得および設定する特別なタイプのプロパティです。これにより、プロパティの値を計算したり、設定時に特定のロジックを実行したりすることができます。

基本的なアクセサプロパティの定義

ここでは、基本的なアクセサプロパティを定義する方法を紹介します。Object.definePropertyメソッドを使用して、ゲッターとセッターを設定します。

let person = {
  firstName: 'John',
  lastName: 'Doe'
};

Object.defineProperty(person, 'fullName', {
  get: function() {
    return `${this.firstName} ${this.lastName}`;
  },
  set: function(name) {
    [this.firstName, this.lastName] = name.split(' ');
  },
  enumerable: true,
  configurable: true
});

console.log(person.fullName); // John Doe
person.fullName = 'Jane Smith';
console.log(person.firstName); // Jane
console.log(person.lastName);  // Smith

読み取り専用のアクセサプロパティ

ゲッターのみを定義し、セッターを定義しないことで、読み取り専用のプロパティを作成できます。

let person = {
  firstName: 'John',
  lastName: 'Doe'
};

Object.defineProperty(person, 'fullName', {
  get: function() {
    return `${this.firstName} ${this.lastName}`;
  },
  enumerable: true,
  configurable: true
});

console.log(person.fullName); // John Doe
person.fullName = 'Jane Smith'; // 値は変更されない
console.log(person.fullName); // John Doe

計算プロパティの実装

アクセサプロパティは、プロパティの値を計算するためにも使用できます。例えば、円のオブジェクトに対して、半径から面積を計算するプロパティを定義することができます。

let circle = {
  radius: 5
};

Object.defineProperty(circle, 'area', {
  get: function() {
    return Math.PI * this.radius * this.radius;
  },
  enumerable: true,
  configurable: true
});

console.log(circle.area); // 78.53981633974483
circle.radius = 10;
console.log(circle.area); // 314.1592653589793

データバリデーションの実装

セッターを使用してプロパティの値を設定する際に、データのバリデーションを実装できます。

let user = {};
Object.defineProperty(user, 'age', {
  get: function() {
    return this._age;
  },
  set: function(value) {
    if (value < 0) {
      console.log('年齢は0以上でなければなりません');
    } else {
      this._age = value;
    }
  },
  enumerable: true,
  configurable: true
});

user.age = 25;
console.log(user.age); // 25
user.age = -5; // 年齢は0以上でなければなりません
console.log(user.age); // 25

アクセサプロパティの削除

configurable属性をtrueに設定することで、アクセサプロパティを削除可能にすることができます。

let person = {
  firstName: 'John',
  lastName: 'Doe'
};

Object.defineProperty(person, 'fullName', {
  get: function() {
    return `${this.firstName} ${this.lastName}`;
  },
  set: function(name) {
    [this.firstName, this.lastName] = name.split(' ');
  },
  enumerable: true,
  configurable: true
});

delete person.fullName;
console.log(person.fullName); // undefined

アクセサプロパティを使用することで、プロパティの値を動的に計算したり、設定時に特定のロジックを実行したりすることが可能になります。これにより、オブジェクトのプロパティをより柔軟に制御することができます。次のセクションでは、本記事の内容をまとめます。

まとめ

本記事では、JavaScriptのオブジェクトプロパティディスクリプタについて、その基本概念から具体的な設定方法、応用例までを詳しく解説しました。プロパティディスクリプタを使用することで、オブジェクトのプロパティの挙動を詳細に制御し、より堅牢でメンテナブルなコードを書くことが可能になります。

データプロパティとアクセサプロパティの違いや、それぞれのディスクリプタ属性（value、writable、enumerable、configurable、get、set）を理解することで、プロパティの定義と管理が容易になります。また、Object.definePropertyやObject.definePropertiesメソッドを使用して、プロパティの書き換えや削除を制御し、プロパティの列挙性を管理することができるようになります。

さらに、アクセサプロパティを活用することで、プロパティの値を動的に計算したり、データバリデーションを実装したりすることも可能です。これにより、オブジェクトのプロパティをより柔軟に制御し、予期しない動作を防ぐことができます。

プロパティディスクリプタを適切に活用することで、JavaScriptのオブジェクトを効果的に管理し、より高品質なコードを実現しましょう。

JavaScript
オブジェクト プロパティ JavaScript ディスクリプタ

この記事を書いた人

佐藤健司のアバター 佐藤健司

実務の現場で詰まりがちなポイントを地図にするITブログ「IT trip」を運営。Windows／Office（Teams・Excel）からSQL、サーバ運用、ガジェットまで、再現性のある手順と“なぜそうなるか”を丁寧に解説します。読んだらすぐ試せること、そして迷った人の次の一歩が見えることを大切にしています。

関連記事

コメント

コメントする

目次