Stimulusのアクション（Actions）を理解しよう【Rails × Stimulus入門】

Stimulusを使ったRailsアプリケーション開発では、「アクション（Actions）」という仕組みを使って、HTML要素のイベント（クリックや入力など）を簡単にJavaScriptのメソッドに関連付けることができます。この記事では、Stimulus公式ドキュメントの「Actions」の内容を日本語でわかりやすく解説します。

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

Stimulusのアクション（Actions）とは？

Stimulusのアクションとは、HTML要素で発生したイベント（クリック、入力、送信など）を、Stimulusコントローラー内の特定のメソッドに関連付ける仕組みです。

Stimulusでは、HTMLのdata-action属性を使って、イベントとコントローラーのメソッドを簡単に結びつけることができます。

基本的なアクションの書き方

Stimulusのアクションは、以下のような書式で記述します。

<div data-controller="example">
  <button data-action="click->example#greet">クリックして挨拶する</button>
</div>

上記の例では、ボタンがクリックされたときに、example_controller.js内のgreet()メソッドが呼ばれます。

コントローラー側のコードは以下のようになります。

import { Controller } from "@hotwired/stimulus"

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

アクションの書式の詳細

Stimulusのアクションの書式は、以下のようになっています。

イベント名->コントローラー名#メソッド名

• イベント名：click、submit、input、changeなどのDOMイベント名
• コントローラー名：Stimulusコントローラーの名前（data-controllerで指定した名前）
• メソッド名：コントローラー内で定義したメソッド名

複数のアクションを指定する方法

1つの要素に複数のアクションを指定することも可能です。
複数のアクションを指定する場合は、スペースで区切ります。

<div data-controller="example">
  <input type="text"
         data-action="focus->example#highlight blur->example#unhighlight">
</div>

上記の例では、input要素がフォーカスされたときにhighlight()メソッドが、フォーカスが外れたときにunhighlight()メソッドが呼ばれます。

イベント名を省略する方法（デフォルトイベント）

Stimulusでは、イベント名を省略すると、要素の種類に応じたデフォルトのイベントが使われます。

例えば、以下のように書くことができます。

<button data-action="example#greet">クリックして挨拶する</button>

<!-- フォーム要素のデフォルトイベントはsubmit -->
<form data-action="example#submitForm">
  <input type="text">
  <button type="submit">送信</button>
</form>

• ボタン要素の場合、デフォルトイベントはclickです。
• フォーム要素の場合、デフォルトイベントはsubmitです。

イベントオブジェクトを受け取る方法

Stimulusのアクションメソッドでは、イベントオブジェクトを引数として受け取ることができます。

<div data-controller="example">
  <button data-action="click->example#greet">クリックして挨拶する</button>
</div>

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  greet(event) {
    console.log("クリックされた要素:", event.currentTarget)
    event.currentTarget.textContent = "クリックされました！"
  }
}

• イベントオブジェクトを使って、イベントが発生した要素を取得したり、イベントのデフォルト動作をキャンセルしたりできます。

イベントの伝播（バブリング）を制御する方法

Stimulusでは、イベントの伝播（バブリング）を制御するための修飾子（modifier）を使うことができます。

• prevent：イベントのデフォルト動作をキャンセルする（event.preventDefault()）
• stop：イベントの伝播を停止する（event.stopPropagation()）

<form data-controller="example" data-action="submit->example#submitForm">
  <input type="text">
  <button type="submit" data-action="click->example#confirmSubmit prevent">送信</button>
</form>

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  confirmSubmit(event) {
    if (!confirm("本当に送信しますか？")) {
      event.preventDefault()
    }
  }

  submitForm(event) {
    console.log("フォームが送信されました。")
  }
}

• 上記の例では、ボタンがクリックされたときに確認ダイアログを表示し、キャンセルされた場合はフォームの送信を防ぎます。

アクションのベストプラクティスと注意点

• アクションのメソッド名は、イベントの内容がわかりやすい名前にしましょう。
• 1つのメソッドに複数の処理を詰め込みすぎず、シンプルで再利用可能なメソッドを作成しましょう。
• イベントの伝播やデフォルト動作を制御する場合は、修飾子（prevent、stop）を活用しましょう。

まとめ

Stimulusのアクションを使うことで、HTML要素のイベントとJavaScriptのメソッドを簡単に関連付けることができます。

• 基本書式：data-action="イベント名->コントローラー名#メソッド名"
• デフォルトイベントを活用して、イベント名を省略可能
• イベントオブジェクトを受け取って、柔軟な処理が可能
• 修飾子（prevent、stop）を使ってイベントの伝播を制御可能

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