← Back

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

2023年4月10日eyecatch

この記事では、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の使い方、プロパティの種類について覚えておきましょう。

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

この記事の目次
フロントエンドRPGについて

当ブログは、Web開発に役立つ情報を日々の学びをもとに発信しています。
サイト制作やブログのカスタマイズについて承ります。
お気軽にご連絡・ご相談ください。

©2024 フロントエンドRPG Created by KOBI 23プライバシーポリシー