Stimulus中のHTML生成を避ける理由

HTML生成を避けるのは自主ルール

Stimulus Controllerの中でHTMLを生成することはできます。jQuery時代のように、JavaScriptコードで自在にHTMLは作れます。しかしそれを自主的に避けるのがHotwireの流儀です。

その理由を紹介します。

ERBとの重複を避ける

Railsの世界ではまずERBを使ってサーバサイドでHTMLをレンダリングするのが大原則となります。サーバでのERBレンダリングが主です。同じHTMLをStimulusでも生成してしまうと、HTMLを２箇所で記述することになってしまいます。これだと同じコードを複製することになり、メンテナンス上の問題になりやすいです。

Stimulus Controllerの中でHTMLレンダリングをなるべくしないのはこのためです。

StimulusでHTMLレンダリングをすることもある

もちろんStimulusでHTMLをレンダリングしたり、直接DOMを記述することは可能です。jQueryではこれは一般的に行われていましたし、軽量のJavaScriptテンプレートライブラリも昔から存在する。やろうと思えば問題なくできます。

しかしHotwireのそもそもの存在意義はフロントエンドを簡単に書けるようすることです。簡単じゃなければ存在意義がありません。そのため、StimulusはCSSクラスの切り替えやHTML属性の変更、あるいはHTML内容のちょっとした書き換えに留めることを一般的には心がけます。

Stimulusの中だけでHTMLレンダリングするなら問題ない

Hotwireで避けたいのはHTMLレンダリングのコードが重複してしまうことです。したがってサーバサイドでのレンダリングをやめて、クライアントサイドに完全に任せるなら問題ありません。実際、Stimulusの中でReact/JSXを書き、Stimulusのステートなどをpropsとして渡していくこともできます。

より一般的にはChart.jsなどを使って、StimulusでChart.js等にデータを渡すことは普通にやります。