概要: このチュートリアルでは、JavaScriptのゲッターとセッターについて学び、それらを効果的に使用する方法を説明します。
JavaScriptのゲッターとセッターの概要
以下の例では、Personという名前のクラスを定義します。
class Person {
constructor(name) {
this.name = name;
}
}
let person = new Person("John");
console.log(person.name); // JohnCode language: JavaScript (javascript)Personクラスには、nameプロパティとコンストラクターがあります。コンストラクターは、nameプロパティを文字列に初期化します。
場合によっては、nameプロパティにこのように直接アクセスさせたくない場合があります。
person.nameCode language: CSS (css)そのため、nameプロパティを操作する一対のメソッドを思いつくかもしれません。例えば
class Person {
constructor(name) {
this.setName(name);
}
getName() {
return this.name;
}
setName(newName) {
newName = newName.trim();
if (newName === '') {
throw 'The name cannot be empty';
}
this.name = newName;
}
}
let person = new Person('Jane Doe');
console.log(person); // Jane Doe
person.setName('Jane Smith');
console.log(person.getName()); // Jane SmithCode language: JavaScript (javascript)この例では、Personクラスにはnameプロパティがあります。また、getName()とsetName()の2つの追加メソッドがあります。
getName()メソッドは、nameプロパティの値を返します。
setName()メソッドは、引数をnameプロパティに割り当てます。setName()は、newName引数の両端から空白を削除し、newNameが空の場合は例外をスローします。
constructor()は、setName()メソッドを呼び出して、nameプロパティを初期化します。
constructor(name) {
this.setName(name);
}Code language: JavaScript (javascript)getName()メソッドとsetName()メソッドは、JavaやC++などの他のプログラミング言語では、ゲッターとセッターとして知られています。
ES6は、getとsetキーワードを使用して、ゲッターとセッターを定義するための特定の構文を提供します。例えば
class Person {
constructor(name) {
this._name = name;
}
get name() {
return this._name;
}
set name(newName) {
newName = newName.trim();
if (newName === '') {
throw 'The name cannot be empty';
}
this._name = newName;
}
}Code language: JavaScript (javascript)仕組み
まず、ゲッターとセッターとの名前の衝突を避けるために、nameプロパティを_nameに変更します。
次に、ゲッターはgetキーワードとメソッド名を使用します。
get name() {
return this._name;
}Code language: JavaScript (javascript)ゲッターを呼び出すには、次の構文を使用します。
let name = person.name;Code language: JavaScript (javascript)JavaScriptは、Personクラスのnameプロパティへのアクセスを検出すると、Personクラスにnameプロパティがあるかどうかを確認します。
そうでない場合、JavaScriptは、Personクラスにnameプロパティにバインドするメソッドがあるかどうかを確認します。この例では、name()メソッドはgetキーワードを介してnameプロパティにバインドされます。JavaScriptがゲッターメソッドを見つけると、ゲッターメソッドを実行し、値を返します。
3番目に、セッターはsetキーワードとメソッド名を使用します。
set name(newName) {
newName = newName.trim();
if (newName === '') {
throw 'The name cannot be empty';
}
this._name = newName;
}Code language: JavaScript (javascript)JavaScriptは、次のようにnameプロパティに値を代入すると、name()セッターを呼び出します。
person.name = 'Jane Smith';Code language: JavaScript (javascript)クラスにゲッターのみがあり、セッターがない状態で、セッターを使用しようとすると、変更は適用されません。次の例をご覧ください。
class Person {
constructor(name) {
this._name = name;
}
get name() {
return this._name;
}
}
let person = new Person("Jane Doe");
console.log(person.name);
// attempt to change the name, but cannot
person.name = 'Jane Smith';
console.log(person.name); // Jane DoeCode language: JavaScript (javascript)この例では、Personクラスにはnameゲッターはありますが、nameセッターはありません。セッターを呼び出そうとします。ただし、Personクラスにはnameセッターがないため、変更は適用されません。
オブジェクトリテラルでゲッターを使用する
次の例では、meetingオブジェクトの最新の参加者を返すlatestという名前のゲッターを定義します。
let meeting = {
attendees: [],
add(attendee) {
console.log(`${attendee} joined the meeting.`);
this.attendees.push(attendee);
return this;
},
get latest() {
let count = this.attendees.length;
return count == 0 ? undefined : this.attendees[count - 1];
}
};
meeting.add('John').add('Jane').add('Peter');
console.log(`The latest attendee is ${meeting.latest}.`);Code language: JavaScript (javascript)出力
John joined a meeting.
Jane joined a meeting.
Peter joined a meeting.
The latest attendee is Peter.まとめ
getキーワードとsetキーワードを使用して、クラスまたはオブジェクトのJavaScriptゲッターとセッターを定義します。getキーワードは、オブジェクトのプロパティを、そのプロパティが参照されたときに呼び出されるメソッドにバインドします。setキーワードは、オブジェクトのプロパティを、そのプロパティに値が代入されたときに呼び出されるメソッドにバインドします。
