ぽっさむのプログラミングまじでわかんないブログ

2021年8月からLightning Web Componentsの勉強はじめまちた。まじでよくわかんない。

LWC setterがいつ動くのかよくわからないから試してみた

いつまでたってもgetterとsetterがよくわからない・・

のに、LWCでの使い方とかもっとわからない・・

から、試してみた。



今回は3つのコンポーネントを組み合わせています。



完成形態


初期表示
f:id:possum_possum:20210902170702p:plain


入力フォームになんか入れて
f:id:possum_possum:20210902171625p:plain


ボタンを押すと、setterを使って値が表示されます
f:id:possum_possum:20210902171657p:plain



parentSetter.htmlの中に2つのコンポーネントが含まれています。
f:id:possum_possum:20210902171325p:plain




ソース


わたしまじで命名もへたくそで本当萎える(;;)

parentSetter.html

<template>
    <lightning-card>
        <c-action-setter onsend={putValueSetter}></c-action-setter>
        <c-set-setter receive-value={value}></c-set-setter>
    </lightning-card>
</template>

parentSetter.js

import { LightningElement } from 'lwc';

export default class ParentSetter extends LightningElement {
    value;

    putValueSetter(evt){
        this.value = evt.detail;
    }
}

setSetter.html

<template>
    <div>displayValue:{displayValue}</div>
</template>

setSetter.js

import { LightningElement,api } from 'lwc';

export default class SetSetter extends LightningElement {
    displayValue;

    set receiveValue(val){
        if(this.displayValue === undefined){
            this.displayValue = '初期表示';
        }else{
            this.displayValue = val;
        }
    }

    @api get receiveValue(){

    }
}

actionSetter.html

<template>
    <lightning-input label="せったーにせっとしたいあたいをいれてね" value={inputValue} onchange={changeInputValue}></lightning-input>
    <lightning-button label="せったーうごかすぼたん" onclick={buttonClick}></lightning-button>
</template>

actionSetter.js

import { LightningElement } from 'lwc';

export default class ActionSetter extends LightningElement {
    inputValue;
    changeInputValue(event) {
      this.inputValue = event.target.value;
    }

    buttonClick(){
        const event = new CustomEvent('send',{
            detail: this.inputValue
        });

        this.dispatchEvent(event);
    }
}



setterを使って値を入れるまでの挙動


①入力フォームに値を入れる



②onchangeでchangeInputValueに入り、this.inputValueに入力した値が入る(actionSetter.js)
参考:LWC onchangeはいつ動いている? - ぽっさむのプログラミングまじでわかんないブログ



③ボタンを押す



④onclickでbuttonClickに入り、detailプロパティにthis.inputValueをセットしたイベントを作成してディスパッチする(actionSetter.js)
参考:LWC 子から親へイベント伝達してみた - ぽっさむのプログラミングまじでわかんないブログ



⑤sendにonを付けたonsendが反応して、putValueSetterが呼び出される(parentSetter.js)



⑥this.value = evt.detail;でthis.valueにdetailプロパティにセットした値(フォームに入力した値)が入り、receiveValueに値がセットされた状態になる

f:id:possum_possum:20210902214233p:plain


receive-value={value}のvalueに値が入るということは、receiveValueという変数に値がはいることなんだってぇ~!!(多分)


なのでここで、
⑦セッター(set receiveValue(val){・・・)が動く。valは、this.value



setSetter.js

import { LightningElement,api } from 'lwc';

export default class SetSetter extends LightningElement {
    displayValue;

    set receiveValue(val){
        if(this.displayValue === undefined){
            this.displayValue = '初期表示';
        }else{
            this.displayValue = val;
        }
    }

    @api get receiveValue(){

    }
}



⑧this.displayValueには'初期表示'が入っているため、elseに入って、this.displayValueに値が入り、表示される。


f:id:possum_possum:20210902171657p:plain




ちなみに、読み込んだだけで’初期表示’って表示されてるから、読み込んだ瞬間にsetterは動いてることが分かった。
知らなかった・・。※displayValue;って宣言しただけの場合の中身はundefined。




ここまで書いたけど、setterってあんまり使わないらしいね。



いまんとこ、こういう風に値渡すのもどこが便利なのかいまいちピンとこない。



でも、親から子どもに対して値が渡せるんだ~っていうのは分かった。



ちなみに、setterを使うときは@apiをつけなきゃいけないらしいよ。しかも謎にgetterのほうにつけろって書いてあった。



作法的な?あと、setterはgetterがないとエラーになる。だからgetterは空だけど置いておきました。



やっぱりプログラミング全然わからなくて草。



おしまい