Stimulus

Basecamp(DHH?)が作ったJSのフレームワーク

HTML中心主義的で、JSONをやり取りするとかレンダリングをどうこうするとかでは全然ない

HTMLを増強するもの

Virtual DOMではない

名前からしてもReactへの対抗心剥き出しっぽい

最初独立したフレームワークとして登場し、後にHotwireが発表されたときに構成要素の一つとされた

単体でフレームワークとして使えることには変わりない

Hotwire的には、基本的にTurboで大体のことをやるが、それでも足りない時にStimulusを使う

HotwireやTurboもHTMLを中心に考えている

使い方

HTMLにdata-controllerattirubuteを付けることで、jsで実装したcontrollerと接続する

HTMLとCSSがclassによって接続されるのと同じように、data-controllerによってHTMLとJSが接続されると考えるといいそうだ

controllerとの紐付けについて

stimulus-railsを使っている場合はファイル名で行う

下の例だと、hello_controller.jsとHTMLのdata-controller="hello"が対応している

その他の場合は@hotwired/stimulusからimportしたapplicationインスタンスにregisterするとかだが、割愛

参考: https://github.com/stimulus-components/stimulus-rails-nested-form/blob/master/index.html

https://stimulus.hotwired.dev/handbook/installing

data-actionでDOMのeventからメソッドを呼ぶ

code:html

<button data-action="click->hello#greet">Greet</button>

</div>

code:src/controller/hello_controller.js

import { Controller } from "stimulus"

export default class extends Controller {

greet() {

console.log("Hello, Stimulus!", this.element)

}

static targets = [ "hoge" ]の話

https://stimulus.hotwired.dev/handbook/building-something-real#what’s-with-that-static-targets-line?

https://stimulus.hotwired.dev/reference/targets

所感

古いrailsのJSをコンポーネント化する時とかの選択肢に、なるかなあ?

turbolinksと一緒に使ってこそメリットあるのかな?

Virtual DOMじゃないのは、そこはturbolinksでええやろってことかと

その後Hotwireが発表されて、そんなようなことだった

とはいえTurbo抜きでも設計的な恩恵は得られそうな気がする

場合によってはさらにreactに移行するために共存するのもまあできそうな気はする

jQueryから徐々にReactに移行する時と同じノリ

classの単位がどうなるのかちょっとわからない

ちゃんと使ったことがないので

reactよりは比較的大きくなりそうな気がする

stimulusは入れ子にする感じではなさそうだから小さいclassにならなそう

ReactとかよりStimulusの方がWeb ComponentsなどWeb標準寄りな感じがする

ref.

Stimulus Handbook

Stimulus Components

Introducing Stimulus components | Guillaume Briday

使えるコンポーネントを探すというより、実装の参考にするといいと思う