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

Better Stimulus: 独自の見解に基づくStimulusJSのベストプラクティス集（翻訳）

StimulusJSは、Basecampが開発したつつましいJavaScriptフレームワークです。StimulusJSはBasecampやHEYなどの動力源となっており、Rails開発者ならStimulusJSを選ぶのが自然でしょう。しかしStimulusJSはRailsに限らず、サーバーサイドで生成されるHTMLにJavaScriptを振りかけるあらゆるコードベースにも適合します。

惜しいことに、公式ドキュメントには明確なガイドラインやベストプラクティスの例が掲載されていません。そこで本ガイドでは、Stimulusプログラミングが初めての方および中級者向けのアドバイスを紹介します。

本ガイドには以下のようなトピックが含まれます。

1: アプリケーションコントローラ

Good

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

export default class extends Controller {
  sayHi () {
    console.log("Hello from the Application controller.");
  }
}

// custom_controller.js
import ApplicationController from "./application_controller";

export default class extends ApplicationController {
  sayHi () {
    super.sayHi();
    console.log("Hello from a Custom controller");
  }
}

そうする理由

JavaScriptのクラス継承（extends）を使えば、すべてのコントローラの基礎となる「アプリケーションコントローラ」を設定できます。これは定型文を減らすだけでなく、アプリケーション全体のライフサイクルコールバックメソッドを設定するのにも便利です。

注意

継承は、必ずしも動作を共有するためのよい解決策とは限りません。

ApplicationControllerを太らせてしまう前に、今自分が実装しようとしているものが「特殊化」ではなく、「ロール（role）（自分のクラスと"act as a"関係を持つ）」なのか、それとも「属性やプロパティ（自分のクラスと"has a"関係を持つ）」なのかを自問自答しましょう。

それがロールならミックスインを使い、属性やプロパティならコンポジションを使いましょう。

参考資料

• Useful Patterns - StimulusReflex

Codesandboxのサンプル

関連記事

Rails 7: importmap-railsとjsbundling-railsでのStimulusの扱いの違い