Stimulus: Connected・Disconnectedコールバックでtargetsの更新をトラッキングする（翻訳）

Stimulus: Connected・Disconnectedコールバックでtargetsの更新をトラッキングする（翻訳）

前回の記事では、Values APIの変更コールバックについて解説しました。今回は、targetsを対象とするConnectedコールバックとDisconnectedコールバックについて解説します。

参考: Connected and Disconnected Callbacks -- Stimulus Reference

まずはtargetsについて軽くおさらいしておきましょう。
targetsを使うと、重要な要素を名前で参照できるようになります。

HTML側では以下のようにtargetを設定しておきます。

<div data-controller="eggs">
  <h2>Eggs</h2>

  <ul>
    <li data-eggs-target="item">🥚</li>
  </ul>
</div>

これで、Stimulusコントローラ側で以下のようにtargetsを使えます。

// app/javascript/controllers/eggs_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["item"];
  // ...
}

🔗 追加される新しいtargetsをトラッキングする

上述のeggsリストでは卵の追加のみが可能で、それ以外は行えないという前提で進めます。🐣
この場合のHTMLは以下のようになります。

<div data-controller="eggs">
  <h2>Eggs <span data-eggs-target="count"></span></h2>

  <ul data-eggs-target="list">
    <li data-eggs-target="item">🥚</li>
  </ul>

  <button data-action="eggs#add">Add</button>
</div>

先ほどのStimulusコントローラをadd()でさくっと拡張してみましょう。

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["list", "item"];

  add() {
    this.listTarget.insertAdjacentHTML("beforeend", `<li data-eggs-target="item">🥚</li>`);
  }
}

簡単ですね！
それでは、リスト内の卵の個数を表示するコードを書いてみましょう。

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["list", "item", "count"];

  // ...

  itemTargetConnected() {
    this.#updateItemCount();
  }

  itemTargetDisconnected() {
    this.#updateItemCount();
  }

  // private

  #updateItemCount() {
    this.countTarget.textContent = `(${this.itemTargets.length})`;
  }
}

リストに卵を追加するたびに、<span data-eggs-target="count"></span>に表示される卵の個数（targets）が更新されているのがわかります。また、コントローラのライフサイクルメソッド（itemTargetConnectedやitemTargetDisconnected()）によって、ページ読み込みの時点で既に更新されるようになっていることにもご注目ください。

今回も、Stimulusのあまり知られていない、小さくても便利なコントローラを紹介いたしました。よろしければ皆さんのtargetsコールバックの使い方もお知らせください。

関連記事

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

Stimulusを強化するStimulus-FXにデバッグ機能を追加しました（翻訳）

Stimulusで複数のCSSクラスをオンオフする方法（翻訳）