Stimulusのアウトレット（Outlets）を理解しよう【Rails × Stimulus入門】

Stimulusを使ったRailsアプリケーション開発では、「アウトレット（Outlets）」という仕組みを使って、異なるStimulusコントローラー間で簡単に連携を取ることができます。
この記事では、Stimulus公式ドキュメントの「Outlets」の内容を日本語でわかりやすく解説します。

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

Stimulusのアウトレット（Outlets）とは？

Stimulusのアウトレットとは、あるStimulusコントローラーから別のStimulusコントローラーに簡単にアクセスできる仕組みです。
アウトレットを使うことで、複数のコントローラー間での連携やコミュニケーションをシンプルに実現できます。

Stimulusでは、HTMLのdata-[コントローラー名]-outlet属性を使って、アウトレットとなるコントローラーを指定します。

基本的なアウトレットの使い方

Stimulusのアウトレットを使うには、以下のようにHTML要素にdata-[コントローラー名]-outlet属性を指定します。

例えば、messageコントローラーからuserコントローラーにアクセスしたい場合を考えてみましょう。

HTMLの例

<div data-controller="user">
  <span data-user-target="name">山田太郎</span>
</div>

<div data-controller="message" data-message-user-outlet=".user">
  <button data-action="click->message#greet">挨拶する</button>
</div>

上記の例では、messageコントローラーがuserコントローラーをアウトレットとして参照しています。
data-message-user-outlet=".user"という記述は、「messageコントローラーからuserコントローラーにアクセスする」という意味になります。

JavaScriptの例

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

export default class extends Controller {
  static targets = ["name"]

  get userName() {
    return this.nameTarget.textContent
  }
}

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

export default class extends Controller {
  static outlets = ["user"]

  greet() {
    const name = this.userOutlet.userName
    alert(`こんにちは、${name}さん！`)
  }
}

• messageコントローラー内でstatic outlets = ["user"]と指定することで、userコントローラーにアクセスできるようになります。
• JavaScript内では、this.[アウトレット名]Outletというプロパティでアウトレットのコントローラーにアクセスできます。

複数のアウトレットを指定する方法

Stimulusでは、同じ名前のアウトレットを複数指定することも可能です。
複数のアウトレットを指定した場合、JavaScript側ではthis.[アウトレット名]Outlets（複数形）というプロパティで配列として取得できます。

HTMLの例

<div data-controller="user" class="user">
  <span data-user-target="name">山田太郎</span>
</div>

<div data-controller="user" class="user">
  <span data-user-target="name">鈴木花子</span>
</div>

<div data-controller="message" data-message-user-outlet=".user">
  <button data-action="click->message#greetAll">全員に挨拶する</button>
</div>

JavaScriptの例

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

export default class extends Controller {
  static outlets = ["user"]

  greetAll() {
    this.userOutlets.forEach((userController) => {
      const name = userController.userName
      console.log(`こんにちは、${name}さん！`)
    })
  }
}

• 複数のアウトレットを指定した場合は、this.[アウトレット名]Outletsという配列で取得できます。
• 配列を使って、複数のコントローラーをまとめて操作できます。

アウトレットが存在するかどうかを確認する方法

Stimulusでは、アウトレットが存在するかどうかを確認するためのプロパティも用意されています。
アウトレットが存在するかどうかを確認するには、this.has[アウトレット名]Outletというプロパティを使います。

JavaScriptの例

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

export default class extends Controller {
  static outlets = ["user"]

  greet() {
    if (this.hasUserOutlet) {
      const name = this.userOutlet.userName
      alert(`こんにちは、${name}さん！`)
    } else {
      alert("ユーザー情報がありません。")
    }
  }
}

• this.has[アウトレット名]Outletは、アウトレットが存在する場合にtrueを返します。
• アウトレットが存在しない場合にエラーが発生するのを防ぐために、このプロパティを使って存在確認を行うことが推奨されます。

アウトレットのベストプラクティスと注意点

• アウトレットを使うことで、コントローラー間の連携をシンプルに保つことができます。
• アウトレット名は、役割が明確にわかる名前を付けましょう（例：user, modal, formなど）。
• アウトレットが存在しない可能性がある場合は、必ずthis.has[アウトレット名]Outletを使って存在確認を行いましょう。
• アウトレットを多用しすぎると、コントローラー間の依存関係が複雑になるため、適切な範囲で使用しましょう。

まとめ

Stimulusのアウトレットを使うことで、異なるStimulusコントローラー間で簡単に連携を取ることができます。

• HTML側でdata-[コントローラー名]-outlet属性を指定
• JavaScript側でstatic outlets配列にアウトレット名を指定
• 単一のアウトレットはthis.[アウトレット名]Outletで取得
• 複数のアウトレットはthis.[アウトレット名]Outletsで配列として取得
• アウトレットの存在確認はthis.has[アウトレット名]Outletで行う

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