技術コンテンツ

JavaScript

No.55 クラスメソッド

【JavaScript】クラスメソッド - クラスレベルのメソッド

JavaScriptのクラスメソッドについて解説します。

検証環境

JavaScript -

macOS

14.1

クラスメソッド

クラスメソッドは“クラスレベルのメソッド”です。

クラスの特有メソッドのため、オブジェクトメソッドとは異なり、オブジェクトを生成しなくんてもアクセス可能です。

オブジェクトの共通処理などに使用し、クラスメソッドはオブジェクトには含まれません。

定義

クラスメソッドの使用には定義が必要です。

基本構文

class クラス名 {
    static メソッド名( 仮引数１, 仮引数２ ... ) {
        // 処理...
    }
}

クラスメソッドの構文は基本的にはオブジェクトメソッドと同じですが、先頭にstaticキーワードを記述します。

サンプル

sample.js

class Person {
    ___ih_hl_start
    static greeting() {
        console.log("Hello.");
    }
    ___ih_hl_end
}

Console

クラスメソッドは定義のみでは実行されないため、処理に影響はありません。

呼び出し

クラスメソッドの呼び出しはクラス経由で行います。

基本構文

クラス名.クラスメソッド名( 実引数１, 実引数２ ... )

クラスメソッドを呼び出すにはクラス名とクラスメソッド名をドット（.）で繋ぎ、丸括弧（()）を記述します。

引数がある場合は丸括弧内に実引数を記述してください。

サンプル

sample.js

class Person {
    static greeting() {
        console.log("Hello.");
    }
}

___ih_hl_start
Person.greeting();
___ih_hl_end

Console

Hello.

７行目のPerson.greeting()がクラスメソッドの呼び出しです。

実行結果から正常にメソッドの処理が実行されたことが分かります。

オブジェクトの共通処理

クラスメソッドはオブジェクトメソッドから呼び出すことが可能です。

sample.js

class Person {
    
    first_name;
    last_name;
    
    constructor( first_name, last_name ) {
        this.first_name = first_name;
        this.last_name = last_name;
    }
    
    static greeting() {
        console.log("Hello");
    }
    
    info() {
        ___ih_hl_start
        Person.greeting();
        ___ih_hl_end
        console.log("My name is " + this.first_name + " " + this.last_name);
    }
}

let p1 = new Person("TANAKA", "TARO");
p1.info();

let p2 = new Person("SUZUKI", "JIRO");
p2.info();

Console

Hello
My name is TANAKA TARO
Hello
My name is SUZUKI JIRO

１６行目のPerson.greeting()がオブジェクトメソッドからのクラスメソッドの呼び出しです。

２つのオブジェクト（p1とp2）のinfoメソッドからクラスメソッドを呼び出しており、実行結果から正常に呼び出せていることが分かります。

注意点

クラスメソッドからオブジェクトプロパティへのアクセスはできません。

sample.js

class Person {
    
    first_name;
    last_name;
    
    constructor( first_name, last_name ) {
        this.first_name = first_name;
        this.last_name = last_name;
    }
    
    static greeting() {
        console.log("Hello");
        ___ih_hl_start
        console.log("My name is " + this.first_name + " " + this.last_name);
        ___ih_hl_end
    }
    
    info() {
        Person.greeting();
    }
}

let p = new Person("TANAKA", "TARO");

p.info();

Console

Hello
My name is undefined undefined

１３行目でクラスメソッドでthisキーワードを使用していますが、値はundefinedになっています。

これはクラスメソッドのthisはオブジェクトではなくクラスそのものを示すためです。

クラスメソッドでthisを出力するとPersonクラスであることが確認できます。

sample.js

class Person {
    
    first_name;
    last_name;
    
    constructor( first_name, last_name ) {
        this.first_name = first_name;
        this.last_name = last_name;
    }
    
    static greeting() {
        console.log("Hello");
        ___ih_diff_start
-        console.log("My name is " + this.first_name + " " + this.last_name);
+        console.log(this);
        ___ih_diff_end
    }
    
    info() {
        Person.greeting();
    }
}

let p = new Person("TANAKA", "TARO");

p.info();

Console

Hello
class Person {
    
    first_name;
    last_name;
    
    constructor( first_name, last_name ) {
        this.first_name = first_name;
        this.last_name = last_name;
    }
    
    static greeting()…