同じpage内で同一のStimulus controllerを何度も利用したいとき

概要

PF用にアプリを個人開発しているRailsしか知らない素人です。親愛なるDHHが提供するHotwireを完全に理解した　までも行きついていません。何もかもが霧の中、私はどこにいるのか…
その　Hotwireに含まれる必要十分なJSパッケージ、 Stimulusのcontrollerを同じページ内で何度も使用する状況の際、なんかうまくいかないなぁ🤔、ハマったなぁ😂、ということがあったのですが、とても単純なことで解決できたので、Stimulusはいいぞ👍、もっと流行ってくれというご祈祷として記事を作成します。

環境

この記事作成当時の一番latest releaseのversionを使用してました。

Gemfiles.rb

# 抜粋です
gem 'stimulus-rails', '~>1.2.1'

やりたかったこと

タイトルの通り、同一page内で同じstimulus controllerを何度も利用したい。

結論

使う場所ごとに個別にcontrollerを宣言してその中でtargetやactionを記載すればうまくいきました。

経緯

pageの先頭やapplication.html.erbのmainタグのすぐ下でdata-controllerを宣言しているのをよく見かけていたので、それに倣ってかどうかわからないのですが、pageの先頭のdivタグで宣言しておいてその中でdata-ホニャララ-targetやdata-actionを複数書いてました。
ここではpreviewという名前のcontrollerを何度も利用したいとします。

<div data-controller="preview">
    <div data-preview-target="source" data-action="preview#imagePreview">
    ...
    </div>
    <div data-preview-target="source" data-action="preview#imagePreview">
    ...
    </div>
</div>

普通に変な感じがするなぁと思いますよね。それではやっぱりダメなんですね。
結論で述べた通り、使いたいところで個別にcontrollerを宣言すれ動作しました。

<div>
    <div data-controller="preview">
        <div data-preview-target="source" data-action="preview#imagePreview">
        ...
        </div>
    </div>
    <div data-controller="preview">
        <div data-preview-target="source" data-action="preview#imagePreview">
        ...
        </div>
    </div>
</div>

所感

下記の参考サイトが詳しいですのですが、stimulusのcontrollerは単一責任にするべしとのことです。そうすることで再利用性が高ますぞとのこと。自分ができているかは置いといてなるほどなぁと。実際に再利用しようと思ってやってみると中々うまくいかなくてどうしましょうとなったので、同じ思いをする人が一人でも減ったらいいと思ってマス。（こんなことでハマるのは私以外にいないか…）
一個controllerという部品できればいろんなところに簡単に適用できるので楽ちんです。
stimulusはいいぞ👍

参考サイト