本文章ではJavaScriptのGetterとSetter ,Object.defineProtperyについて説明を行っています。ライブラリのコードを読むときや文書を読む時に目にする機会があるので自分で利用する機会がなかったとしても知っていて損はありません。

ネット上でGetterとSetterの例に頻繁に利用されているfirstNameとlastNameとfullNameを使って説明を行っています。

フルネームを表示する方法

まずfirstNameとlastNameをもつuser オブジェクトを定義します。


let user = {
  firstName: "John",
  lastName: "Doe",
};

このユーザのフルネームを表示させたい場合はどうしますか?

変数の結合を利用した方法

1 つ目の方法としてはfirstNameとlastNameを結合することでよフルネームを表示することはできます。一番わかりやすく入門者であればこの方法が最初に思い浮かぶと思います。


console.log(user.firstName + " " + user.lastName);
console.log(`${user.firstName} ${user.lastName}`); // ES6 今後はこちらを利用
//結果
John Doe
John Doe

しかしこの場合はフルネームを表示させたい場合にこの長いコードを毎回記述する必要があります。

メソッドを利用した方法

つぎに考えられるのが、オブジェクトにfullNameメソッドを追加することです。追加したメソッドを実行したい場合はuser.fullNameのカッコをつける必要があります。


let user = {
  firstName: "John",
  lastName: "Doe",
  fullName: function () {
    return `${user.firstName} ${user.lastName}`;
  },
};

console.log(user.fullName());
//結果
John Doe

Getterを利用した方法

Getterを利用すると以下のように記述することができます。こんな方法があるのかと初めて見る人は驚くかもしれません。


let user = {
  firstName: "John",
  lastName: "Doe",

  get fullName() {
    return `${user.firstName} ${user.lastName}`;
  },
};

console.log(user.fullName);
//結果
John Doe

メソッドの場合と異なり、実行する際はカッコが必要でなくfirstNameやlastNameのプロパティにアクセスする場合と同じように記述を行うことができます。

このようにGetterを利用することでfirstNameとlastNameを結合し、プロパティのように扱うことができます。

.(ドット)ではなく[]カッコを利用してもアクセスすることが可能です。


console.log(user["fullName"]);
//結果
John Doe

通常のプロパティのようにアクセスできたので値も設定できるのではと考えてしまいます。しかしGetterだけではfullNameに対して値を設定しても値を反映することができません。


user.fullName = "Kit Harington";

値を設定するために利用するのがSetterです。

Setterを利用した値の設定

今回の名前の例では、Setterを利用して値を設定する場合フルーネームを利用します。フルーネームはファーストネームとラストネームの間に空白を挟んでいるので空白を挟んでいるフルネームの値をファーストネームとラストネームの2つに分ける方法を理解しておく必要があります。

この処理は今回の例で利用する場合に知っておかなければならないメソッドですが、直接Setterに影響を与えるものではありません。

splitメソッドの理解

John Doeというフルネームが与えられたら真ん中に入っている空白によってfirstNameとlastNameをわける必要があります。splitに区切り文字である空白を入れることでfirstNameとlastNameにわけることができます。


fullName = "John Doe";
console.log(fullName.split(" "));
//結果
[ 'John', 'Doe' ]

分割代入を利用すると下記のようにsplitで分けたfirstNameとlastNameを取得することができます。


fullName = "John Doe";
[firstName, lastName] = fullName.split(" ");
console.log(firstName);
console.log(lastName);

Setterを利用した方法

setではfullNameに引数valueを設定し、splitメソッドで文字列を空白で分割し、分割代入でfirstNameとlastNameを設定しています。この時thisをつける必要があります。


let user = {
  firstName: "John",
  lastName: "Doe",

  get fullName() {
    return `${user.firstName} ${user.lastName}`;
  },
  set fullName(value) {
    [this.firstName, this.lastName] = value.split(" ");
  },
};

user.fullName = "Kit Harington";

console.log(user.fullName);

// 結果
Kit Harington

getとsetで同じfullNameを利用していますが、”=”(イコール)で値を設定する場合はsetterが利用され、値を取得する場合はgetterが利用されます。

setterの中で入力した文字列のチェックを行うことも可能です。matchメソッドを利用して入力した文字列に空白がないかチェックをして空白がない場合はメッセージを出力します。


let user = {
  firstName: "John",
  lastName: "Doe",

  get fullName() {
    return `${user.firstName} ${user.lastName}`;
  },
  set fullName(value) {
    if (!value.match(" ")) {
      console.log("入力した文字の名前に空白がありません。");
      return;
    }
    [this.firstName, this.lastName] = value.split(" ");
  },
};

user.fullName = "KitHarington";

console.log(user.fullName);

// 結果
入力した文字の名前に空白がありません。
John Doe

Settterで設定するfullNameの文字列に空白を入れた場合はメッセージは出ません。

 Object.definePropertyメソッド

 Object.definePropertyを利用することでも定義ずみのuserオブジェクトに対してGetterとSetterを追加設定することができます。Object.definePropertyという名前と書式から最初は間違いなく戸惑ってしまうかもしれませんが、これまでのGetterとSetterが理解できていればそれほど難しいものではありません。

下記のコードでは定義済のuserオブジェクトに対して、Object.definePropertyを利用してSetterとGetterを追加設定しています。


let user = {
  firstName: "John",
  lastName: "Doe",
};
// userは定義済み
Object.defineProperty(user, "fullName", {
  get: function () {
    return `${user.firstName} ${user.lastName}`;
  },
  set: function (value) {
    [this.firstName, this.lastName] = value.split(" ");
  },
});

user.fullName = "Kit Harington";

console.log(user.fullName);

Object.definePropertyの書式は下記の通りです。

Object.defineProperty(オブジェクト, プロパティ名, ディスクリプター)

上記の例ではオブジェクトにはuserオブジェクトが対応し、プロパティ名はアクセスする際に利用するプロパティ名のfullNameが対応し、ディスクリプターには、getとsetを持つオブジェクトが対応しています。

ディスクリプター

Object.definePropertyにはget, set以外にもenumerable, configurable,を設定することができます。enumerable, configurableについてtrue, falseを設定することができます。

true, falseに設定することによりどのような違いがあるか確認します。

enumerableの設定

デフォルトではenumerableはfalseですが、明示的に指定すると以下のように設定することができます。


Object.defineProperty(user, "fullName", {
  get: function () {
    return `${user.firstName} ${user.lastName}`;
  },
  set: function (value) {
    if (!value.match(" ")) {
      console.log("入力した文字の名前に空白がありません。");
      return;
    }
    [this.firstName, this.lastName] = value.split(" ");
  },
  enumerable: true,
});

forループを利用するとObject.definePropertyで追加したfullNameが表示されます。


for (key in user) {
  console.log(key);
}
//結果
{ firstName: 'Kit', lastName: 'Harington', fullName: 'Kit Harington' }

enumerableをfalseに設定するとfullNameは表示されません。


// enumerableがfalseの場合
for (key in user) {
  console.log(key);
}
//結果
{ firstName: 'Kit', lastName: 'Harington' }

Object.assignの場合(enumerable)

Object.assignを利用してオブジェクトをマージする際にenumerableがtrueの場合はfullNameはマージされますがfalseの場合はマージに含まれません。


// enumerableがtrueの場合
console.log(Object.assign({}, user));
//結果
{ firstName: 'Kit', lastName: 'Harington', fullName: 'Kit Harington' }

// enumerableがfalseの場合
console.log(Object.assign({}, user));
//結果
{ firstName: 'Kit', lastName: 'Harington' }

configurableの設定

configurableを設定することでdeleteを利用したプロパティの削除を制御することができます。設定する場合はenumerableと同様に以下のように設定を行います。デフォルトではfalseに設定されています。


Object.defineProperty(user, "fullName", {
  get: function () {
    return `${user.firstName} ${user.lastName}`;
  },
  set: function (value) {
    if (!value.match(" ")) {
      console.log("入力した文字の名前に空白がありません。");
      return;
    }
    [this.firstName, this.lastName] = value.split(" ");
  },
  enumerable: true,
  configurable: true,
});

trueの場合は削除することができるのでdeleteした後はundefinedになります。falseの場合は削除できないためfullNameがそのまま表示されます。


//configurable: trueの場合
delete user.fullName;
console.log(user.fullName);
//結果
undefined

//configurable: falseの場合
delete user.fullName;
console.log(user.fullName);
//結果
Kit Harington

まとめ

Getter, Setter, Object.definePropetyの設定方法を簡単な例を利用して説明を行いました。この例を理解していれば自分自身で活用しなかったとしてもコード中にこれらの用語が出てきた場合もコードの理解が進むと思います。