技術コンテンツ

JavaScript

No.56 プライベートなプロパティとメソッド

【JavaScript】プライベートなプロパティとメソッド - 外部からのアクセスを防ぐ

JavaScriptのプライベートなプロパティとメソッドについて解説します。

検証環境

JavaScript -

macOS

14.1

プライベート

プライベートなプロパティ・メソッドとは“クラスまたはそのクラスのオブジェクトからのみアクセス可能なプロパティ・メソッドのこと”です。

外部からのアクセスを遮断できるため、不用なプロパティの変更やクラス・オブジェクトの操作を防ぐことができます。

基本構文

プライベートにするプロパティ・メソッドの名前の先頭にシャープ（#）を付けます。

class クラス名 {
    
    // クラスプロパティ
    static #プロパティ名;
    
    // クラスメソッド
    static #メソッド名( 仮引数１, 仮引数２ ... ) {
        // 処理...
    }
    
    // オブジェクトプロパティ
    #プロパティ名;
    
    // オブジェクトメソッド
    #メソッド名( 仮引数１, 仮引数２ ... ) {
        // 処理...
    }
    
}

サンプル

クラスプロパティ

sample.js

class Person {
    ___ih_hl_start
    static #domain = "HUMAN";
    ___ih_hl_end
    
    static category() {
        console.log(Person.#domain);
    }
    
    introduction() {
        console.log(Person.#domain);
    }
}

Person.category();

let p1 = new Person();
p1.introduction();

Console

HUMAN
HUMAN

２行目のstatic #domain = "HUMAN"がプライベートなクラスプロパティの定義です。

クラスメソッドとオブジェクトメソッドからアクセスに成功しています。

クラスの外部からアクセスすると次のようにエラーが発生することに注意してください。

sample.js

class Person {
    static #domain = "HUMAN";
}

___ih_hl_start
console.log(Person.#domain);
___ih_hl_end

Console

Uncaught SyntaxError: Private field '#domain' must be declared in an enclosing class

クラスメソッド

sample.js

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

Person.message();

let p1 = new Person();
p1.introduction();

Console

Hello.
Hello.

２〜４行目がプライベートなクラスメソッドの定義です。

クラスメソッド・オブジェクトメソッドからアクセスに成功しています。

クラスの外部からアクセスすると次のようにエラーが発生することに注意してください。

sample.js

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

___ih_hl_start
Person.#greeting();
___ih_hl_end

Console

Uncaught SyntaxError: Private field '#greeting' must be declared in an enclosing class

オブジェクトプロパティ

sample.js

class Person {
    ___ih_hl_start
    #name;
    ___ih_hl_end
    
    constructor( name ) {
        this.#name = name;
    }
    
    introduction() {
        console.log("My name is " + this.#name + ".");
    }
}

let p1 = new Person("TANAKA");
p1.introduction();

Console

My name is TANAKA.

２行目の#nameがプライベートなオブジェクトプロパティの定義です。

オブジェクトメソッドからアクセスに成功しています。
（クラスメソッドからオブジェクトプロパティへのアクセスはできません。）

クラスの外部からアクセスすると次のようにエラーが発生することに注意してください。

sample.js

class Person {
    #name;
}

let p = new Person();

___ih_hl_start
p.#name = "TANAKA";
___ih_hl_end

Console

Uncaught SyntaxError: Private field '#name' must be declared in an enclosing class

オブジェクトメソッド

sample.js

class Person {
    name;
    
    constructor( name ) {
        this.name = name;
    }
    
    ___ih_hl_start
    #greeting() {
        console.log("Hello.");
    }
    ___ih_hl_end
    
    introduction() {
        this.#greeting();
        console.log("My name is " + this.name + ".");
    }
}

let p1 = new Person("TANAKA");
p1.introduction();

Console

Hello.
My name is TANAKA.

８〜１０行目がプライベートなオブジェクトメソッドの定義です。

オブジェクトメソッドからアクセスに成功しています。
（クラスメソッドからオブジェクトメソッドへのアクセスはできません。）

クラスの外部からアクセスすると次のようにエラーが発生することに注意してください。

sample.js

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

let p = new Person();

___ih_hl_start
p.#greeting();
___ih_hl_end

Console

Uncaught SyntaxError: Private field '#greeting' must be declared in an enclosing class