【Lightning Web Component】getterとsetterの使い方

こんにちは、アンダーソンです。
今回はLWCでのgetterとsetterの使い方についてまとめました。

LWCでのというかJavaScriptでの使い方になってくるんですが、
オブジェクトにおけるgetter,setterでなくても使えるので、
その辺りも合わせて見ていこうと思います。

getterで値を取得する

getterはget 変数名(){}の形で宣言して、
HTML側では{変数名}と言った形で参照することが可能です。
下記はボタンを押下して表示を変更する例です。

<template>
    <lightning-card>
        <div>{name}</div>
        <lightning-button label="変更" onclick={Change}></lightning-button>
    </lightning-card>
</template>   

import { LightningElement } from 'lwc';

export default class ParentSampleComponent extends LightningElement {
    isChanged = false;

    get name(){
        if ( this.isChanged ) {
            return 'アンダーソン';
        } else {
            return 'ブルックス';
        }
    }

    Change(){
        if ( this.isChanged ) {
            this.isChanged = false;
        } else {
            this.isChanged = true;
        }
    }
}

ボタンを押すことでisChangedが切り替わります。
その都度getterのNameは切り替わり、アンダーソンとブルックスが切り替わるという
ロジックです。

このようにすれば簡単に変数を動的に変更できます。

setterで値を設定する

setterを使う時は基本的に@apiとの組み合わせになります。
例えば、親コンポーネントで選んだ値を元に対象のsetterに値をセットし返す
と言った形で使うことができます。

import { LightningElement, api } from 'lwc';

export default class ParentSampleComponent extends LightningElement {
    fullName;
    
    @api
    get name(){
        return this.fullName;
    }

    set name(value){
        this.fullName = value;
    }
}

このNameという変数に対して親コンポーネントから値を入れてあげれば、
それがセットされるのでそのまま値として返却されます。

単独のコンポーネントだけでの判定しかない場合はgetterのみでOKです。
親コンポーネントなどとの絡みが出てきて、子コンポーネントの値を
動的に変更したい際などはsetterを書く必要が出てきますので、
覚えておきましょう。

その他の開発に関する記事はこちらです。

Developerも含めた試験問題にチャレンジしてみましょう。