buttonタグのcommand属性について学ぶ

こんにちは！Ateam LifeDesign Advent Calendar 2025 13日目を担当します、加能です。

今日は、実務でたまたま見つけた <button> タグの command 属性について、自分なりに調べたのでまとめてみました。

<button> の command 属性って何？

<button>タグの commandfor 属性と、他の要素のid 属性を紐づけて使用することで、
ダイアログモーダル・ポップオーバーの開閉、またはカスタムコマンドとして、任意のアクションを実行できるようにするものです。

例の通り、基本HTMLのみで動作させることができます。
JavaScriptを書かなくて良いのが便利

See the Pen dialogタグ・button command属性 by 加能 (@YukoKano) on CodePen.

2025年12月時点で、使用できる値は次のとおりです。

• show-modal
• close
• request-close
• show-popover
• hide-popover
• toggle-popover
• --から始まる任意のアクション名（例：--rotate-left, --rotate-rightなど）

ブラウザ対応状況（2025年12月時点）

<button> タグの command 属性は、最新バージョンのChromeやFirefoxなどでは対応していますが、Safari iOSでは未対応でした……。

すぐにサイトで使用することは出来なさそうですが、とはいえ、もうすぐ全ブラウザで対応されるのでは？とも思います。

使い方

<dialog> の場合

ここでは show-modal と close を使用して、開閉を行なっています。
JavaScriptの showModal 、 close メソッドが実行されるのと同じようです。

See the Pen dialogタグ・button command属性 by 加能 (@YukoKano) on CodePen.

popover 属性の場合

ここでは toggle-popover を使用して、開閉を行なっています。
JavaScriptの togglePopover メソッドが実行されるのと同じようです。

See the Pen popover属性・button command属性 by 加能 (@YukoKano) on CodePen.

カスタムコマンドの場合

addEventListener を使用し command のイベントを取得することで、任意のコードを実行できます。

See the Pen button command属性 カスタム by 加能 (@YukoKano) on CodePen.

※command イベントを使用しているので、現状Safariでは動かないかと思います……

command 属性の今後

Chromeのデベロッパーブログによると、<details>要素の開閉、 <video> 要素と <audio> 要素の再生コマンドなど、その他ウェブサイトでよく使用される一般的な機能も使えるように、継続的に模索しているとのことでした。

今後、開発者がユーザー補助などたくさんのことを考慮して実装するのではなく、
HTMLの基本として備わっている機能で、簡単に、使用したいアクションを実装していけるようになりそうです。

まとめ

たまたま command 属性を見つけてなんじゃこりゃ？と思っていましたが、かなり便利な機能だな〜と思いました。普及した後の未来が楽しみです。

ちなみに余談ですが、モーダルダイアログは <button formmethod="dialog">、またポップオーバーは <button popovertarget="my-popover" popovertargetaction="toggle"> など、違う属性を使用しても今回の command 属性と同様の挙動をします。

というのも知ると、今後の command 属性の仕様がどこに向かっていくのか、どの属性をどう使い分けるのがいいのか、どういう場合は使用しない方がいいのか、を知っていく、考えていく必要があるのかな、と思います。

参考