【JavaScript】アクセサープロパティ - セッター・ゲッター

JavaScriptのアクセサープロパティについて解説します。

検証環境

JavaScript -

macOS

14.1

アクセサープロパティ

アクセサープロパティは“値の記憶や取得時に処理を伴うオブジェクトのプロパティ”です。

メソッドのように定義しますが、プロパティのように扱うことができます。

アクセサープロパティは値の設定処理（セッター）と値の取得処理（ゲッター）のいずれかまたは両方を定義して使います。

セッター

セッターは“アクセサープロパティの『値の設定処理』”です。

定義

基本構文

{
    set アクセサープロパティ名( 仮引数 ) {
        // 処理...
    }
}

基本的にはオブジェクトメソッドの構文と同じですが、先頭にsetキーワードを付けます。

サンプル

sample.js

let person = {
    l_name: "",
    f_name: "",
    
    ___ih_hl_start
    set full_name( name ) {
        const n = name.split(' ');
        this.l_name = n[0];
        this.f_name = n[1];
    }
    ___ih_hl_end
}

Console

５〜９行目がセッターの定義です。

full_nameというアクセサープロパティ名のセッターを定義しています。

値の設定

セッターを定義したアクセサープロパティは通常のプロパティのように値を代入できます。

基本構文

変数.アクセサープロパティ名 = 値

サンプル

sample.js

let person = {
    l_name: "",
    f_name: "",
    
    set full_name( name ) {
        const n = name.split(' ');
        this.l_name = n[0];
        this.f_name = n[1];
    }
}

___ih_hl_start
person.full_name = "TANAKA TARO";
___ih_hl_end

console.log(person.l_name);
console.log(person.f_name);

Console

TANAKA
TARO

１２行目がアクセサープロパティの値設定です。

通常のプロパティのように値を代入していますが、セッターの処理が実行されます。

セッターの引数には代入した値が与えられます。

このセッターの処理はl_nameプロパティとf_nameプロパティに文字を分割して代入しています。

※name.split(' ')は変数nameの文字列をスペースで分割し配列にする処理です。

実行結果から各プロパティに値が記憶されていることが確認できます。

ゲッター

ゲッターは“アクセサープロパティの『値の取得処理』”です。

定義

基本構文

{
    get アクセサープロパティ名() {
        // 処理...
        return 値;
    }
}

サンプル

sample.js

let person = {
    l_name: "TANAKA",
    f_name: "TARO",
    
    ___ih_hl_start
    get full_name() {
        const name = this.l_name + ' ' + this.f_name;
        return name;
    }
    ___ih_hl_end
}

Console

５〜８行目がゲッターの定義です。

full_nameというアクセサープロパティのゲッターを定義しています。

値の取得

ゲッターを定義したアクセサープロパティは通常のプロパティのように値を取得できます。

基本構文

変数.アクセサープロパティ名

サンプル

sample.js

let person = {
    l_name: "TANAKA",
    f_name: "TARO",
    
    get full_name() {
        const name = this.l_name + ' ' + this.f_name;
        return name;
    }
}

___ih_hl_start
console.log(person.full_name);
___ih_hl_end

Console

TANAKA TARO

１１行目がアクセサープロパティの値取得です。

通常のプロパティのように値を取得していますが、ゲッターの処理が実行されます。

このゲッターの処理はl_nameプロパティとf_nameプロパティを文字結合し戻り値として返します。

実行結果から結合した文字列を取得できたことが確認できます。

両方の定義

同じアクセサープロパティ名でセッターとゲッターを定義することができます。

sample.js

let person = {
    l_name: "",
    f_name: "",
    
    ___ih_hl_start
    set full_name( name ) {
        const n = name.split(' ');
        this.l_name = n[0];
        this.f_name = n[1];
    },
    ___ih_hl_end
    
    ___ih_hl_start
    get full_name() {
        const name = this.l_name + ' ' + this.f_name;
        return name;
    }
    ___ih_hl_end
}

person.full_name = "TANAKA TARO";
console.log(person.full_name);

Console

TANAKA TARO

５〜９行目のセッターと１１〜１４行目のゲッターは同じアクセサープロパティ名です。

このようにすることで、値の設定時はセッターを実行し、値の取得時はゲッターを実行します。

クラスでの利用

アクセサープロパティはクラスの定義で使用できます。

クラスレベルのアクセサープロパティ

クラスレベルのアクセサープロパティを使用するにはセッター・ゲッターの定義の先頭にstaticキーワードを付けます。

sample.js

class Person {
    static l_name;
    static f_name;
    
    ___ih_hl_start
    static set full_name( name ) {
        const n = name.split(' ');
        this.l_name = n[0];
        this.f_name = n[1];
    }
    ___ih_hl_end
    
    ___ih_hl_start
    static get full_name() {
        return this.l_name + ' ' + this.f_name;
    }
    ___ih_hl_end
}

Person.full_name = "TANAKA TARO";
console.log(Person.full_name);

Console

TANAKA TARO

セッター（５〜９行目）とゲッター（１１〜１３行目）はstaticキーワードが付いているため、full_nameアクセサープロパティはクラスレベルになります。

１６行目・１７行目でクラス経由のアクセスをしており、実行結果から正常に動作したことが分かります。

オブジェクトレベルのアクセサープロパティ

オブジェクトレベルのアクセサープロパティを使用するには通常のアクセサープロパティと同様に定義可能です。

Sample

class Person {
    l_name;
    f_name;
    
    ___ih_hl_start
    set full_name( name ) {
        const n = name.split(' ');
        this.l_name = n[0];
        this.f_name = n[1];
    }
    ___ih_hl_end

    ___ih_hl_start
    get full_name() {
        return this.l_name + ' ' + this.f_name;
    }
    ___ih_hl_end
}

let person = new Person();

person.full_name = "TANAKA TARO";
console.log(person.full_name);

Console

TANAKA TARO

full_nameアクセサープロパティはオブジェクトレベルのプロパティになります。

実行結果からPersonクラスから生成したオブジェクトがfull_nameアクセサープロパティ（セッター・ゲッター）を持つことが確認できます。