LoginSignup
0
0

【JavaScript】setter / getter

Last updated at Posted at 2023-05-24

▼ ディスクリプターに設定できるオプション set / get

setter / getter

getterとsetterは、オブジェクトのプロパティにアクセスするための特殊なメソッド
これらのメソッドを使用することで、プロパティの値の取得と設定をカスタマイズすることができる

getter

プロパティの値を取得するためのメソッド
通常のメソッドとは異なり、プロパティ名の前にgetを付けて定義する
getterは、プロパティにアクセスするときに自動的に呼び出され、その結果が取得される

.js
const person = {
  firstName: 'John',
  lastName: 'Doe',
  get fullName() {
    return this.firstName + ' ' + this.lastName;
  }
};

console.log(person.fullName); // 'John Doe'

上記の例では、fullNameというgetterを定義している
person.fullNameというプロパティにアクセスすると、getterが呼び出されてfirstNameとlastNameを結合したフルネームが返される

setter

プロパティの値を設定するためのメソッド
同様に、setを使用して定義する
setterは、プロパティに新しい値を代入するときに自動的に呼び出され、その値を受け取って処理を行う

.js
const person = {
  firstName: 'John',
  lastName: 'Doe',
  set fullName(value) {
    const names = value.split(' ');
    this.firstName = names[0];
    this.lastName = names[1];
  }
};

person.fullName = 'Jane Smith';
console.log(person.firstName); // 'Jane'
console.log(person.lastName); // 'Smith'

上記の例では、fullNameというsetterを定義
person.fullNameに値を代入すると、setterが呼び出されて代入された値を分割し、firstNameとlastNameに設定する

static

インスタンス化を行わずに使用できるメソッド

staticは、クラスの静的メンバー(プロパティやメソッド)を定義するために使用する
静的メンバーは、クラス自体に関連付けられるメンバーであり、インスタンスごとに異なる値を持たず、クラスレベルで共有される

静的プロパティは、クラス自体に属するプロパティであり、各インスタンスごとに異なる値ではなく、クラスの単一のコピーが共有される
静的メソッドは、クラス自体に属するメソッドであり、インスタンスではなくクラス自体に対して呼び出される

class Circle {
  static PI = 3.14; // 静的プロパティ

  constructor(radius) {
    this.radius = radius; // インスタンスプロパティ
  }

  static calculateArea(radius) { // 静的メソッド
    return Circle.PI * radius * radius;
  }
}

console.log(Circle.PI); // 3.14 (静的プロパティにアクセス)
console.log(Circle.calculateArea(5)); // 78.5 (静的メソッドの呼び出し)

const myCircle = new Circle(3);
console.log(myCircle.radius); // 3 (インスタンスプロパティにアクセス)
// console.log(myCircle.calculateArea(5)); // エラー: 静的メソッドはインスタンスから呼び出せない

上記の例では、Circleクラスに静的プロパティであるPIと静的メソッド
calculateAreaを定義している
静的プロパティはCircle.PIのようにクラス自体に直接アクセスできる
静的メソッドはCircle.calculateArea(5)のようにクラス自体に対して呼び出される

staticキーワードを使用することで、特定のメンバーがクラスに固有であるか、インスタンスごとに異なるかを明示的に示すことができる

参考資料

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0