JSなしでdialogタグを制御できるbuttonタグのcommand属性を試してみた

マークアップ フロントエンド UXデザイン HTML

こんにちは。エキサイトでデザイナーをしている齋藤です。

今回は、buttonタグの新しい属性であるcommand属性を使用して、JSなしでdialogタグを制御する方法をご紹介します。

なお、本稿の内容は2025年6月9日時点のHTML Living Standardと各ブラウザの対応状況に準じています。

command属性とは

command属性はbuttonタグの新しい属性の一つで、HTML Living Standardでも追加済みとなっています。

html.spec.whatwg.org

dialogタグ等のJavaScriptのメソッドに対応した値を指定することで、JSと同等なアクションを呼び出すことが可能です。

また、要素の紐づけを指定するcommandfor属性とセットでの使用が想定されています。

command属性とcommandfor属性は、Chrome135とEdge 135のみが正式対応となっており、他のブラウザはベータ版のみ対応か未対応となっていますので、ご注意ください。

実現したいこと

実現したいことを整理します。

以下のように、dialogタグを使用してダイアログ要素のボタンを通じた表示/非表示を実現したいです。

See the Pen JSを使用してdialogタグを制御する by AyumuSaito (@ayumusaito-excite) on CodePen. 

const dialog = document.querySelector("#dialog")
const showButton = document.querySelector("#show-button")
const closeButton = document.querySelector("#close-button")

showButton.addEventListener("click", () => {
  dialog.showModal();
});
  
closeButton.addEventListener("click", () => {
  dialog.close();
});

このように、従来の方法ではJSの記述が必要です。

Alpine.jsを使用するとHTMLに処理の記述を寄せることもできます。詳しくは次の記事をご覧ください。

tech.excite.co.jp

command属性を使用してダイアログ要素を制御してみる

command属性とcommandfor属性を使用して、ダイアログ要素を制御してみます。

冒頭でご説明した通り、command属性はdialogタグ等のJavaScriptのメソッドに対応した値を指定することで、JSと同等なアクションを呼び出すことが可能です。

例えば、以下の値が用意されています。

値 対応するメソッド
show-modal .showModal()
close .close()
request-close .requestClose()

command属性に指定したアクションの対象となる要素の指定には、commandfor属性を使用します。

したがって、次の通り指定した場合は、「id属性の値がdialogの要素に対して.showModal()を実行する」といった宣言になります。

<button command="show-modal" commandfor="dialog" ...>...</button>

実現したいことの項で示した例と同じことを、command属性とcommandfor属性を使用して実装すると以下のようになります。

See the Pen commandとcommandforを使用してdialogタグを制御する by AyumuSaito (@ayumusaito-excite) on CodePen.

まとめ

今回は、buttonタグの新しい属性であるcommand属性を使用して、JSなしでdialogタグを制御する方法をご紹介しました。

command属性によりJSを記述することなくdialogタグが制御できるようになるため、ダイアログUIの実装がより簡単にシンプルになるのではないでしょうか。

実運用で超えるべき課題や他のブラウザの対応状況を注視していきたいと思います。

本稿の情報がマークアップされる方の一助となれば幸いです。ご精読ありがとうございました。

参考文献