はじめに
最近、railsでstimulusを使い始めました。まだまだ、使い方がよくわかっていないところがあるので、ドキュメントを読みながら1から学びたいと思います。
今回はドキュメントのhandbook通りに進んでいきます。railsで使いそうでない部分は省いています。
ドキュメントはこちら
stimulusとは
stimulusはjavascriptのフレームワークです。
Stimulusは、すでに存在する静的なHTMLやサーバーで生成されたHTMLをより便利にするために設計されているようです。
Stimulusはページを継続的に監視してHTMLのdata-controller属性が現れたら、それに対応するjsファイル（命名規則あり）と対応付けします。
難しく感じますが、今までcssでも使われるclassやidから属性を取得していたものを、data-controller属性というもので、明確にjsとhtmlのつながりを分けたというものだと思います。
stimulusは以下の3つの主要なコンセプトがあります。
- action：data-action属性を使用してコントローラーメソッドをDOMイベントに接続
- target：コントローラー内の重要な要素を特定
- value：コントローラーの要素上のデータ属性を読み書きし、監視する
記述方法
stimulusを使うためには、ざっくりいうとコントローラーと属性を定義してあげればいいです。
コントローラー
stimulusではcontrollersという配下に〇〇_controller.jsというファイルを作成します。
〇〇の部分はなんでもよいですが、_controllerは必ず必要なようです。
中身はこのようになっています。
static targets = [ "name" ]は後述するHTMLでのdata-hello-targetと対応します。
connect()は初期化時に呼び出されるイメージです。
greetはメソッドです。属性部分と対応させて、console.logを表示します。
this.nameで別のメソッドを呼び出し、this.nameTarget.valueの値を取得しています。
nameはhtmlで指定された名前の部分です。指定した名前＋Targetとすることで要素を指定できます。
// src/controllers/hello_controller.js
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
connect() {
console.log("initial")
}
static targets = [ "name" ]
greet() {
console.log(`Hello, ${this.name}!`)
}
get name() {
return this.nameTarget.value
}
}
属性
-
data-controller属性はどのcontrollersフォルダ配下のファイルを使用するか、対応付けをします。
data-controller="hello"はdata-controllerでhelloを指定しているので、hello_controller.jsと対応付けされます。 -
data-hello-target="name"はjs側で要素を参照するための値です。idやclassで要素を参照していたのをdata-hello-targetで取得しているイメージです。（helloはcontrollerの名前） -
data-action="click->hello#greet"はイベントがトリガーされた際に呼ばれるメソッドを定義します。この場合はclickイベントのときに、hello_controller.jsのgreetメソッドが呼ばれます。
click:イベント名
hello:コントローラ識別子
greet:呼び出すメソッドの名前
<div data-controller="hello">
<input data-hello-target="name" type="text">
<button data-action="click->hello#greet">Greet</button>
</div>
動作
ブラウザでページを読み込み、開発者コンソールを開き、「Greet」ボタンをクリックすると、ログメッセージが表示されます。
次回
さらにドキュメントを読み進め、まとめていこうと思います！