LWCのリアクティブプロパティで詰まった話

こんばんは。きゃらめるです。
最近、お仕事でLWC（Lightning Web Component）を触っているのですが、LWCの奥深さに四苦八苦しています。。
Trailheadをやっていただけじゃ分かっていなかった、あんなこと、こんなことが盛り沢山でした…。
ひさびさに、こんなガッツリフロント側のコード書いてる〜〜〜〜！！！！楽しい〜〜〜〜！

本日の本題：LWCのリアクティブプロパティ

※そもそも、@trackを指定した変数＝リアクティブプロパティと呼ぶことすら、このブログを書いている時に知りました。アウトプット大事。

そんな感じでLWCを触っていて、まじ！？って思ったことが一つ。
リアクティブプロパティのデータのバインディングが双方向じゃないところ。

元々JS側のフレームワークでまともに触れたことあるのがVue.jsだけだったので、なんとなく「リアクティブプロパティは双方向バインディングなんだろう」という前提でコードを触っていました。
今回のお仕事では、画面にたくさん入力フォームがあり、lightning-inputを使っています。そのvalueにリアクティブプロパティをセットしてあげると、初期値は正しく入るのですが、入力フォームに値を入力しても、バインドしているはずの変数に値が入ってくれない！！
最初は、私の書き方が悪いのか、それとも元々の仕様なのかも切り分けできなかったので、とにかく調べた＆上司にヘルプを出しました。

しばらく調べた結果、下記の記事に辿り着きました。
www.desynit.com

We can summarise this saying that, while in aura data binding was bidirectional, in LWC is unidirectional. This means, for sending information from a parent to a child LWC, we use properties. While child components pass data up by firing events.

Auraコンポーネントのデータバインディングは双方向だったけど、LWCは一方向のバインティングなので、親→子に値を渡せても、子が親を変更することはできない、というようなことが書いてあります。
私はAuraを触った経験も乏しいので、Auraはそうなんだーくらいに思っていました。

そこでやっと理解できたのですが、結局lightning-inputなどのフォームの要素も1つのコンポーネントなんですね。
つまり、画面全体を親コンポーネントだとみなした時、lightning-inputを配置することは「入力フォーム要素を持った子コンポーネント」を呼び出している、と。

※念のため…実際のお仕事の画面ではありませんm(_ _)m

valueに変数を指定しているのを見ると、あたかもその変数を共有して双方向に書き換えるようなイメージを持ってしまうのですが、
画面全体が親コンポーネント、lightning-inputが子コンポーネントだと考えてみると、

valueに値をセットするのは、親が子に初期値のデータを渡している。
親の値を変更したい時は子からイベントを発火して変更する。

ここら辺がすんなり理解できました。

逆に、もしかしてVue.jsの仕様の方が結構特殊なのか…？？だから双方向データバインディングに慣れない、という人がいるのかも。。

ということで、勝手な勘違いで混乱したよ〜というお話でしたm(_ _)m
他にもいろいろ詰まっているので、ちょこちょこブログに残して行けたらいいなぁ…。

来週は、初級アドミンの試験を受けてきます！！今週は業務も試験勉強も頑張るぞ〜〜〜！！