クラス: オブジェクト指向

ES6 の class 構文。プロトタイプの糖衣構文だが読みやすい。

class
オブジェクトの設計図。
extends
継承。親クラスを拡張。
#
プライベートフィールド。外からアクセス不可。

クラス基礎

設計図と製品 (Blueprint & Product)

クラスは「ロボットの設計図」です。そこから作られるのが「インスタンス（実際のロボット）」です。一度設計図（class）を書けば、同じ機能を持つロボット（instance）を何体でも簡単に量産（new）できます。

JavaScript のクラスは、実はプロトタイプ（Prototype）という仕組みの「糖衣構文（シンタックスシュガー）」です。裏側ではプロトタイプチェーンが動いていますが、Java や C# のように直感的に書けるようになりました。

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


    speak() {
        return `${this.name} makes a sound`;
    }
}


class Dog extends Animal {
    speak() {
        return `${this.name} barks!`;
    }
}


const dog = new Dog('Rex');
dog.speak();  // 'Rex barks!'
Bad
// ❌ Bad: プロトタイプ直接操作
function User(name) {
    this.name = name;
}
User.prototype.greet = function() {
    return 'Hi, ' + this.name;
};
Good
// ✅ Good: class 構文
class User {
    constructor(name) {
        this.name = name;
    }
    greet() {
        return `Hi, ${this.name}`;
    }
}

高度な機能

Private Fields & Static
class BankAccount {
    // プライベートフィールド (#)
    #balance = 0;


    // static メンバ
    static bankName = 'MyBank';


    constructor(initial) {
        this.#balance = initial;
    }


    // getter / setter
    get balance() { return this.#balance; }


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


const acc = new BankAccount(100);
acc.deposit(50);
console.log(acc.balance);  // 150
// console.log(acc.#balance);  // エラー: プライベート
Tip: # プライベートフィールドは ES2022 から。TypeScript では private も使える。

合格ライン

☐ class と extends を使える
☐ getter/setter を書ける

演習課題

課題1: class と extends
クラスを作成して継承してください。
課題2: getter/setter
getter と setter を実装してください。