【JavaScript】getterとsetterプロパティの使い方について

この記事では、JavaScriptのgetterとsetterについて解説します。

getterとsetterは、オブジェクトに対して使用される機能です。

JavaScriptでは、オブジェクトに存在するキーとバリューのセットをプロパティと呼びます。

プロパティには2種類存在していて、それはデータプロパティとアクセサプロパティです。

getterとsetterはアクセサプロパティに分類されます。

getter

初めに、getterについて解説します。

getterは関数をプロパティのように扱う機能です。

const calcu = {
　price:120,
　count:10,
};

calcというオブジェクトがあります。

calcにあるpriceとcountを掛けて合計を求めたい場合、どのように記述すればよいでしょうか？

const calcu = {
　price:120,
　count:10,
　total:this.price * this.count,
};

このように記述すると計算ができると思いますか？

一見問題なさそうですが、実は正しく計算できません。

理由は、thisは関数が呼び出されたときに機能するからです。

thisは関数が呼び出されたときに、そのレキシカル環境のthisを割り当てます。

上のコードの場合、thisはグローバルオブジェクトを参照してしまい、totalにはUndefiend×Undefinedの結果（Undefined）が返ってしまいます。

このようにオブジェクト（calcu）の中で、自分のプロパティ（price,count）にアクセスしたい場合は、必ず関数（メソッド）にする必要があります。

const calcu = {
　price:120,
　count:10,

　total(){
　　return this.price * this.count;
 },

};

console.log(calcu.total());

console.logの中を見てください。

プロパティとしてアクセスしたいのに、関数を実行しています。

この書き方を修正する場合にgetterを使います。

const calcu = {
　price:120,
　count:10,

　get total(){
　　return this.price * this.count;
 },
};
console.log(calcu.total);

getterを記述するには、メソッド名の前でgetと書きます。

このように記述することで、プロパティのようにアクセスすることができるようになります。

【補足】

get total： function(){
　　return this.price * this.count;
 },

get total：()=>{
　　return this.price * this.count;
 },

このようにfunctionを付けたり、アロー関数で書くことはできません。

getterは、省略記法のメソッドで記述する必要があります。

setter

次に、setterについて解説します。

setterは、getterで定義したプロパティに値を代入することができます。

const calcu = {
　price:120,
　count:10,

　get total(){
　　return this.price * this.count;
 },

　set total(newValue){
　  this.count = this.newValue * this.price / 360;
 },

};

//ここで代入した値がsetのnewValueに渡ります。
calcu.total = 30;

//getterの計算結果が返ります。
console.log(calcu.total);

calcu.totalで定義した値がsetterで定義したtotalのnewValueに渡り、その値がcountに代入されます。

countは初めに10と定義されていましたが、setterによって計算された値（10）となります。

結果的に、getterで定義した計算の結果は、120×10となり、1200となります。

このようにgetterで定義した値は、直接変更を加えることができないのでsetterを使用します。

【補足】

• setterでreturnしても何も返されません。setterのプロパティをgetterのように呼び出すとUndefinedが返されます。
• getterとsetterは同じ名前で定義することができます。そしてreturnされる値は必ずgetterです。
• getterとsetterは必ずしも両方定義する必要はありません。
• setterも必ず省略記法のメソッドで書く必要があります。

データプロパティとアクセサプロパティについて

冒頭で、プロパティにはデータプロパティとアクセサプロパティの2種類があると述べました。

この2つのプロパティは共存することができないので注意してください。

const calcu = {
　price:120,
　count:10,

　get total(){
　　return this.price * this.count;
 },

　set total(newValue){
　  this.count = this.newValue * this.price / 360;
 },

//getterとsetterの後に定義しています。
　total:500,

};

console.log(calcu.total);

このように記述すると、totalには500が出力されます。

つまり、後に定義した値が優先されます。

const calcu = {
　price:120,
　count:10,


//getterとsetterの前に定義しています。
　total:500,  

　get total(){
　　return this.price * this.count;
 },

　set total(newValue){
　  this.count = this.newValue * this.price / 360;
 },
};

console.log(calcu.total);

上の場合、getterとsetterが優先されます。

const calcu = {
　price:120,
　count:10,


　get total(){
　　return this.price * this.count;
 },

//totalをgetterとsetterの間に挟んでいます。
　total:500,

　set total(newValue){
　  this.count = this.newValue * this.price / 360;
 },

};

console.log(calcu.total);

上の場合、setterだけがオブジェクトに定義されます。

データプロパティとアクセサプロパティの取り扱いに注意してください。

まとめ

この記事では、JavaScriptのgetterとsetterについて解説しました。

getterとsetterの使い方、プロパティの種類について覚えておきましょう。

最後まで読んでいただきありがとうございました。