【JS】ディスクリプタを最低限の理解まで持っていく

はじめに

まず、ディスクリプタって聞いたことありますか？？
自分は初めて聞く単語で今も戸惑っています。。w
用語の理解と実際の使い方などを最低限のレベルまで持って行けたら良いなと思います！

ディスクリプタとは

オブジェクトプロパティには、キーバリューストア(key-value)のイメージがあると思いますが、もっと柔軟で強力なものです。ディスクリプタとは、プロパティを細かく制御することが可能で、その制御モードを指示するオブジェクトのことです。
Object.defineProperty(オブジェクト, "属性", { ディスクリプタ }のように設定できる。

// オブジェクトを生成
let obj = {}

// 生成したオブジェクトにnameプロパティを設定する
Object.defineProperty(obj, "name", {
  value: 'tanaka', // 実際に持つ値      
  writable: false // 値の変更可能性
  enumerable: false, // 列挙可能性
  configurable: false, // 設定変更可能性
}

// 以下のようにすることで全てtrueで設定されます
let user = { name: "tanaka" };

ゲッターとセッター

値を取得するときや、変更するときの処理をカスタマイズしたい時は、ゲッター(getter)とセッター(setter)を設定します。

class Person {
  constructor(name, age) {
    this._name = name;
    this._age = age;
  }

  // name属性のgetterを設定
  get name() {
    return this._name;
  }

  // name属性のsetterを設定
  set name(val) {
    this._name = val;
  }
}

使い所は？

• 値の取得や更新の際に、任意の処理を実行したいとき
  • 更新したと同時に他の値も同時に更新したいときなど

静的メソッドの設定

クラス内で使用する静的メソッドを使用する際には、staticを使用します。これは、インスタンス化せずに使用する事が出来ます。
※thisは使用できません

class Person {
  constructor(name, age) {
    this._name = name;
    this._age = age;
  }
.
.
.
  // 静的メソッドhelloを定義
  static hello() {
    console.log('hello')
  }
}

Person.hello() // => 'hello'

終わりに

少しだけでもお力添えできたら幸いです。。

参考

[JavaScriptのディスクリプタを使い、堅牢なオブジェクトやObservableなオブジェクトを作る]
(https://qiita.com/vsanna/items/a65c4aa0de4e829b46be)

[JavaScriptのGetter Setterを理解する(入門者向け)]
(https://reffect.co.jp/html/javascript-getter-setter)

[プロパティフラグとディスクリプタ]
(https://ja.javascript.info/property-descriptors)