家族からおせちづくりの招集がかかるまでに書けるかどうかテスト 
GitHubでフォローしている@amatsudaさんがStarをつけていて、気になったので試してみたことをまとめてみました。
執筆時点でv1.0ではありませんので、理解した上で読み進めてください。
Stimulusとは
Stimulusをひとことでいうと、HTMLに data-controller 属性を付与することで、HTMLをコンポーネント単位でJavaScriptオブジェクトに紐づけることのできるフレームワークです。
Basecampメンバーによって開発されており、主要開発者にはSprocketsやTurbolinks作者のsstephenson氏がいます。
BasecampのDOMも見てみましたが、Stimulusが実際に使われているようでした。
READMEにもありますが、Basecampで導入されていることからも予想がつくとおりTurbolinksとも共存可能です。
コード
Getting Startedがリポジトリに、Boilerplateがstimulus-starterというリポジトリにあるので、合わせて見てください。
まず、次のようにコンポーネントのルートに data-controller 属性を付与します。
<div data-controller="hello"></div>
次に hello_controller.js として次のようなコントローラを書きます。
import { Controller } from "stimulus"
export default class extends Controller {
connect() {
console.log("Hello, Stimulus!")
}
}
connect() はコントローラがHTMLとひもづいた際に呼ばれる関数で、Reactのライフサイクルでいう ComponentDidMount() のようなイメージです。
このコンポーネントをもつページがJavaScriptとともに呼ばれたら、ログに Hello, Stimulus! と表示されます。
アクション
Stimulusでは、たとえばボタンのアクションとしてコントローラの関数を指定できます。
次のコードは、ボタンのクリック時にコントローラの greet() を実行しています。
<div data-controller="hello">
<input data-target="hello.name" type="text">
<button data-action="click->hello#greet">Greet</button>
</div>
import { Controller } from "stimulus"
export default class extends Controller {
greet() {
const name = this.targets.find("name").value
console.log(`Hello, ${name}!`)
}
}
3つの属性
上記の例にも登場しましたが、Stimulusには次の3つの属性があり、これらをHTMLに書いていくことになります。
-
data-controller: コンポーネントの名前 -
data-action: イベントのトリガ -
data-target: コントローラからハンドルする対象
CoC
上の例では、 data-controller として hello という名前をつけ、 hello_controller.js という名前でファイルを作成しましたが、この対応はアプリケーション側で行う必要があります。
Stimulus StarterではWebpackを用いていますが、 @stimulus/webpack-helpers の autoload() という関数により、任意のディレクトリ下のファイル名から動的にコントローラとひもづけているようです。
このあたりはRailsの思想と同じですね。
Webpackを使わくてもStimulusを使うことはできますが、その際は手動でStimulusにコントローラを認識させる必要があるようです。
おわりに
以上の例より、たとえばアプリケーションにいいねボタンを実装するとき、そのボタンに対応したJavaScript側の処理を単一のクラスに集約できるので、フロントエンドをクリーンに保てるのでは、と想像できます。
Stimulusは、READMEにもあるとおり、すべてのフロントエンドフレームワークの代替となることは目的としておらず、HTMLをJavaScriptにより拡張するためのフレームワークのようです。
導入対象としては、Ruby on Railsを用い、ReduxやVue.js、Angularなどのフレームワークを使わず、Turbolinksを有効にする前提のアプリケーションにおいて、少ないコストで効率的に開発できるのではないでしょうか。
