Hotwire を Rails に導入した過程で Stimulus をさわり始めたのですが、Stimulus controller の作り方がなんとなく分かってきたので、考えたことをメモしておきます。

結論から言うとタイトル通りで Stimulus controller はページ単位で作るのではなく、役割毎に分割して1つのページ内に複数の Stimulus controller を適用して使っていく方が良さそうと言う感じです。

僕は当初 Rails の controller に引っ張られて、Rails controller と Stimulus controller は 1:1 の関係がいいだろうと思っていたんですが、そうすると似たような処理が増えてきたり、Stimulus controller のスコープが広くなって肥大化していくのが微妙だなと感じました。

改めて Stimulus リファレンスを見ると、こう言うふうに書いてありました。

It’s common for any given element on the page to have many controllers.
In the example above, the <div> has two connected controllers, clipboard and list-item.

Similarly, it’s common for multiple elements on the page to reference the same controller class

普通に複数の Stimulus controller つけるし、同じ controller も繰り返し使うこともあるよ、と。

なので今まで以下のように controller を分割していましたが…

  • login_controller.ts
  • article_controller.ts

このように役割毎に分割するようにしました。

  • validate_controller.ts
  • clipboard_controller.ts
  • switch-tab_controller.ts
  • modal_controller.ts

こうすることで Stimulus controller の scope が自然と小さくなり、再利用可能な controller が作れるようになります。