Stimulus に入門してみた

Rails7 のデフォルトでインストールされる JavaScript フレームワーク Stimulus に入門してみます。

まずは公式のハンドブックやリファレンスを読みながら雰囲気を掴んでいこうと思います。

Stimulus とは

HTML を中心に置いている JavaScript のフレームワークです。
React や Vue は空のページを作成してサーバーサイドから JSON を返し SPA を実現していますが、 Stimulus は通常のサーバーサイドレンダリングを強化するように設計されています。

Stimulus は Railsに依存しているわけではないですが、Rails7 にデフォルトで入っている Turbo と組み合わせるとSPAのようなUIを実現できます。

3つのコアコンセプト

Stimulus には3つのコアコンセプトがあります。

コントローラー

コントローラーは DOM 要素と JavaScript オブジェクトを繋げます。data-controller属性でコントローラーのファイル名を指定します。
class属性が HTML と css を繋ぐとすれば、data-controller は HTML と JavaScript を繋ぐイメージです。

<div data-controller="hello"></div>

hello_controller.js

import { Controller } from "stimulus"

export default class extends Controller {
}

アクション

コントローラーで DOM イベントを処理するためアクションを書きます。data-action属性で[イベント]->[コントローラ]ー#[メソッド]で指定します。

<div data-controller="hello">
  <button data-action="click->hello#greet">Greet</button>
</div>

hello_controller.js

import { Controller } from "stimulus"

export default class extends Controller {
  greet() {
    console.log('Hello')
  }
}

ターゲット

ターゲットで要素に名前をつけることができます。data-[コントローラー]-target属性でターゲット名を指定します。

<div data-controller="hello">
  <button data-action="click->hello#greet">Greet</button>
  <span data-hello-target="output"></span>
</div>

hello_controller.js

import { Controller } from "stimulus"

export default class extends Controller {
  static targets = [ "output" ]

  greet() {
    this.outputTarget.textContent = "Hello"
  }
}

まとめ

今回はコンセプトだけ確認しました。小規模なアプリであれば、React や Vue を導入するよりはサーバーサイドレンダリングにした方が効率がよいこともあると思います。次回以降で細かな仕様やベストプラクティスを見ていきたいと思います。

References