きゃらめるの備忘録

Salesforceに関してお勉強したことをまとめるブログ。目指せ週1更新~~~!

LWCのコンポーネント間イベントのクセが強い(気がする)

こんばんは、きゃらめるです。
なんとか10月内に2本、技術的な内容のブログを更新できました!やった!

本題:コンポーネント間のイベントのクセ、とは

ということで、前回の記事にてお話していた、LWC(Lightning Web Component)でコンポーネント間でのイベントについてです。
前回のブログで私は、「LWCは、子から親へのイベント発火部分が、階層構造を感じさせないような作りになっている」と書きました。

私が今まで触った経験のあったVue.jsは、親子関係がとてもはっきりしており、子→親にしかイベントを発火できません。
この関係性はとてもシンプルですが、コンポーネントの階層が深くなるとバケツリレー的にイベントを発火する必要があります。
qiita.com
※まさにこちらの記事が分かりやすかったので引用しました。

一方、LWCは、孫から親にイベントを発火できます。
正確に言うと…孫が発火したイベントを、孫の直属の親である子だけではなく、その親も受け取れてしまいます。
なんなら、自分の子ではないコンポーネントからのイベントすらも受け取れてしまいます。

図で書いた方が分かりやすい気がしたので図にしてみました。
f:id:calamel_nuts:20201030194656j:plain
f:id:calamel_nuts:20201030194621j:plain

得意なこと・不得意なこと

2つのイベントの違いを見てきましたが、場面によって得意・不得意があると思っています。

例えば、自分の子コンポーネントがイベントを発火した時だけ親コンポーネント側で処理をしたいという場面は結構発生すると思います。
Vue.jsでは「子からのイベントしか受け取らない」という制約のお陰で「イベントを発火したのが自分の子であるか?」をプログラム側で確認する必要がありません。
一方LWCでは別の子が発火したイベントも拾ってしまうため、実装時には「イベントを発火したのは自分の子であるか?」を確認する処理を書きました。(ここ、私の知識不足だったら教えていただきたいです…最適解を知りたい…)

逆に、コンポーネント階層が深くなった場合や親の兄弟等にイベントを渡したい場合、Vue.jsで管理しようとすると複雑になってしまう問題点もありました。(こういった状態管理の複雑さを軽減するために、Vuexが出てきたと認識しています。)
LWCではイベントの受け取り相手に制限がない分、階層の構造や深さに依存して複雑性が上がる、という部分は軽減されているように思います。

おわりに

なんだか、Vue.jsとLWCの比較をしてしまったばかりに、「どっちがいいのか?」みたいな記事になってしまいましたが、LWC上でVue.jsをインポートして使おうぜ!みたいなことではないです。(今思いつきで書いたけど、できるのかな…。)

まだまだLWCに関する記事ってあまり出てこないので、もっとLWCの特性を学んで正しく使って行きたいものです。
もし間違っているよ!という記述があれば、ぜひとも教えてください…。