Better Stimulus: 独自の見解に基づくStimulusJSのベストプラクティス集（翻訳）
StimulusJSは、Basecampが開発したつつましいJavaScriptフレームワークです。StimulusJSはBasecampやHEYなどの動力源となっており、Rails開発者ならStimulusJSを選ぶのが自然でしょう。しかしStimulusJSはRailsに限らず、サーバーサイドで生成されるHTMLにJavaScriptを振りかけるあらゆるコードベースにも適合します。
惜しいことに、公式ドキュメントには明確なガイドラインやベストプラクティスの例が掲載されていません。そこで本ガイドでは、Stimulusプログラミングが初めての方および中級者向けのアドバイスを紹介します。
本ガイドには以下のようなトピックが含まれます。
| トピック | サブトピック |
|---|---|
| アーキテクチャ | 1. アプリケーションコントローラ（本記事） 2. コントローラはコンフィグ可能にしよう 3. ミックスイン 4. 名前空間化された属性 |
| DOM操作 | DOMステートを<template>でリストアする |
| エラーハンドリング | グローバルなエラーハンドラ |
| イベント | HTMLにグローバルなイベントを登録する |
| ライブラリとの統合 | セットアップや終了にはライフサイクルイベントを使おう |
| 双方向通信 | 1. コントローラとDOMのマッパー 2. コントローラ間の通信にコールバックを使う |
| SOLID原則 | 単一責任原則 |
| rails-ujsと併用する場合 | フォームをコードで送信する |
| Turbolinksと併用する場合 | グローバルなteardown |
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"関係を持つ）」なのかを自問自答しましょう。
それがロールならミックスインを使い、属性やプロパティならコンポジションを使いましょう。
概要
原著者の許諾を得て翻訳・公開いたします。