StimulusのCSSクラス（CSS Classes）を理解しよう【Rails × Stimulus入門】

2025年4月1日2025年4月5日

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クラスが指定されていません。")
  }
}