JavaScript/JavaScriptのクラス

概要

JavaScriptのクラスは、クラスベースのオブジェクト指向プログラミング（OOP）のパラダイムを実現するための構文です。クラスはオブジェクトのテンプレートとして機能し、インスタンスを生成するための設計図を提供します。JavaScriptのクラスは、ECMAScript 2015（ECMAScript 6th edition: ES6）で導入され、オブジェクトの構造を定義し、メソッドやプロパティをクラスの中で管理することができます。

クラスの定義

JavaScriptでクラスを定義するには、classキーワードを使用します。クラスの中には、コンストラクタやメソッドを定義することができます。

クラスの構文

class クラス名 {
    constructor() {
        // コンストラクタ
    }
    
    メソッド名() {
        // メソッド
    }
}

例: 基本的なクラスの定義

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    
    greet() {
        console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
    }
}

const person1 = new Person("Alice", 25);
person1.greet(); // "Hello, my name is Alice and I am 25 years old."

Personクラスは、nameとageというプロパティを持ち、greetというメソッドを持っています。このクラスを使って、person1というインスタンスを生成し、greetメソッドを呼び出しています。

コンストラクタ

constructorメソッドは、クラスのインスタンスが生成されたときに呼び出される特別なメソッドです。コンストラクタは、インスタンスに初期値を設定したり、プロパティを初期化したりするために使用されます。

例: コンストラクタの使用

class Car {
    constructor(make, model, year) {
        this.make = make;
        this.model = model;
        this.year = year;
    }
}

const myCar = new Car("Toyota", "Corolla", 2020);
console.log(myCar); // Car { make: 'Toyota', model: 'Corolla', year: 2020 }

Carクラスのコンストラクタは、車のメーカー、モデル、年式を受け取り、インスタンスのプロパティとして設定します。

メソッド

クラス内で定義された関数はメソッドと呼ばれ、そのクラスのインスタンスで呼び出すことができます。メソッドは、インスタンスのプロパティを操作したり、他のメソッドと連携したりするために使用されます。

例: メソッドの使用

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

const rect = new Rectangle(5, 10);
console.log(rect.area()); // 50

Rectangleクラスには、areaというメソッドがあります。このメソッドは、矩形の面積を計算して返します。

継承

JavaScriptのクラスは、継承を使用して他のクラスからプロパティやメソッドを引き継ぐことができます。継承は、extendsキーワードを使用して実現します。

例: 継承の使用

class Animal {
    constructor(name) {
        this.name = name;
    }
    
    speak() {
        console.log(`${this.name} makes a sound.`);
    }
}

class Dog extends Animal {
    constructor(name, breed) {
        super(name); // 親クラスのコンストラクタを呼び出す
        this.breed = breed;
    }
    
    speak() {
        console.log(`${this.name} barks.`);
    }
}

const dog = new Dog("Buddy", "Golden Retriever");
dog.speak(); // "Buddy barks."

Dogクラスは、Animalクラスを継承し、speakメソッドをオーバーライドしています。superを使って親クラスのコンストラクタを呼び出し、nameを初期化しています。

静的メソッド

静的メソッドは、クラス自体に関連するメソッドであり、インスタンスではなくクラスから直接呼び出します。静的メソッドは、staticキーワードを使用して定義します。

例: 静的メソッドの使用

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

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

MathUtilクラスには、addという静的メソッドがあります。このメソッドは、インスタンスを作成せずにクラスから直接呼び出されています。

クラスのプロパティ

クラスプロパティは、クラスのインスタンスではなく、クラス自体に関連するプロパティです。ES2022以降、staticを使ってクラスプロパティを定義できます。

例: クラスのプロパティ

class Counter {
    static count = 0;
    
    constructor() {
        Counter.count++;
    }
}

const counter1 = new Counter();
const counter2 = new Counter();

console.log(Counter.count); // 2

Counterクラスは、インスタンスが生成されるたびにcountプロパティを増加させます。このプロパティはインスタンスではなく、クラスに関連付けられています。

クラスのgetterとsetter

getterとsetterは、オブジェクトのプロパティにアクセスするための特別なメソッドです。getterはプロパティを取得するため、setterはプロパティを設定するために使用されます。

例: getterとsetterの使用

class Person {
    constructor(name, age) {
        this._name = name;
        this._age = age;
    }
    
    get name() {
        return this._name;
    }
    
    set name(value) {
        this._name = value;
    }
    
    get age() {
        return this._age;
    }
    
    set age(value) {
        if (value >= 0) {
            this._age = value;
        } else {
            console.log("Age must be a positive number.");
        }
    }
}

const person = new Person("Alice", 30);
console.log(person.name); // "Alice"
person.age = 35;
console.log(person.age); // 35

Personクラスでは、nameとageのプロパティに対してgetterとsetterを定義しています。

結論

JavaScriptのクラスは、オブジェクト指向プログラミングの概念を簡潔に実装するための強力なツールです。クラスを使うことで、コードの再利用性、拡張性、保守性を向上させることができます。継承、静的メソッド、getter・setterなどの機能を活用することで、より柔軟で強力なコードが書けるようになります。

参考

• JavaScriptのオブジェクト
• JavaScriptのコンストラクタ関数