Stimulusでbuttonを再現する #JavaScript

これまでの記事で入門と、よりよい実装方法について説明しました。
* Stimulusをはじめよう
* Stimulusの実装の勘所 - primitive controller -

今回からはより実践的なControllerを作っていきたいと思います。

今回はButtonを再現するコントローラを作ります。

ButtonとButtonの振る舞い

<button type="button">button</button>

なんてことはありません。　普通のbutton要素です。

通常はこのbutton要素を使って、ユーザーアクションを受けつければよいのですが、ごく稀にやむにやまない事情でbutton要素以外をButtonとして使わざるをいけないケースがあったりします。

そんな時、求められる要件は以下の通りになるかと思います。

フォーカス可能である
role=buttonが付与されている
キーボード操作(space, enterでクリック)可能であること

上二つはHTMLだけで完結しますが、最後の部分に関してはbutton要素以外で再現するにはJavaScriptが必要になります。

Buttonの振る舞いを提供するcontroller

非常に簡単です

app.register('button', class extends Controller {
  keyboardClick(event) {
    if ([ "Enter", " " ].includes(event.key)) {
      event.preventDefault()
      event.stopPropagation()

      this.element.click()
    }
  }
})

event.keyをみてenterかスペースだったらイベントの伝播とデフォルトの挙動をとめてclickイベントを発火します。
これでその要素はbuttonのように振る舞うでしょう。

プラスして前述のroleの指定, focus可能があればほぼButtonです。

HTMLはこんな感じで用意すればよいでしょう

<div role="button"
  class="button"
  tabindex="0"
  data-controller="button test"
  data-action="keydown->button#keyboardClick click->test#notify"
>ボタンもどき</div>

See the Pen QIITA_STIMULUS_BUTTON by nazomikan (@nazomikan) on CodePen.

正確にはkeydownではないとか色々あるかもしれませんが、キーボード操作可能な偽Buttonができました。

やむにやまない事情でButtonを別の要素で再現するときはこういった実装が結構役に立ったりします。