JavaScriptのclassキーワードとは？クラス定義の基本をわかりやすく解説

ES6（ECMAScript 2015）で導入されたJavaScriptのクラスは、プロトタイプベースの継承に対する「構文糖衣（シンタックスシュガー）」と呼ばれています。実体は「特別な関数」であり、classキーワードを使うことで、より直感的で読みやすいコードとしてオブジェクト指向プログラミングを実現できます。

classキーワードによる基本的なクラス定義

classキーワードを使用したクラス定義の基本構文は以下の通りです。

class Person {
    // このクラスのコンストラクタ
    constructor(name) {
        this.name = name;
    }
    // このクラスのインスタンスメソッド
    displayName() {
        console.log(this.name);
    }
}

このクラス定義は、従来の関数による以下の宣言と本質的に同等です。

let Person = function(name) {
    this.name = name;
}
Person.prototype.displayName = function() {
    console.log(this.name);
}

つまり、クラス構文はプロトタイプチェーンを意識せずに済むよう設計された便利な書き方だと言えます。ただし、あくまで内部的にはプロトタイプベースの仕組みで動作している点に注意しましょう。

クラス宣言とクラス式

上記のようにclassキーワードで名前付きクラスを定義する形式を「クラス宣言」と呼びます。一方、クラスは式としても記述でき、これを「クラス式」と呼びます。

名前なしのクラス式

// 名前なしのクラス式
let Person = class {
    // このクラスのコンストラクタ
    constructor(name) {
        this.name = name;
    }
    // このクラスのインスタンスメソッド
    displayName() {
        console.log(this.name);
    }
}

名前付きのクラス式

クラス式には内部で参照できる名前を付けることも可能です。

let Person = class NamedPerson {
    constructor(name) {
        this.name = name;
    }
    displayName() {
        console.log(this.name);
    }
}

クラスからオブジェクトを生成する

どの形式でクラスを定義した場合でも、new演算子を使って同じようにインスタンスを生成できます。

使用例

let John = new Person("John");
John.displayName();

出力結果

John

まとめ

• JavaScriptのクラスはES6で導入され、プロトタイプベース継承を扱いやすくした構文糖衣である
• クラスは「特別な関数」として実装されている
• 定義方法には「クラス宣言」と「クラス式」の2種類がある
• new演算子により、どの形式でも同様にインスタンスを生成できる

JSクラスおよびclassキーワードについてさらに詳しく学びたい方は、公式チュートリアル（英語版）も参考にしてください。