学ぶ JavaScriptにおける静的プロパティの探求 | JavaScriptクラスと継承の習得

メニューを表示するにはスワイプしてください

プログラミングにおいて、静的プロパティはクラスのすべてのインスタンス間で共有される情報を保持するため、一貫したデータに最適。

静的プロパティとは

静的プロパティは、特定のクラスインスタンスではなくクラス自体に属するプロパティ。静的プロパティはすべてのインスタンス間で共有され、オブジェクトをインスタンス化せずにクラスから直接アクセス可能。ユーティリティ関数、定数、またはクラスのすべてのインスタンスで共有すべきデータによく使用される。

会社を例にすると、各従業員（クラスのインスタンス）は個人情報（名前、役職）を持つが、会社の住所（静的プロパティ）はすべての従業員で共通。住所は個々の従業員ではなく会社自体に属する。

静的プロパティの宣言と使用方法

静的プロパティを宣言するには、クラス内で static キーワードを使用。静的プロパティはクラス名を使ってのみアクセスでき、クラスインスタンスからはアクセス不可。


              1234567891011121314151617181920
            
class Company {
  static headquarters = '123 Main St'; // Static property

  constructor(name) {
    this.name = name; // Instance property
  }

  getCompanyInfo() {
    return `${this.name} is located at ${Company.headquarters}`;
  }
}

const google = new Company('Google');
console.log(google.getCompanyInfo()); // Output: Google is located at 123 Main St

const amazon = new Company('Amazon');
console.log(amazon.getCompanyInfo()); // Output: Amazon is located at 123 Main St

// Accessing the static property directly from the class
console.log(Company.headquarters); // Output: 123 Main St

この例では、headquarters プロパティは Company クラスのすべてのインスタンスで共有されます。Google と Amazon の両インスタンスは同じ本社住所を参照しています。静的プロパティはクラス名（Company.headquarters）を使って直接アクセスされ、クラスのインスタンスからはアクセスされません。

クラスのすべてのインスタンス間で静的プロパティが共有される仕組み

静的プロパティはクラス自体に紐付けられているため、各インスタンスごとにコピーされることはありません。クラスのすべてのインスタンスが同じ静的プロパティを参照するため、インスタンスごとに変更する必要のないデータを効率的に保存できます。

例：作成されたインスタンス数のカウンター

クラスのインスタンスがいくつ作成されたかを記録したい場合、静的プロパティを使用してインスタンス数を保持し、新しいインスタンスが作成されるたびにカウントを増やすことができます。


              123456789101112131415161718192021222324
            
class User {
  static count = 0; // Static property to track the number of users

  constructor(name) {
    this.name = name;
    User.count++; // Increment static property every time a new user is created
  }

  getUserInfo() {
    return `${this.name} is user number ${User.count}`;
  }
}

const user1 = new User('John');
const user2 = new User('Jane');
const user3 = new User('Alice');

// Accessing the static property directly from the class
console.log(User.count); // Output: 3 (number of users created)

// Each instance can see the total count of users
console.log(user1.getUserInfo()); // Output: John is user number 3
console.log(user2.getUserInfo()); // Output: Jane is user number 3
console.log(user3.getUserInfo()); // Output: Alice is user number 3

この例では、新しいユーザーが作成されるたびに静的プロパティcountが増加します。Userクラスのすべてのインスタンスは同じcount値を共有しており、これはクラス自体に属しています。

静的プロパティの利点

静的プロパティはインスタンス間で共有されるため、データの重複を避けることができ、コードをよりクリーンかつ効率的に保つことが可能。すべてのインスタンスで共通となる情報（設定値や定数など）を保存するのに特に有用であり、コード全体の一貫性維持に役立つ。

実例：アプリケーション設定

実際のケースでは、アプリケーション全体で共有される設定を格納する設定オブジェクトを持つことがある。このような用途には静的プロパティが最適な選択肢となる。


              12345678910111213141516171819202122
            
class AppConfig {
  static appName = 'QuirkApp Solutions'; // Shared configuration setting
  static version = '1.3.14'; // Shared configuration setting

  constructor(user) {
    this.user = user;
  }

  getUserConfig() {
    return `${this.user} is using ${AppConfig.appName} version ${AppConfig.version}`;
  }
}

const user1 = new AppConfig('Alice');
const user2 = new AppConfig('Bob');

console.log(user1.getUserConfig()); // Output: Alice is using QuirkApp Solutions version 1.3.14
console.log(user2.getUserConfig()); // Output: Bob is using QuirkApp Solutions version 1.3.14

// Accessing static properties directly from the class
console.log(AppConfig.appName); // Output: QuirkApp Solutions
console.log(AppConfig.version); // Output: 1.3.14