コンセプト

Stimulusのコア・コンセプト

ここに記載している内容は2018年に書かれたThe Origin of Stimulus (Stimulusの始まり)を参照し、私の経験で少し補足したものです。

Stimulusの3つのコア・コンセプト

  • Controller: Actionから指令を受け、処理をし、結果をTargetに出力するもの。全体をまとめます
  • Action: ブラウザのイベントを受け取り、適切なControllerの適切なメソッドを呼び出すもの
  • Target: Controllerから参照されるもの。通常はControllerで処理された結果がtargetに反映・出力されますが、Controllerがtargetの状態を読み出すこともあります

(通常は)HTMLを生成しない

  • Stimulusは通常はHTMLを生成しません
  • Stimulusはサーバが生成した既存のHTMLに繋がれ、そのHTMLを変更します
    • CSSクラスの追加・削除(HTML要素の表示・非表示やアニメーション等を制御します)
    • HTML要素の並べ替え
    • HTML要素のコンテンツ(テキスト等)の変更
  • もちろん新しいDOM要素を作ったりすることもできますが、このようなケースは少数です

ステートの管理

  • ステートはHTML要素に持たせます

補足: もちろんステートをURL, cookie, localStorage, windowオブジェクトやStimulus Controllerのインスタンス変数等に持たせることはできます。Reactと異なり「ステートはこう管理すべき」というのがないだけです。とはいえStimulusでは一般的にステートをHTML要素に持たせます。それは上述のように変更を受けたHTMLそのものであったり、あるいはStimulus Controllerのインスタンス変数にバインディングされたValuesだったりします。

Reactを含めた他のライブラリと一緒に使う

  • Stimulusは他のライブラリと一緒に使えます(RailsにはTrixというリッチテキストエディタが含まれていますが、それはStimulusで書かれているわけではありません)
  • なお本サイトではStimulusを他のJavaScriptと組みわせて使用した例を紹介しています