Tech Racho エンジニアの「?」を「!」に。
  • Ruby / Rails以外の開発一般

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

概要

原著者の許諾を得て翻訳・公開いたします。

hotwired/stimulus - GitHub

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”関係を持つ)」なのかを自問自答しましょう。

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

参考資料

Codesandboxのサンプル

関連記事

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


CONTACT

TechRachoでは、パートナーシップをご検討いただける方からの
ご連絡をお待ちしております。ぜひお気軽にご意見・ご相談ください。