Stimulusを使ったRailsアプリケーション開発では、「CSSクラス（CSS Classes）」という仕組みを使って、JavaScriptコントローラー内でCSSクラスを簡単に管理できます。
この記事では、Stimulus公式ドキュメントの「CSS Classes」の内容を日本語でわかりやすく解説します。
StimulusのCSSクラス（CSS Classes）とは？
StimulusのCSSクラスとは、HTML要素に適用するCSSクラス名をStimulusコントローラー内で簡単に管理できる仕組みです。
CSSクラスをStimulus側で管理することで、JavaScriptコード内で直接クラス名を記述する必要がなくなり、コードがシンプルで保守しやすくなります。
Stimulusでは、HTMLのdata-[コントローラー名]-[クラス名]-class属性を使って、CSSクラス名を指定します。
基本的なCSSクラスの使い方
StimulusのCSSクラスを使うには、以下のようにHTML要素にdata-[コントローラー名]-[クラス名]-class属性を指定します。
HTMLの例
<div data-controller="toggle"
data-toggle-active-class="highlight">
<button data-action="click->toggle#toggle">切り替え</button>
<p data-toggle-target="content">このテキストがハイライトされます。</p>
</div>上記の例では、toggleコントローラーにactiveという名前のCSSクラスを指定しています。
このCSSクラスの値は「highlight」です。
JavaScriptの例
// toggle_controller.js
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
static classes = ["active"]
static targets = ["content"]
toggle() {
this.contentTarget.classList.toggle(this.activeClass)
}
}- コントローラー内で
static classes配列にCSSクラス名を指定します。 - JavaScript内では、
this.[クラス名]ClassというプロパティでCSSクラス名にアクセスできます。
複数のCSSクラスを指定する方法
Stimulusでは、複数のCSSクラスを指定することも可能です。
複数のCSSクラスを指定する場合は、スペースで区切って指定します。
HTMLの例（複数クラス指定）
<div data-controller="toggle"
data-toggle-active-class="highlight bold-text">
<button data-action="click->toggle#toggle">切り替え</button>
<p data-toggle-target="content">このテキストがハイライトされ、太字になります。</p>
</div>JavaScriptの例（複数クラス指定）
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
static classes = ["active"]
static targets = ["content"]
toggle() {
this.activeClasses.forEach(cssClass => {
this.contentTarget.classList.toggle(cssClass)
})
}
}- 複数のCSSクラスを指定した場合は、
this.[クラス名]Classes（複数形）という配列で取得できます。 - 配列を使って、複数のクラスをまとめて操作できます。
CSSクラスのデフォルト値を指定する方法
Stimulusでは、CSSクラスにデフォルト値を指定することも可能です。
HTML側でクラス名が指定されていない場合に、デフォルト値が使われます。
JavaScriptの例（デフォルト値の指定）
static classes = ["active"]
get activeClass() {
return this.hasActiveClass ? this.activeClassValue : "default-highlight"
}- HTML側でクラス名が指定されていない場合、デフォルト値（ここでは”default-highlight”）が使われます。
CSSクラスが存在するかどうかを確認する方法
Stimulusでは、CSSクラスがHTML側で指定されているかどうかを確認するためのプロパティも用意されています。
CSSクラスが存在するかどうかを確認するには、this.has[クラス名]Classというプロパティを使います。
JavaScriptの例（存在確認）
toggle() {
if (this.hasActiveClass) {
this.contentTarget.classList.toggle(this.activeClass)
} else {
console.log("activeクラスが指定されていません。")
}
}this.has[クラス名]Classは、CSSクラスがHTML側で指定されている場合にtrueを返します。- CSSクラスが存在しない場合にエラーが発生するのを防ぐために、このプロパティを使って存在確認を行うことが推奨されます。
CSSクラスのベストプラクティスと注意点
- CSSクラスをStimulus側で管理することで、JavaScriptコード内で直接クラス名を記述する必要がなくなり、コードがシンプルで保守しやすくなります。
- クラス名は、役割が明確にわかる名前を付けましょう（例：active, hidden, highlightなど）。
- CSSクラスが存在しない可能性がある場合は、必ず
this.has[クラス名]Classを使って存在確認を行いましょう。
まとめ
StimulusのCSSクラスを使うことで、JavaScriptコントローラー内でCSSクラスを簡単に管理できます。
- HTML側で
data-[コントローラー名]-[クラス名]-class属性を指定 - JavaScript側で
static classes配列にクラス名を指定 - 単一のクラスは
this.[クラス名]Classで取得 - 複数のクラスは
this.[クラス名]Classesで配列として取得 - クラスの存在確認は
this.has[クラス名]Classで行う
StimulusのCSSクラスを理解して、Railsアプリケーションのフロントエンド開発をより効率的に進めましょう。
