マイペースなRailsおじさん

Ruby、Ruby on Rails、オブジェクト指向設計を主なテーマとして扱います。だんだん大きくなっていくRuby on Rails製プロダクトのメンテナンス性を損なわない方法を考えたり考えなかったりしている人のブログです。

Stimulas、いつつかうん?

Stimulas

Stimulasは、少ないコード量で動的な表現をすることに主眼を置いて開発された、軽量なJavaScriptフレームワークです。DHH率いるBaseCampが公開してます。

主に提供している機能はこの2つです。

  • DOM要素のイベントと、そのイベントにフックするJSのメソッドをHTMLへの簡単な記述で紐付けられる。
  • DOM要素とJSの変数を、HTMLへの簡単な記述で紐付けられる

解説はこちらがわかりやすいです。 JavaScript初心者にもオススメ!クリーンなコードでHTMLを拡張する「Stimulus」とは?|ferret

vs Vue.js, React.js

フロントエンドのフレームワークといえば、Vue.jsReactです。これらと比較するとどうでしょう?

結論から言うと、Stimulasはこれらのフレームワークほど協力ではありません。値を双方向バインディングして自動的にDOM要素を更新するような機能も無ければ、UIパーツをコンポーネント化して使い回すような機能もありません。

例として、Vue.jsではテンプレートの中に変数を入れておくと、その変数が更新されれば自動的にDOM要素の値も更新されます。これをバインディングといいますが、Stimulasにはそのような機能はありません。DOM要素を更新したければ、プレーンなJSを使うときと同様、HTMLのAPIを操作してDOM要素を更新する必要があります。

いつつかうん?

私が考えるのStimulasの使い所は、「フロントエンド専門のエンジニアがいないプロジェクトでJSを書く場合」です。

フロントエンドのエンジニアがいるような環境では、HTMLの共通化や自動生成はVue.jsやReact.jsを用いjてJS側で行われることがほとんどなはずです。 いくらStimulasが軽量のフレームワークで覚えることが少ない、といっても今どきの大抵のフロントエンドエンジニアは、よりリッチなVueやReactを使える人がほとんどです。わざわざ新しいことを覚えて、より非力なフレームワークを使うというのは非効率に感じます。

また、フロントエンドエンジニアが投入されているようなプロジェクトでは、やはりそれらリッチなフレームワークを使うべき複雑なフロントエンドの制御が求められるはずです。そのような場合、Stimulasを使ったからと言って、フロントエンド開発の効率化はあまり期待できません。

逆に、Railsのようなフレームワークを使って、モノリシックなアプリケーションを少人数で作っているような環境では、Stimulasが役に立つかもしれません。 JSにあまり詳しくないエンジニアからすれば、Stimulasは非常にちょうどいいフレームワークです。 きっと、そのような人たちはこのように考えると思います。

  • 生のJSでは、DOM取得と操作がコードの大半を埋め尽くしてしまい、記述が面倒である。
  • フロントエンドで複雑な制御(状態がたくさんあったり、UIパーツをガラッと入れ替えたり…etc.)を必要としない、控えめなフロントエンドの制御が必要な場合に、Vue.jsやReactのようなリッチなフレームワークを活用するのはやりすぎである。

そう思ったとき、Stimulasは、生のJSとリッチなJSフレームワークとのちょうど間をいく、いいかんじのフレームワークなんです。

サーバーサイドからHTML、CSSまで一人で触るような開発をしている場合、サーバーサイドでできること(HTMLの生成)を、わざわざJSに書くのは非効率です。そのため、クライアントサイドでの描画が必要な動的な部分だけを効率よく作りたい、と考えるのは自然なことに感じます。 Stimulasは、サーバーサイドでHTMLの共通化や自動生成を行っているプロジェクトで、JSのコードを記述する量を最小化するのに用いるのが適しているのではないかと考えています。