#13 JavaScriptで学ぶクラスの基本

7月 30, 2026

JavaScriptのクラスは、比較的新しいバージョンで整備された、読みやすい書き方です。この記事では、JavaScriptにおけるクラスの基本と、継承などの応用的な使い方を解説します。

クラスを作ってみる

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

    greet() {
        console.log(`こんにちは、${this.name}です`);
    }
}

constructorという特別なメソッドが、インスタンスを作る際に自動的に呼ばれます。this.name = nameのように、渡された引数をインスタンス自身のプロパティとして保存しておくのが一般的な使い方です。

クラスからインスタンスを作る

const person = new Person("太郎");
person.greet(); // こんにちは、太郎です

newというキーワードを使ってインスタンスを作ります。同じクラスから、名前の違う複数のインスタンスをいくつでも作れます。

継承でクラスを拡張する

既存のクラスの機能を引き継ぎつつ、新しい機能を追加したい場合はextendsを使います。

class Student extends Person {
    constructor(name, grade) {
        super(name); // 親クラスのconstructorを呼ぶ
        this.grade = grade;
    }

    greet() {
        console.log(`こんにちは、${this.grade}年生の${this.name}です`);
    }
}

const student = new Student("花子", 3);
student.greet(); // こんにちは、3年生の花子です

super(name)は親クラス(Person)のconstructorを呼び出す書き方です。Studentクラスのように、親クラスのgreetを上書き(オーバーライド)して独自の動作を定義することもできます。

プロパティを外部から守る

クラスの内部だけで使いたいプロパティには、名前の先頭に#を付けることで「プライベートフィールド」として定義できます。

class Counter {
    #count = 0;

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

    get value() {
        return this.#count;
    }
}

#countはクラスの外から直接書き換えられなくなるため、意図しない値の変更を防げます。

JavaScriptならではの注意点

実はJavaScriptのクラスは、内部的には「プロトタイプ」という、より原始的な別の仕組みの上に成り立っています。学習の最初は気にする必要はありませんが、JavaScriptを深く学んでいくと、この「プロトタイプ」という言葉に出会うことになります。また、thisの指す対象が呼び出し方によって変わってしまう挙動もJavaScript特有の落とし穴なので、メソッドをコールバックとして渡すときは注意が必要です。

まとめ

JavaScriptのクラスはclass・constructor・newが基本の組み合わせです。extendsとsuperで継承ができ、#を付けるとプライベートなプロパティを作れます。他の言語のクラスと似た感覚で使えますが、内部の仕組みが独自である点も覚えておきましょう。

本ページはプロモーションを含みます。

参考書籍(PR)

JavaScriptをもっと学びたい方には「改訂新版JavaScript本格入門」がおすすめです。

コードを書かずに自動化したい方へ

「学んだけど自分の作業に組み込む時間がない」という方向けに、ダブルクリックで動く Windows専用の自動化ツールをオーダーメイドで作成しています。気になる方はこちらをご覧ください。

このブログを検索

Toyoのプログラミング学習ブログ