【Stimulus】CSS Classesを試してみた

Stimulusのドキュメントに、CSS Classesという見慣れない手法があったので試してみました。

CSS Classesを使うことでJS側にCSS Classを書くことなく、Classの付け外しなどの操作ができるようになります。

• 設定の外部化
  • CSSクラス名がHTMLで定義されるため、JavaScriptを触らずにスタイルを変更可能
• 可読性の向上
• 保守性の向上
  などが期待できそうです。

CSS Classesを使わない場合の例

JS内でCSS Classを定義して、その値を参照してtoggleなど操作する必要があります。
参照したいClassが増えるごとに定義する必要があり、設定値をJSで持つ必要があるので、保守性もあまり良くなさあそうです。

import { Controller } from "@hotwired/stimulus"

export default class HogeController extends Controller {
  static targets = ['modal']

  static #activeModalClass = 'active'
  static #activeMenuClass = 'active'
  static #activeTabClass = 'active'
  // ...

  toggleModal() {
    this.modalTarget.classList.toggle(HogeController.#activeModalClass)
    document.body.classList.toggle(HogeController.#activeModalBodyClass)
  }

  // ... toggle other css class functions
}

もしくは、それぞれにClass名を直接入れる。

import { Controller } from "@hotwired/stimulus"

export default class HogeController extends Controller {
  static targets = ['modal']

  toggleModal() {
    this.modalTarget.classList.toggle('active')
    document.body.classList.toggle('active')
  }

  // ... toggle other css class functions
}

CSS Classesを使った場合の例

フロント側にCSS Classの値を設定でき、JS側ではその値を参照するだけにできる。

div [
  data-controller='hoge'
  data-hoge-selected-class='active'
]

import { Controller } from "@hotwired/stimulus"

export default class HogeController extends Controller {
  static targets = ['modal']
  static classes = ['selected']

  toggleSelectedClass() {
    this.modalTarget.classList.toggle(this.selectedClass);
  }

  // ... toggle other target functions
}

（おまけ）Propertiesを試してみる

Stimulus Reference

this.has[LogicalName]Class

動的にClassが変わる場合などにおいて、Css Classの存在確認をしてから、this.selectedClassを使うことも可能です。

  // existing code ...
  
  toggleSelectedClass() {
    if (this.hasSelectedClass) {
      this.modalTarget.classList.toggle(this.selectedClass);
    }
  }

  // existing code ...

this.[logicalName]Classes

複数のCss Classがある場合に配列で参照可能です。

div [
  data-controller='hoge'
  data-hoge-selected-class='active bg-yellow-200'
]

①this.selectedClassesにして、console.logを仕込んで確認

配列になってすべて参照できている。

console.log(this.selectedClasses) // ['active', 'bg-yellow-200']

②this.selectedClassに戻して、console.logを仕込んで確認

はじめに定義されているClassだけになっている。

console.log(this.selectedClass) // active

まとめ

CSSクラス名がHTMLで定義するため、JavaScriptを触らずにスタイルを変更可能になるので、設定を外部化でき、保守性の向上に繋がりそうです。

使えそうなシチュエーションがあれば使っていきたいです！