一緒にプロジェクトやってる人がこんなの見つけたーと話していた。
受託のWeb開発とかだとサーバーサイドとの兼ね合いもあり自由にReactを使うとか使って宣言的に出来ず、どうしても命令的にやらざるを得ないことはある。そこで見つけた上記の記事「Stimulus – 受託Web屋に「ちょうどいい」JavaScriptフレームワーク」めちゃめちゃ気になるのでちゃんと読んで理解したい。
このフレームワークはReactみたいに全てを支配するわけではなくて、普通のマークアップに機能を足すものらしい。つまるところ状態はJS側で保持しない。まあ古き良きWeb開発。
今までは、機能を実装するならアコーディオンなら
js-accordionみたいにクラスをHTMLに振ってquerySelectorAllしてforEachしてそれぞれにnew Accordionとかして- その中で
.js-accortion_btnとかをquerySelectorしてaddEventListenerでクリックイベントやら登録して…
みたいにやる。
それが、Stimulusだと結構書き味変わってくるっぽい。
data-controllerでHTMLに処理を割り当てる。data-contoller="accortion"みたいな感じらしい。つまりjs-accordionって振ってquerySelectorAllしてforEachしてそれぞれにnew Accordionとかして、と同じ感じかな。data-actionでイベントの登録をする。data-action="click->accordion#open"みたいな感じらしい。これは、addEventListenerと同じ感じか。data-targetはJS側からDOMを参照する対象を設定する。.js-accortion_btnとかをquerySelectorするのと同じ感じか。
なるほど。Reactとかだと閉じた世界作れるけど、命令的にやると全てがグローバルにある状況で必死に名前を被らせないように頑張るけど、それをしなくて良くて、Stimulusで繋いでくれるのですね。 そしてDOMの監視してくれるのも良い。後から追加したDOMにアコーディオンの機能付与したかったらその要素だけにnewする必要あるのだけど、それをやってくれるの楽。
サーバーサイド組み込み用のHTMLテンプレートを実装する仕事
と書いてあって、うわーまさにそういうのやる〜〜〜という気持ちになった
ということでこのブログ書くことで理解できた。なるほど過ぎる。これは命令的にやるなら使いたいぞ。
シフトブレインの方のブログもあったので載せておく
