Better Stimulusガイド 07: SOLID原則（翻訳）

🔗 単一責任の原則

特に、StimulusJSを初めて自分のアプリケーションに適用するときは、コントローラを「ページコントローラ」スタイルで書きたくなる誘惑に負けて、1個のコントローラ内に無関係な機能が散らばる結果になりがちです。誘惑に打ち勝って、コントローラを再利用可能な形で書くよう心がけましょう。

以下は両者を簡潔な形で並べたものです。

Bad

<!-- page.html -->
<div data-controller="page">
  <form action="/" data-target="page.form"></form>
  <div data-target="page.modal" class="modal"></div>
</div> 

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

export default class extends Controller {
  static targets = ["modal", "form"];

  openModal() {
    this.modalTarget.classList.add("open");
  }

  submitForm() {
    this.formTarget.submit();
  }
}

Good

<!-- page.html -->
<div>
  <form action="/" data-controller="form"></form>
  <div data-controller="modal" class="modal"></div>
</div> 

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

export default class extends Controller {
  open() {
    this.element.classList.add("open");
  }
}

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

export default class extends Controller {
  submit() {
    this.element.submit();
  }
}

そうする理由

本ガイドはまさにこの単一のトピックを皆さんにお伝えするために書かれています。単一責任を守っているクラスやモジュールでは以下のメリットが得られます。

1. 再利用しやすくなる: 上の例のpage_controllerはそのページ（または構造がまったく同じページ）でしか使えませんが、modal_controllerやform_controllerはどんなモーダル要素やフォーム要素でも使えます。
2. 変更しやすくなる: それぞれの責務が実現される箇所は1つずつだけになるので、変更が容易です。新しい機能を複数の場所で実装する必要はなく、新しい振る舞いを置く場所は1箇所だけになります。

参考資料

• Practical Object Oriented Design by Sandi Metz
• Single-responsibility principle - Wikipedia

関連記事

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