最近のフロントエンドでは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}!`
  }
}

こちらはその実行結果です。

Stimulusのデモ

特徴としては素の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