Better Stimulusガイド:アーキテクチャ2: コントローラはコンフィグ可能にしよう（翻訳）

🔗 2.コントローラはコンフィグ可能にしよう

Bad

<!-- index.html -->
<a href="#" data-controller="toggle" data-action="click->toggle#toggle">
  Toggle
</a>

// toggle_controller.js
import { Controller } from "stimulus";

export default class extends Controller {
  toggle(e) {
    e.preventDefault();
    this.element.classList.toggle("active");
  }
}

Good

<!-- index.html -->
<a href="#" data-controller="toggle" data-action="click->toggle#toggle" data-toggle-css-class="active">
  Toggle
</a>

// toggle_controller.js
import { Controller } from "stimulus";

export default class extends Controller {
  toggle(e) {
    e.preventDefault();
    this.element.classList.toggle(this.cssClass);
  }

  get cssClass() {
    return this.data.get("cssClass");
  }
}

そうする理由

依存関係を遅延バインディングすることで、コントローラが複数のユースケースで再利用可能になることが保証されます（上の例として最も単純なのはCSSクラスの値ですが、その他にDOM要素のidやCSSセレクタも考えられます）。

値をコントローラに直書きせずにdata-*のプロパティに移す方が、コントローラの柔軟性が高まります。コントローラの適用範囲が広がってDIが可能になれば、自然と汎用性の高いJavaScriptを書かざるを得なくなり、単一責任の原則が守られます。

Codesandboxのサンプル

関連記事

Better Stimulusガイド:アーキテクチャ（1）アプリケーションコントローラ（翻訳）