🎮
Stimulus
HTML中心の軽量JavaScriptフレームワーク
StimulusはHotwireのJavaScriptフレームワークで、HTMLに属性を追加してJS動作を宣言的に接続します。
<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>
// app/javascript/controllers/hello_controller.js
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
static targets = ["name", "output"]
greet() {
this.outputTarget.textContent =
`Hello, ${this.nameTarget.value}!`
}
}
3つのコア概念:
Controller:
data-controller="name"— JSコントローラ接続Action:
data-action="event->controller#method"— イベント→メソッドマッピングTarget:
data-controller-target="name"— DOM要素参照
追加: Values（data-controller-value-name）、Classes（data-controller-class-name）、Outlets（他コントローラ参照）
キーポイント
1
data-controller="name"でHTML要素にコントローラを接続
2
static targets = ["output"] 定義 → data-name-target="output" でDOM参照
3
data-action="click->name#method" でイベントハンドラを接続
4
connect() — コントローラがDOMに接続された時自動呼出
5
disconnect() — DOMから削除された時自動呼出（クリーンアップ）
6
static valuesでHTML属性からデータ伝達（data-name-url-value="..."）
メリット
- ✓ HTML中心 — サーバーレンダリングと自然に結合
- ✓ 軽量（React/Vueに比べ非常に小さい）
- ✓ Turboと完全互換
- ✓ 学習曲線が低い
デメリット
- ✗ 複雑なクライアントロジックには限界
- ✗ SPAレベルの状態管理が困難
- ✗ React/Vueエコシステムに比べ小さなコミュニティ
- ✗ コントローラ間通信が複雑になりうる
ユースケース
ドロップダウン/モーダルトグル
フォームのリアルタイムバリデーション
クリップボードコピーボタン
タブ切替
Ajaxベースのオートコンプリート