Lightning Web Componentは片方向バインディング！

業務であまりLightning Web Component（LWC）に触れる機会はなかったのですが、この度LWCに触れる機会があり、Vue.jsとは違ってほんの少しはまった部分を備忘録的に残していこうと思います。
結論からすると、ちゃんとドキュメントは読んでから作業してね！です。。。

Textareaの値を取得する（失敗編）

まあ普通にあるパターンで、Textareaコンポーネントから値を取得してDBに登録するとよくあるパターン。以下のソースで取得できると思ったら、クリックイベント後のログに値が出力されない。

// textarea.html
<lightning-textarea
    name="input1"
    value={textValue}
    label="TextArea"
>
</lightning-textarea>

<lightning-button label="Save" onclick={handleClick}>
</lightning-button>

// textarea.js
import { LightningElement } from 'lwc';

export default class LightningExampleTextareaVarious extends LightningElement {
   // テキストエリアの値
   textValue;
   
   // Saveボタン押下後のイベント処理
   handleClick(event) {
       // 値は設定されているものと思ってた。。。
       console.log(textValue);
   }
}

自分の中ではVue.jsの双方向バインディングのように値が入ると信じ切っていたので痛い目にあいました。（ちなみにドキュメントにはしっかり片方向バインディングのことが書いてあります。。。）

Vue.jsでTextareaの値を取得する場合

// textarea.vue
<template>
    <textarea v-model="textValue"></textarea>
    <button @click="clickSave">SAVE</button>
</template>
<script>
   export default {
       data () {
       return {
           textValue: ''
       },
       methods: {
           clickSave() {
               // 双方向バインディングだからここで値が取得できている
               console.log(textValue);
           }
       }       
   }
}</script>

Vue.jsは双方向バインディングのため、v-modelに設定すると、変化をキャッチしてくれて、変数に入力値が設定されます。
しかし、LWCの場合は双方向バインディングではなく、片方向バインディングなため、ロード後に値を入れても自動では取得してくれません。

LWC Textareaの値を取得する方法（正解編）

片方向バインディングなので、Textareaの値を取得するのはonChangeイベントを拾って変数に設定するイベント処理を記載する必要があります。

// textarea.html
<lightning-textarea
    name="input1"
    value={textValue}
    label="TextArea"
    onchange={handleChange}
>
</lightning-textarea>

<lightning-button label="Save" onclick={handleClick}>
</lightning-button>

// textarea.js
import { LightningElement } from 'lwc';

export default class LightningExampleTextareaVarious extends LightningElement {
   // テキストエリアの値
   textValue;
   
   // textareaの入力値に変更があった場合のイベント処理
   handleChange(event) {
       this.textValue = event.target.value;   
   }

   // Saveボタン押下後のイベント処理
   handleClick(event) {
       // この場合は入力値が設定されている
       console.log(textValue);
   }
}

これで文句なく取得できました！
Vue.js、React、Angularなど双方向バインディングなものはこういう部分が楽だなと思います。
（それによる弊害ももちろんあると思いますが。。。）

まとめ

ドキュメントはしっかりと読みましょう！

参考にしたサイト
こちらのTerraSkyさんのブログにかなり細かいことまで書いていますので、参考にしてみてください。
LWCのリアクティブプロパティと再レンダリングの関係は複雑だった（第1回）