Stimulusのコントローラー（Controllers）を理解しよう【Rails × Stimulus入門】

Stimulusを使ったRailsアプリケーション開発では、「コントローラー（Controllers）」という仕組みを使って、HTML要素の振る舞いを簡単に管理できます。
この記事では、Stimulus公式ドキュメントの「Controllers」の内容を日本語でわかりやすく解説します。

公式ドキュメント（英語）

Stimulusのコントローラー（Controllers）とは？

Stimulusのコントローラーとは、HTML要素に対してJavaScriptの振る舞いを追加するための仕組みです。
Stimulusでは、HTML要素にdata-controller属性を指定することで、その要素をStimulusコントローラーに関連付けます。

コントローラーを使うことで、HTMLとJavaScriptの関係を明確にし、コードをシンプルで保守しやすく保つことができます。

基本的なコントローラーの使い方

Stimulusのコントローラーを使うには、以下のようにHTML要素にdata-controller属性を指定します。

HTMLの例

<div data-controller="hello">
  <button data-action="click->hello#greet">挨拶する</button>
</div>

上記の例では、helloという名前のStimulusコントローラーを指定しています。

JavaScriptの例（コントローラーの定義）

Stimulusコントローラーは、JavaScriptクラスとして定義します。

// hello_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  greet() {
    alert("こんにちは、Stimulus！")
  }
}

• Stimulusコントローラーは、@hotwired/stimulusからControllerクラスを継承して作成します。
• HTML側で指定したアクション（click->hello#greet）に対応するメソッド（greet）を定義します。

コントローラーのプロパティとメソッド

Stimulusコントローラーには、便利なプロパティやメソッドが用意されています。

主なプロパティ

• this.element：コントローラーが関連付けられたHTML要素を取得
• this.application：Stimulusアプリケーションのインスタンスを取得
• this.scope：コントローラーのスコープ情報を取得（コントローラー名や識別子など）

JavaScriptの例（プロパティの利用）

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  connect() {
    console.log("関連付けられた要素:", this.element)
    console.log("コントローラー名:", this.scope.identifier)
  }
}

主なメソッド

• this.dispatch(eventName, { detail: {} })：カスタムイベントを発火する
• this.application.getControllerForElementAndIdentifier(element, identifier)：指定した要素と識別子からコントローラーを取得する

JavaScriptの例（カスタムイベントの発火）

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  greet() {
    this.dispatch("greeted", { detail: { message: "こんにちは！" } })
  }
}

コントローラーのベストプラクティスと注意点

• コントローラーは、HTML要素の振る舞いを管理するために使います。役割ごとに小さく分割しましょう。
• コントローラー名は、役割が明確にわかる名前を付けましょう（例：hello, modal, dropdownなど）。
• コントローラー間の連携には、アウトレット（Outlets）やカスタムイベントを活用しましょう。

まとめ

Stimulusのコントローラーを使うことで、HTML要素の振る舞いを簡単に管理できます。

• HTML側でdata-controller属性を指定してコントローラーを関連付ける
• JavaScript側でControllerクラスを継承してコントローラーを定義
• 便利なプロパティ（this.element、this.scope）やメソッド（this.dispatch()）を活用

Stimulusのコントローラーを理解して、Railsアプリケーションのフロントエンド開発をより効率的に進めましょう。