クラスレベル vs インスタンスレベル

CoddyのJavaScriptジャーニー「オブジェクト指向プログラミング」セクションの一部 — レッスン 31/56。

JavaScriptのクラスには、プロパティとメソッドの2つの異なるレベルがあります：

インスタンスレベル：クラスから作成された個々のオブジェクトに属するプロパティとメソッド。
クラスレベル：インスタンスではなく、クラス自体に属するプロパティとメソッド。

その違いを理解しましょう：

まず、インスタンスレベルのメンバーを見てみましょう。インスタンスメソッドを持つ通常のクラスを作成します：

class Car {
  constructor(make) {
    this.make = make;
  }
  
  drive() {
    return `The ${this.make} is driving`;
  }
}

Carクラスのインスタンスを作成します：

const myCar = new Car("Toyota");

インスタンスメソッドを呼び出します：

console.log(myCar.drive()); // 出力: "The Toyota is driving"

各インスタンスが独自のdriveメソッドのコピーを持ち、thisを使用して自身のプロパティにアクセスできることに注目してください。

次に、クラスレベルのメンバーを見てみましょう。クラスに静的メソッドを追加します。メソッド名の前に static キーワードを使用して、インスタンスではなくクラス自体に属するメソッドを作成します。

class Car {
  constructor(make) {
    this.make = make;
  }
  
  drive() {
    return `The ${this.make} is driving`;
  }
  
  static compareModels(car1, car2) {
    return `Comparing ${car1.make} with ${car2.make}`;
  }
}

静的メソッドは、特定のインスタンスデータに依存しないユーティリティ関数に便利です。静的メソッドはインスタンスではなく、クラス自体で呼び出されます。

const car1 = new Car("Toyota");
const car2 = new Car("Honda");

console.log(Car.compareModels(car1, car2)); // 出力: "Comparing Toyota with Honda"

インスタンスで静的メソッドを呼び出そうとすると、エラーが発生します：

car1.compareModels(car1, car2); // エラー: car1.compareModels is not a function

チャレンジ

コンストラクタのみを持つ Calculator クラスが与えられています。あなたのタスクは、2つのメソッドを追加することです：

1. インスタンスメソッド <strong>add(number)</strong>

与えられた数値を計算機の現在の値に加算します
this.value を更新し、新しい値を返します
*これは計算機のインスタンスに対して呼び出されます： calc.add(3)

2. 静的メソッド <strong>multiply(num1, num2)</strong>

2つの数値を受け取り、その積を返します
this を使用しません（静的メソッドはインスタンスデータを持ちません）
*これは Calculator クラス自体に対して呼び出されます： Calculator.multiply(4, 6)

チートシート

JavaScriptのクラスには、プロパティとメソッドの2つのレベルがあります：

インスタンスレベル: クラスから作成された個々のオブジェクトに属します
クラスレベル: インスタンスではなく、クラス自体に属します

インスタンスメソッド:

thisを使用してインスタンスプロパティにアクセスできる通常のメソッドです：

class Car {
  constructor(make) {
    this.make = make;
  }
  
  drive() {
    return `The ${this.make} is driving`;
  }
}

const myCar = new Car("Toyota");
console.log(myCar.drive()); // "The Toyota is driving"

静的メソッド:

staticキーワードを使用して、クラス自体に属するメソッドを作成します。これらはインスタンスではなく、クラスに対して呼び出されます：

class Car {
  static compareModels(car1, car2) {
    return `Comparing ${car1.make} with ${car2.make}`;
  }
}

const car1 = new Car("Toyota");
const car2 = new Car("Honda");

// クラス自体に対して呼び出す
console.log(Car.compareModels(car1, car2)); // "Comparing Toyota with Honda"

// インスタンスに対して呼び出すとエラーが発生します
car1.compareModels(car1, car2); // Error: car1.compareModels is not a function

静的メソッドは、特定のインスタンスデータに依存しないユーティリティ関数に役立ちます。

自分で試してみよう

import { Calculator } from './calculator.js';


// 以下のコードは変更しないでください
const calc = new Calculator(5);        // 値 = 5 で計算機を作成します
const result1 = calc.add(3);           // 3 を加算します → 5 + 3 = 8
const result2 = Calculator.multiply(4, 6); // 4 × 6 = 24 を乗算します
console.log(result1);                   // 期待値: 8
console.log(result2);                   // 期待値: 24