Stimulusを使ったRailsアプリケーション開発では、「ターゲット（Targets）」という仕組みを使って、HTML要素を簡単にJavaScriptから操作できます。
この記事では、Stimulus公式ドキュメントの「Targets」の内容を日本語でわかりやすく解説します。
Stimulusのターゲット（Targets）とは？
Stimulusのターゲットとは、Stimulusコントローラー内から簡単にアクセスできるように指定したHTML要素のことです。
ターゲットを使うことで、JavaScriptコード内でDOM要素を簡単に取得・操作できます。
Stimulusでは、HTMLのdata-[コントローラー名]-target属性を使って、ターゲットとなる要素を指定します。
基本的なターゲットの使い方
Stimulusのターゲットを使うには、以下のようにHTML要素にdata-[コントローラー名]-target属性を指定します。
<div data-controller="example">
<span data-example-target="output">ここにメッセージが表示されます。</span>
<button data-action="click->example#greet">クリックして挨拶する</button>
</div>上記の例では、exampleコントローラーにoutputという名前のターゲットを指定しています。
コントローラー側のコードは以下のようになります。
// app/javascript/controllers/example_controller.js
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
static targets = ["output"]
greet() {
this.outputTarget.textContent = "こんにちは、Stimulusです！"
}
}
- コントローラー内で
static targets配列にターゲット名を指定します。 - ターゲット名は、HTML側で指定した
data-example-target属性の値と一致させます。 - JavaScript内では、
this.[ターゲット名]Targetというプロパティでターゲット要素にアクセスできます。
複数のターゲット要素を指定する方法
Stimulusでは、同じ名前のターゲットを複数指定することも可能です。
複数のターゲットを指定した場合、JavaScript側ではthis.[ターゲット名]Targets（複数形）というプロパティで配列として取得できます。
<div data-controller="example">
<ul>
<li data-example-target="item">アイテム1</li>
<li data-example-target="item">アイテム2</li>
<li data-example-target="item">アイテム3</li>
</ul>
<button data-action="click->example#highlightAll">すべてハイライトする</button>
</div>コントローラー側のコードは以下のようになります。
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
static targets = ["item"]
highlightAll() {
this.itemTargets.forEach((element) => {
element.style.backgroundColor = "yellow"
})
}
}- 複数のターゲットを指定した場合は、
this.[ターゲット名]Targetsという配列で取得できます。 - 配列を使って、複数の要素をまとめて操作できます。
ターゲットが存在するかどうかを確認する方法
Stimulusでは、ターゲットが存在するかどうかを確認するためのプロパティも用意されています。
ターゲットが存在するかどうかを確認するには、this.has[ターゲット名]Targetというプロパティを使います。
<div data-controller="example">
<!-- outputターゲットが存在しない場合もある -->
<span data-example-target="output">ここにメッセージが表示されます。</span>
<button data-action="click->example#greet">クリックして挨拶する</button>
</div>コントローラー側のコードは以下のようになります。
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
static targets = ["output"]
greet() {
if (this.hasOutputTarget) {
this.outputTarget.textContent = "こんにちは、Stimulusです！"
} else {
console.log("outputターゲットが存在しません。")
}
}
}this.has[ターゲット名]Targetは、ターゲットが存在する場合にtrueを返します。- ターゲットが存在しない場合にエラーが発生するのを防ぐために、このプロパティを使って存在確認を行うことが推奨されます。
ターゲットのベストプラクティスと注意点
- ターゲット名は、役割が明確にわかる名前を付けましょう（例：output, item, inputなど）。
- ターゲットを使うことで、JavaScriptコード内で直接DOM操作を行う必要がなくなり、コードがシンプルで保守しやすくなります。
- ターゲットが存在しない可能性がある場合は、必ず
this.has[ターゲット名]Targetを使って存在確認を行いましょう。
まとめ
Stimulusのターゲットを使うことで、HTML要素を簡単にJavaScriptから取得・操作できます。
- HTML側で
data-[コントローラー名]-target属性を指定 - JavaScript側で
static targets配列にターゲット名を指定 - 単一のターゲットは
this.[ターゲット名]Targetで取得 - 複数のターゲットは
this.[ターゲット名]Targetsで配列として取得 - ターゲットの存在確認は
this.has[ターゲット名]Targetで行う
Stimulusのターゲットを理解して、Railsアプリケーションのフロントエンド開発をより効率的に進めましょう。
