Stimulus
HTML中心主義
JSONをやり取りするとかレンダリングをどうこうするとかでは全然ない
HTMLを増強するもの
最初独立したフレームワークとして登場し、後にHotwireが発表されたときに構成要素の一つとされた
単体でフレームワークとして使えることには変わりない
Hotwire的には、基本的にTurboで大体のことをやるが、それでも足りない時にStimulusを使う HotwireやTurboもHTMLを中心に考えている
使い方
基本
controllerを作ってvalueとactionでtargetをアレする
controller
stimulusのcontrollerを継承したJSのオブジェクト
いわば一つのcontrollerが一つのコンポーネント
action
controllerに定義された関数というかメソッドというか
もっぱらDOMのイベントから呼び出す
target
その名の通りcontrollerのtargetにする要素
value
value、値。controller内にある要素のvalue。valuableかどうかは分からない
もうちょい具体的な使い方
code:hello_controller.js
import { Controller } from "stimulus"
export default class extends Controller {
greet() {
console.log("Hello, Stimulus!", this.element)
}
}
code:html
<div data-controller="hello">
<input type="text">
<button data-action="click->hello#greet">Greet</button>
</div>
controllerとの接続
HTMLにdata-controllerattributeを付けることで、controllerと接続する
data-controller="{controller}"
HTMLとCSSがclassによって接続されるのと同じように、data-controllerによってHTMLとJSが接続されると考えるといいそうだ
stimulus-railsを使っている場合はファイル名で紐付けられる
上の例だと、HTMLのdata-controller="hello"がhello_controller.jsに対応している
stimulus-rails使わない場合は@hotwired/stimulusからimportしたapplicationインスタンスにregisterするとかだが、割愛
action
data-actionでDOMのeventからメソッドを呼ぶ
data-action="{event}->{controller}#{method}"
上の例ではbuttonのclickイベントからhello_controllerのgreetメソッドを呼ぶようにしている
target
data-{controller}-target="{name}"
controllerではstatic targets = [ "{name}" ]で定義し、this.{name}Targetで最初にマッチする要素が取得できる
所感
古いrailsのJSをコンポーネント化する時とかの選択肢に、なるかなあ?
Virtual DOMじゃないのは、そこはturbolinksでええやろってことかと
とはいえTurbo抜きでも設計的な恩恵は得られそうな気がする
場合によってはさらにreactに移行するために共存するのもまあできそうな気はする
classの単位がどうなるのかちょっとわからない
reactよりは比較的大きくなりそうな気がする
stimulusは入れ子にする感じではなさそうだから小さいclassにならなそう
と思ったが、入れ子にしたり複数Controllerを割り当てたりするようだ
ref.
使えるコンポーネントを探すというより、実装の参考にするといいと思う
これはとにかく実装の参考にした