Stimulus - 素のHTMLを活かしたBasecamp製のJavaScriptフレームワーク
最近のフロントエンドではReact/Angular/VueなどVirualDOMを使ったライブラリが増えています。確かに便利なのですが、それぞれ独自のHTMLタグを使うので学習コストが大きくなります。プログラマは良くとも、デザイナーでは難しいこともあるでしょう。 そこで使ってみたいのがStimulusです。既存のHTMLをベースにしたJavaScriptライブラリです。
Stimulusの使い方
Stimulusのデモです。下記はHTMLですが、素のHTMLがそのまま使えます。
<!--HTML from anywhere-->
<div data-controller="hello">
<input data-target="hello.name" type="text"/>
<button data-action="click->hello#greet">
Greet
</button>
<span data-target="hello.output">
</span>
</div>
そしてこちらがJavaScript。 data-controller
でハンドリングするコントローラを定義し、 data-target
で操作するデータ対象を指定します。
// hello_controller.js
import { Controller } from "stimulus"
export default class extends Controller {
static targets = [ "name", "output" ]
greet() {
this.outputTarget.textContent =
`Hello, ${this.nameTarget.value}!`
}
}
こちらはその実行結果です。
特徴としては素のHTMLをそのまま活かしつつ、操作対象やイベントをdata要素を使って定義することでしょう。もちろんVirtualDOM同様にUIの書き換えを気にする必要はありません。変数を書き換えれば自動的にHTMLが書き換わります。
StimulusのポイントはRuby on Railsの開発元で知られるBasecampが開発していることでしょう。すでに彼らのサービスであるプロジェクト管理のBasecampでも使われていますので、今後の発展も期待できるのではないでしょうか。
StimulusはJavaScript製のオープンソース・ソフトウェア(MIT License)です。
Stimulus: A modest JavaScript framework for the HTML you already have. stimulusjs/stimulus: A modest JavaScript framework for the HTML you already have