Stimulus.JS: 値の変更時にトリガーされるコールバックをコントローラで利用する（翻訳）

Stimulus.JS: 値の変更時にトリガーされるコールバックをコントローラで利用する（翻訳）

Stimulusのvalues APIには、「変更時に発火するコールバック」という便利な機能があります。これによって、値が変更されたときに常に応答できるようになります。🦉

values APIについて簡単におさらいしておくと、Stimulusのコントローラ要素にあるdata-*属性を読み書きできるようにするものです。

たとえば、HTMLで<div data-controller="counter" data-counter-time-value="10">10</div>のように定義できます。

次に、それらをStimulusコントローラのstatic valuesで以下のように定義します。

export default class extends Controller {
  static values = { time: Number }
}

上のStimulusコントローラで、以下のようにconnect関数でタイマーを開始したくなるかもしれません。

// app/javascripts/controllers/counter_controller.js
export default class extends Controller {
  static values = { time: Number }

  connect() {
    this.timer = setInterval(() => {
      this.timeValue--;

      if (this.timeValue > 0) {
        this.element.textContent = this.timeValue;
      } else {
        this.element.textContent = "Time's up!"

        clearInterval(this.timer);
      }
    }, 1000);
  }
}

上のような実装は問題なさそうに見えるかもしれませんが、私は関数のスコープを小さく保つのが好みなので、次の要件として停止（stop）と一時停止（pause）機能を追加することにします（さらに、変更コールバックの利用方法を説明するためのブリッジも必要でしょう）。

そこで、変更コールバックを用いて少しリファクタリングしてみましょう。

export default class extends Controller {
  static values = { time: Number }

  connect() {
    this.timer = null;

    this.#start();
  }

  // private

  timeValueChanged() {
    if (this.timeValue > 0) {
      this.element.textContent = this.timeValue;
    } else {
      this.element.textContent = "Time's up!";

      clearInterval(this.timer);
    }
  }

  #start() {
    this.timer = setInterval(() => {
      this.timeValue--;
    }, 1000);
  }
}

timevalueChanged()は、this.timeValueが変更されるたびに呼び出されます（変更はprivate関数#start()で行われます）。

皆さんは、このコードの方が良いと思いますか？「クラスが肥大化している」という意見も聞こえてきそうですが、私はこの方が追いかけやすいと思います。
#start関数が関連しているのはタイマーの開始だけです。
ここに、stop()やpause()といったpublic関数を併記することで以下のような処理が行えることは、すぐ想像がつくでしょう。

• 文字カウントで許される最大数を表示する
• urlValueが変更されたらAPIエンドポイントをフェッチする
• select要素で選択したオプションを表示する
• 値の「読み込み中」はボタンを無効にする

これはStimulusに隠れているさまざまなヘルパー関数の1つであり、このヘルパー関数を知っておけばさまざまな場面で有用に使えます。

皆さんは変更コールバックをどんなふうに活用していますか？よろしければ私にも教えてください。

関連記事

Stimulusで知っておきたい10の機能（翻訳）

Stimulusコントローラでdisconnectを書く理由（翻訳）