2026.03.05

【JavaScript】クラスの「プロパティ」「メソッド」について理解しよう

takahide

おはようございます。タカヒデです。

今回は「クラスってよく分からないよね」という前回の記事の続きです。

前回は「クラスって何？」「定義方法は？」「コンストラクタって？」みたいな部分の理解を深めてきました。

本日はその続き、「JavaScriptにおける、『クラス』について、『プロパティ』『メソッド』を理解しよう」という記事になっています。

こんな人にオススメ

JavaScriptにおける『クラス』が理解できない
『プロパティ』『メソッド』『静的プロパティ/静的メソッド』の記載方法を知りたい

ぜひ本記事を参考にしてください。

ちなみに前回の記事は以下にありますので、まだ「そもそもクラスって何さ？」状態の方はこちらを読んでみてください。

クラスのプロパティの記載方法

さっそく、クラスのプロパティの記載方法から見ていきます。

プロパティとは、オブジェクトを表現する、『名前(key)』と『値(value)』がセットになった情報のことでしたね。

クラスにおいてもプロパティの考え方は同様ですが、記載方法が変わります。

クラスのプロパティを記載する場合は、本来書くべき『let』のような変数宣言の記載が不要になるのです。

//記載方法

プロパティ名1 = 値1
プロパティ名2 = 値2

//記載方法

プロパティ名1 = 値1
プロパティ名2 = 値2

実際の記載例としてはこんな感じです。

class testClass {
    name = "Takahide";
}

let test = new testClass();

console.log(test.name);
//実行結果：Takahide

class testClass {
    name = "Takahide";
}

let test = new testClass();

console.log(test.name);
//実行結果：Takahide

変数の宣言をせずにプロパティを記載できていますね。

ちなみにクラスのプロパティにおいて、コンストラクタ内に記載する場合でなければ「this」の記載は不要です。

この「this」の扱い方は分かりにくいので、またどこかで記事にしたいと思います。

クラスのメソッドの記載方法

続けて、クラスのメソッドについても見ていきましょう。

メソッドとは、オブジェクトにおける、与えられた情報を基に処理を行い、結果を返す仕組みのことでした。

こちらも覚えていますか？

クラスのプロパティ同様、クラスにおけるメソッドの考え方は変わりませんが、記載方法が変わります。

クラスのメソッドを記載する場合は、『function』の宣言が不要です。

//記載方法

関数名(引数){
   関数の処理
}

//記載方法

関数名(引数){
   関数の処理
}

『let』が無くなったり『function』が無くなったり楽ちんですね。

以下が記載例です。

class testClass {
    name = "Takahide";

    testMethod() {
        console.log(`My name is ${this.name}.`);
    }
}

let test = new testClass();

test.testMethod()
//実行結果：My name is Takahide.

class testClass {
    name = "Takahide";

    testMethod() {
        console.log(`My name is ${this.name}.`);
    }
}

let test = new testClass();

test.testMethod()
//実行結果：My name is Takahide.

『function』の宣言無しで、クラスの内に定義した『testMethod』メソッドを実行できていることが分かりますね。

これでクラスにおけるメソッドの記載方法が分かったことでしょう。

クラスの静的プロパティ/静的メソッドとは？

クラスのプロパティ/メソッドには、「静的プロパティ/静的メソッド」というものがあります。

静的プロパティ/静的メソッドとは、「インスタンスを生成せずに呼び出せるプロパティ/メソッドのこと」です。

これだけ聞いてもよく分からないですよね。

インスタンスとは、「クラスから作成されたオブジェクト」のことでした。

普通のプロパティやメソッドは、クラスから作られたオブジェクト＝インスタンスに属します。

一方、静的プロパティ/静的メソッドはクラスそのものに属します。

そのため、インスタンスではなくクラスから直接呼び出すものが静的プロパティ/静的メソッドです。

ちょっと分かりにくいですが、「すべてのインスタンス共通で設定するものに使う」ようなイメージです。

この静的プロパティ/静的メソッドを定義する場合は、『static』を記載します。

//静的プロパティ：記載方法

static プロパティ名1 = 値1

//静的プロパティ：記載方法

static プロパティ名1 = 値1

//静的メソッド：記載方法

static 関数名(引数){
   関数の処理
}

//静的メソッド：記載方法

static 関数名(引数){
   関数の処理
}

以下が記載例です。

class testClass {
    static name = "Takahide";

    static testMethod() {
        console.log(`My name is ${this.name}.`);
    }
}

console.log(testClass.name);
//実行結果：Takahide

testClass.testMethod();
//実行結果：My name is Takahide.

class testClass {
    static name = "Takahide";

    static testMethod() {
        console.log(`My name is ${this.name}.`);
    }
}

console.log(testClass.name);
//実行結果：Takahide

testClass.testMethod();
//実行結果：My name is Takahide.