Zenn
Open3

Stimulus学習メモ

Rails
Stimulus
なかじなかじ

The Origin of Stimulus

概要

  • StimulusはBasecampが開発したJavaScriptで書かれたクライアントサイドのライブラリ
  • HTMLを中心に考え、JavaScirptで書かれた振る舞いをHTMLから呼び出すことができるように設計されているらしい（参考）
  • SPAだとクライアントサイドで必要なHTMLやCSS、JavaScriptなどを最初に受け取り、差分をjson形式で要求する（参考）のに対して、TurboやStimulusはベースがサーバサイドでのHTMLとなる。要するに昔ながらの方法だけど通信技術の向上によってSPAっぽい感じになっていると理解した。

Turboの祖先

Stimulus が主流の JavaScript フレームワークと異なる点

  • 他のフレームワークでは、何らかのテンプレート言語を介して JSON を DOM 要素に変換することに重点を置いている。JavaScript オブジェクト内で状態を維持し、その状態に基づいて HTML をレンダリングする。
  • 一方でStimulusでは状態が HTML に保存される。

参考資料

なかじなかじ

Stimulusの基本的な使い方 -猫でもわかるHotwire入門 チュートリアル3

src/controllers/hello_controller.js
import { Controller } from "@hotwired/stimulus"

// コントローラークラスを定義する
export default class extends Controller {
  // ターゲット（操作対象のDOM）のプロパティを作成
  static targets = [ "name" ] #=>data-hello-target

  // アクション（イベントに紐づく処理）を定義する
  greet() {
    // xxxxTargetでターゲットとなるDOMにアクセスできる
    // ターゲット（今回であれば<input>）のvalueをログ吐き
    console.log(this.nameTarget.value)
  }
}

<!-- コントローラーをdiv要素にアタッチする -->
<div data-controller="hello">
  <!-- <input>をターゲット（操作対象のDOM）をとして指定する -->
  <input data-hello-target="name" type="text">

  <!-- アクションとイベントを紐付ける -->
  <!-- click時にhelloコントローラーのgreetアクションを実行する -->
  <button data-action="click->hello#greet">Greet</button>
</div>
  • コントローラ：data-controllerの属性値とJSのファイル名が紐づく
  • ターゲット: data-<コントローラー>-target属性の値とstatic targets = []で定義された値が紐づく
  • アクション: data-action属性の値とメソッドが紐づく