「すでにあるHTMLのための謙虚なJavaScriptフレームワーク」と呼ぶStimulusは、先頃2番目の主要なイテレーションをリリースした。Stimulusは、GitHubのパターンのWebコンポーネントセットであるCatalystに影響を与えた。
ますます多くの懸念事項 (クライアント側のレンダリング、サーバ側のレンダリング、ルーティング、コンポーネント化、国際化など) に対応するために成長する包括的なフレームワークの次に、Stimulusは明らかに含まれるスコープを想定している:
Stimulusは、謙虚な野心を持つJavaScriptフレームワークです。フロントエンド全体を引き継ぐことはありません。実際、HTMLのレンダリングにはまったく関心ありません。代わりに、HTMLを輝かせるのに十分な動作でHTMLを拡張するように設計されています。
Stimulusは、コントローラ、ターゲット、およびアクションの属性にアノテーションが付けられたHTMLソースを使用する。これらのアノテーションは、ページにインタラクティブ機能を追加するために必要なJavaScriptの量を最小限に抑えるように、事前定義された規則に従って既存のJavaScriptコードにマップされる。
ドキュメントページには、次のHTMLソースの例が記載されている:
<!--HTML from anywhere-->
<div data-controller="hello">
<input data-hello-target="name" type="text">
<button data-action="click->hello#greet">
Greet
</button>
<span data-hello-target="output">
</span>
</div>
そのHTMLソースは、次のJavaScriptコードにマップされる:
// hello_controller.js
import { Controller } from "stimulus"
export default class extends Controller {
static targets = [ "name", "output" ]
greet() {
this.outputTarget.textContent =
`Hello, ${this.nameTarget.value}!`
}
}
data-controllerは、対応するDOM要素がhello_controller.jsスクリプトによって処理されることをStimulusに示す。data-action (ここではclick->hello#greet) は、Stimulusが対応するDOM要素でclickイベントハンドラ (helloコントローラのgreetメソッド）をプロビジョニングする。さらに、Stimulusにより、重要な要素をコントローラのプロパティにマッピングできる。次に、それらの要素への参照を有するコントローラは、望んだ論理に従ってそれらの要素を更新または検査することができる。したがって、前のサンプルコードのdata-hello-target属性は、helloコントローラでthis.nameTargetおよびthis.outputTargetとしてそれぞれ使用可能なnameおよびoutputDOM要素を参照する。
一部のDOM要素を更新するアクションをトリガするイベントハンドラを設定することは、インタラクティブなWebアプリケーションの動作の基本的な部分だ。したがって、Stimulusは、HTMLソースでDOM要素をそれらに影響を与えるJavaScriptに直接マッピングすることにより、他のフレームワークと比較して短いパスを取る。
その結果、作成するグルーコードが少なくなるかもしれない。Stimulusは、高レベルの抽象化 (仮想DOM、テンプレートシステム、リアクティブ値など) を備えたフル機能のフロントエンドフレームワークのより単純な代替手段と見なされる場合がある。これらのフレームワークは、大部分は、アプリケーションの状態をDOMから分離することを前提としており、カスタムデータ構造 (仮想DOM) でDOMの状態を複製することもあるが、Stimulusは、アプリケーションの状態の一部を保持するためにDOMに依存し、直接の更新とDOM要素の検査を支持する。
Stimulusのコントローラの概念は、RailsとLaravelのユーザには慣れ親しんだものだ。Stimulusは、Railsを作成した開発者の一部によるものが元となっている。DOMを直接更新し、信頼できるソースとしてDOM状態を使用することは、jQueryおよびjQueryプラグインを使用してWeb開発を開始した長年のプログラマにも同様に馴染みがある。Stimulusの背後にあるBasecampチームは、過去にBasecampを構築するためのjQueryなどのさまざまな手法やライブラリを使用していると報告した。チームは、使用されたさまざまなパターンが、新しいチームメンバの一貫性、再利用、およびオンボーディングを妨げているとコメントした。チームは、最新のフレームワークのほとんどはBasecampで発生した問題の解決に焦点を合わせていないと感じた。JavaScriptは、フロントと中心にあるHTMLをその逆に支援する。
Stimulusのチュートリアルの著者であるJohn Beatty氏は、次のように主張した:
実際にJSフレームワークを必要とするWebページはいくつありますか?
ほとんどは必要ではありません。それらはただ双方向性が少し必要なだけです。Stimulus.jsは、RailsアプリをJSON APIに任せることなく、ユーザの欲求するインタラクティブにするための最新のJavaScriptフレームワークを提供します。
ただし、Ruby on Railsの作成者であるDavid Heinemeier Hansson氏は、Stimulusがすべてのニーズに適合するわけではないことを強調した:
Stimulusは、既存のHTMLドキュメントの操作に関心があります。[…] Stimulusに新しいDOM要素を作成させたい場合がありますが、それは間違いなく自由です。[…] しかし、それは少数派のユースケースです。焦点は、要素の作成ではなく、操作にあります。
Stimulus […] は、他のより重いアプローチと組み合わせてうまく機能します。アプリケーションの80％が大きなリグを必要としない場合は、そのために2パックパンチを使用することを検討してください。次に、アプリケーションの中で本当にメリットが得られる部分に重機を展開します。[…]
何よりも、これは忠実度を競いたい、そして、主流のアプローチである、より骨の折れるものを使用するはるかに大規模なチームにリーチしたい、小規模チームのためのツールキットです。
GitHubは、Webコンポーネントを使用した複雑なアプリケーションの開発を容易にするためにGitHubで使用される一連のパターンであるCatalystのインスピレーションの源としてStimulusを引用した。3つのコアCatalystコンセプト (Observe、Listen、Query) は、3つのコアStimulusコンセプト (コントローラ、アクション、およびターゲット) をカスタム要素を持つコンテキストに適合させる。
Stimulus 2.0は以前のバージョンに基づいて構築され、いくつかのバグを修正し、Stimulus 1.0からのデータマップAPIを非推奨にする。Stimulus 2.0は、さらにDOMイベントリスナオプションをサポートし、値とCSSクラスAPIを追加する。
StimulusはMITオープンソースライセンスの下で利用可能であり、GitHubで利用可能だ。