第9章 クラス

クラスの定義とインスタンス化

JavaScriptのクラスは、特定のタイプのオブジェクトを作成するためのブループリントやテンプレートのようなものです。

// クラスの定義
class Dog {
    // ...中身
}

// インスタンスの作成
const myDog = new Dog();

コンストラクタ

クラスがインスタンス化されるときに実行される特別なメソッド。インスタンスの初期化や設定を行います。

class Dog {
    constructor(name) {
        this.name = name;  // インスタンスのプロパティを初期化
    }
}

const shiba = new Dog("柴犬");
console.log(shiba.name);  // 柴犬

メソッド

クラス内に定義される関数。オブジェクトの振る舞いや操作を定義します。

class Dog {
    bark() {
        console.log("ワンワン！");
    }
}

const myDog = new Dog();
myDog.bark();  // ワンワン！

getterとsetter

プロパティの取得や設定に特別な処理を追加するためのメソッド。

class Circle {
    constructor(radius) {
        this._radius = radius;  // _ で始まる名前は慣習的にプライベート変数として扱われます
    }

    // getter
    get radius() {
        return this._radius;
    }

    // setter
    set radius(value) {
        if (value > 0) {
            this._radius = value;
        }
    }
}

const myCircle = new Circle(5);
console.log(myCircle.radius);  // 5

継承

既存のクラスから新しいクラスを派生させること。新しいクラスは既存のクラスのすべてのプロパティやメソッドを引き継ぎます。

class Animal {
    constructor(name) {
        this.name = name;
    }

    speak() {
        console.log("何かの音");
    }
}

class Dog extends Animal {
    speak() {
        console.log("ワンワン");
    }
}

const myDog = new Dog("ベル");
myDog.speak();  // ワンワン

静的メソッドと静的プロパティ

クラス自体に関連付けられたメソッドやプロパティ。インスタンスを作成せずとも使用できます。

class MathHelper {
    static add(x, y) {
        return x + y;
    }
}

console.log(MathHelper.add(1, 2));  // 3

プライベートなフィールドとメソッド

外部からアクセスできないフィールドやメソッド。現在の段階では、フィールドの前に#を置くことでプライベートにできます（提案段階の機能で、ブラウザのサポートが必要です）。

class Counter {
    #count = 0;

    increment() {
        this.#count++;
    }

    getCount() {
        return this.#count;
    }
}

const myCounter = new Counter();
myCounter.increment();
console.log(myCounter.getCount());  // 1
console.log(myCounter.#count);  // エラー

練習問題1.

次の要件を持つクラスを作成してください。

Carというクラスを作成してください。

Carクラスには、brand(ブランド)とspeed(現在の速度)という2つのプロパティがあります。

accelerateメソッドで速度を10増やし、brakeメソッドで速度を10減らす機能を持つようにしてください。

// こちらのコードを埋めてください。

// テスト
const car1 = new Car("Toyota");
car1.accelerate();
car1.accelerate();
console.log(car1.speed);  // 20と出力されるべき
car1.brake();
console.log(car1.speed);  // 10と出力されるべき

練習問題2.

次の要件を持つクラスを作成してください。

Animalという基本クラスを作成してください。このクラスにはsoundというプロパティがあり、speakというメソッドがあります。

DogとCatという2つのクラスを作成し、Animalクラスを継承してください。

それぞれのクラスでspeakメソッドをオーバーライドし、犬は"ワンワン"、猫は"ニャー"と鳴くようにしてください。

// こちらのコードを埋めてください。

// テスト
const dog = new Dog();
dog.speak();  // "ワンワン"と出力されるべき

const cat = new Cat();
cat.speak();  // "ニャー"と出力されるべき

練習問題3.

次の要件を持つクラスを作成してください。

Personというクラスを作成してください。

firstNameとlastNameという2つのプロパティを持ちます。

fullNameというgetterを実装し、firstNameとlastNameを組み合わせたフルネームを返すようにしてください。

fullNameというsetterを実装し、フルネームを分割してfirstNameとlastNameをそれぞれ設定できるようにしてください。

// こちらのコードを埋めてください。

// テスト
const person = new Person();
person.firstName = "太郎";
person.lastName = "田中";
console.log(person.fullName);  // "太郎 田中"と出力されるべき

person.fullName = "次郎 山田";
console.log(person.firstName);  // "次郎"と出力されるべき
console.log(person.lastName);   // "山田"と出力されるべき