JavaScriptのクラスフィールドとメソッドで強化されたオブジェクト指向プログラミング

作成日 2025.02.03
javascript
javascript

JavaScriptのクラス機能により、オブジェクト指向プログラミングがさらに効率的に行えるようになりました。本記事では、クラスフィールドとメソッドを活用して、より直感的で強力なコードを書くための技法を解説します。

1. クラスフィールドの基本
2. 静的フィールドの利用
3. プライベートフィールドの使用
4. メソッド定義の基本
5. ゲッターとセッター
6. 継承を活用したコード再利用
7. メソッドオーバーライド
8. スーパーメソッドの呼び出し
9. クラスフィールドと関数バインディング
10. クラスでのデフォルト値設定
11. クラスを使ったユーティリティオブジェクト
12. まとめ

クラスフィールドの基本

クラスフィールドを使用すると、クラスプロパティを簡潔に定義できます。

class Person {
  name = 'John';
  age = 30;
}

const person = new Person();
console.log(person.name); // John
console.log(person.age); // 30

静的フィールドの利用

クラス全体で共有するプロパティを定義するには静的フィールドを使用します。

class Counter {
  static count = 0;

  increment() {
    Counter.count++;
  }
}

const counter = new Counter();
counter.increment();
console.log(Counter.count); // 1

プライベートフィールドの使用

プライベートフィールドを用いることで、外部からアクセスできないプロパティを作成できます。

class BankAccount {
  #balance = 0;

  deposit(amount) {
    this.#balance += amount;
  }

  getBalance() {
    return this.#balance;
  }
}

const account = new BankAccount();
account.deposit(100);
console.log(account.getBalance()); // 100
console.log(account.#balance); // エラー

メソッド定義の基本

クラスのメソッドを定義して、オブジェクトの振る舞いを記述します。

class Greeter {
  greet() {
    console.log('Hello, world!');
  }
}

const greeter = new Greeter();
greeter.greet(); // Hello, world!

ゲッターとセッター

クラスのプロパティに対してカスタムロジックを追加するために、ゲッターとセッターを使用します。

class Rectangle {
  constructor(width, height) {
    this.width = width;
    this.height = height;
  }

  get area() {
    return this.width * this.height;
  }

  set area(value) {
    this.width = Math.sqrt(value);
    this.height = Math.sqrt(value);
  }
}

const rect = new Rectangle(4, 5);
console.log(rect.area); // 20
rect.area = 36;
console.log(rect.width, rect.height); // 6, 6

継承を活用したコード再利用

クラスを継承することで、コードの再利用性を向上させます。

class Animal {
  speak() {
    console.log('Animal speaks');
  }
}

class Dog extends Animal {
  speak() {
    console.log('Dog barks');
  }
}

const dog = new Dog();
dog.speak(); // Dog barks

メソッドオーバーライド

親クラスのメソッドをオーバーライドして、カスタム動作を実現します。

class Vehicle {
  start() {
    console.log('Vehicle starts');
  }
}

class Car extends Vehicle {
  start() {
    console.log('Car starts');
  }
}

const car = new Car();
car.start(); // Car starts

スーパーメソッドの呼び出し

スーパークラスのメソッドを呼び出して、追加の処理を行います。

class Parent {
  greet() {
    console.log('Hello from Parent');
  }
}

class Child extends Parent {
  greet() {
    super.greet();
    console.log('Hello from Child');
  }
}

const child = new Child();
child.greet();
// Hello from Parent
// Hello from Child

クラスフィールドと関数バインディング

クラスフィールドを使用すると、関数のバインディングが簡単になります。

class Button {
  label = 'Click me';

  handleClick = () => {
    console.log(this.label);
  };
}

const button = new Button();
document.body.addEventListener('click', button.handleClick);

クラスでのデフォルト値設定

フィールドにデフォルト値を設定することで、クラスの初期状態を明確にできます。

class Config {
  theme = 'light';
  language = 'en';
}

const config = new Config();
console.log(config.theme); // light
console.log(config.language); // en

クラスを使ったユーティリティオブジェクト

クラスを使用して、機能をカプセル化したユーティリティオブジェクトを作成します。

class MathUtil {
  static add(a, b) {
    return a + b;
  }

  static subtract(a, b) {
    return a - b;
  }
}

console.log(MathUtil.add(5, 3)); // 8
console.log(MathUtil.subtract(5, 3)); // 2