Stimulus ControllerはCSS classを変更するべきか？

Stimulus Controllerは原則としてステートをDOMに持たせます。しかしDOM要素は属性だけでも数種類あります。どれを選択すれば良いかは容易ではありません

• data-*-values: これはStimulusが管理するValuesステートです。*ValueChangedコールバックが自動的に呼ばれます
  • 単なるdata-*属性にステートを保持することも可能ですが、せっかくならdata-*-valuesを使った方が良いと私は思っています
• aria-*: これはどっちみちアクセシビリティの観点から必要とされているものです。またウィジェットごとに規格で決められているため、使い方に曖昧さがありません。名前の付け方も規格がありますので、悩みません
• CSS class: スタイルシートを定義すれば、CSS classの変更はすぐに表示に反映されます。ただしTailwindを使っている場合は名前に意味がありません。またBEMの場合は、慣れていないと名前の付け方に悩みます

それぞれメリットとデメリットがありますが、私の使用基準は下記のようになっています

• ステートを変えるアクションが複数ある場合、あるいはステートの変更が複数のHTML要素に影響を与える場合はStimulus Valuesをよく使います
  • valueの変更を画面に反映させる方法として、私は下記のいずれかを使います
    • CSS擬似セレクタを使ってvalueの値を読み取り、画面の表示を変更します。画面表示のみ変更するときはこちらを使います
    • *ValueChangedコールバックを使用し、aria属性を変更します。そいてaria属性に対するCSS擬似セレクタを使ってaria属性を読み取り、画面の表示を変更します。アクセシビリティのためにaria属性の変更も必須なケースはこちらを選択します
• ステートの扱い方がよりシンプルな場合で、かつ適切なaria属性があれば、valueステートを省略してアクションの中で直接aria属性を書き換えます
• ステートがシンプルで、かつ適切なaria属性がない場合は２つの選択肢があります
  • Stimulus Valuesステートを使い、アクションの中でvaluesを変更します
    • CSS擬似セレクタを使ってvalueの値を読み取り、画面の表示を変更します
  • 直接CSS classを変更します
    • BEMを使っている場合は良いと思いますが、Tailwindを使うとCSSクラスが多くなり、辛くなってきます。Tailwind CSSを使用している場合はStimulus Valuesステートを使いたくなることが多いです

まとめ

Stimulus Controllerは原則としてステートをDOMに持たせるのですが、かなり自由度があります。またTailwind CSSを使うか、BEMを使うかによって扱うCSSクラスの数が劇的に変わりますので、そこも判断に影響します。

その中でも私の場合は上記のルールにしたがって、どのようなDOM要素にステートを持たせるかを判断しています。私が個人的にTailwind CSSを多く使っていることにも影響されていると思いますが、概ねCSS classを直接書き換えずに、data-*-valuesのValuesステートを使う方向に持っていきます。