凍えそうな季節ではある。少し間前でHotLimitで悩んでいたのが嘘のようだ。長男はすでに起きていて、そばでYoutubeを観ている。以前は無音あるいは作業用BGMを流さないと文章が書けない私だったが、今はそうも言ってられない。

Hotwireという概念を学んでいる。これはJavaScriptを書きすぎずに、モダンなウェブアプリケーションをつくるための手法である。Railsのバージョン7以降からデフォルトに搭載されるようになっており、Railsで書ける。他の言語を学ぶ必要がなくなるため、一人で開発をする私にはあっている。はず。

HotwireはTurbo/ Stimulus/ Native　という三つの機能というかパーツというか概念がある。Turboは画面遷移を司り、Stimulusは状態管理を行う。Nativeは今ひとつわからないが、モバイルアプリを作る際につかうようだ。ここではStimulusだけを紹介しよう。

公式ドキュメントの紹介によるると、Turboでは既存のJavaScriptが必要な処理のうちの80%をカバーしている。部分的にレンダリングを行うことなど、いろいろできるようだ。残りの20%をStimulusがカバーできる。

Stimulusのドキュメントを追う。StimulusはJavaScriptのフレームワークである。核心なのはdata-controllerか。それはJavaScriptのオブジェクトであって、その中の要素を変化を監視し、変化によって様々な処理を行う。

そのなかにaction,target, valueがある。すこしわかってきた。

Stimulusのはじまり

stimulusの環境構築が終わったら、divタグの中にdata-controllerという属性を設けて、コントローラーを宣言する。コントローラーの名前によってファイル名を参照するようだった。

 <div data-controller="simulationmode" id="simulation-controller">
</div>

app/javascript/controllers/simulationmode_controller.js

import { Controller } from "@hotwired/stimulus";

export default class extends Controller {
}

初期状態の設定

https://stimulus.hotwired.dev/handbook/managing-state#lifecycle-callbacks-explained

コントローラーの中で connect() メソッドを宣言することで、コントローラーがDOMに接続された状態（この表現が正しいかわからない）ときの処理を書くことができる。今回は状態を管理させたいので、その値を設定させる。

import { Controller } from "@hotwired/stimulus";

export default class extends Controller {

  STATES = {
    SELECT: "select",
    ADD_OPERATOR: "add-operator",
    ADD_FACILITY: "add-facility",
  };

  connect() {
    this.State = this.STATES.SELECT;
    console.log(this.State);
  }

イベントとの紐付け

　ラジオボタンをつくり、それが押された時のイベントを設定させたい。data-action という属性でもって、メソッド名と紐付けを行う。今回は以下のように状態を管理するようなメソッドを作った。

 <div data-controller="simulationmode" id="simulation-controller">
    <fieldset>
        <span>
          <input
            type="radio"
            name="mode"
            id="editMode"
            checked
            data-action="simulationmode#edit">
          <span>編集</span>
        </span>
      </label>
        <span>
          <input
            type="radio"
            name="mode"
            id="simulateMode"
            data-action="simulationmode#checkSimulate">
            <span>実行</span>
        </span>
    </fieldset>
</div>

app/javascript/controllers/simulationmode_controller.js

import { Controller } from "@hotwired/stimulus";

export default class extends Controller {
  STATES = {
    SELECT: "select",
    ADD_OPERATOR: "add-operator",
    ADD_FACILITY: "add-facility",
  };

  connect() {
    this.State = this.STATES.SELECT;
    console.log(this.State);
  }

  edit() {
    this.State = this.STATES.SELECT;
    console.log(this.State);
  }

}