
2026/03/08 17:16
Invoker コマンド API
RSS: https://news.ycombinator.com/rss
要約▶
Japanese Translation:
概要:
<button> 要素は、JavaScript のリスナーを使わずに宣言的な属性で UI アクション(ポップオーバーの切り替え、モーダルダイアログの開閉、またはカスタム動作など)を実行できます。commandfor に対象要素の ID を設定し、command に希望するアクション(例:toggle-popover、show-modal、あるいは --rotate-left のようなカスタムコマンド)を指定すると、ボタンが操作されたときにブラウザが自動的にその対象で CommandEvent をディスパッチします。HTMLButtonElement は対応するプロパティを公開しています:.commandForElement が commandfor 属性を反映し、.command が command 属性の値と同じです。使用例としては、宣言的なポップオーバー切り替え(<button commandfor="mypopover" command="toggle-popover">)やダイアログ制御(<button commandfor="mydialog" command="show-modal">、<button commandfor="mydialog" command="close">)があります。カスタムコマンドは対象要素で command イベントをリッスンすることで処理できます(例:画像の回転)。これらの機能は Web プラットフォーム仕様(
HTML#commandevent、HTML#dom-button-commandforelement、HTML#dom-button-command)に定義されており、最新のブラウザでサポートされています。このアプローチはマークアップをクリーンにし、JavaScript のボイラープレートを削減し、デザイナーがインタラクティブな挙動を直接制御できるようにします。
この改訂版の概要はすべての主要ポイントを保持し、元テキスト以外の推測を避け、プロパティ名と仕様参照を明確化しています。
本文
コンセプトと使い方
ウェブ上でよく見られるパターンは、
<button> 要素がページのさまざまな機能(ポップオーバーや <dialog> の開閉、テキスト整形など)を制御することです。従来は、ボタンに JavaScript イベントリスナーを追加し、その中で対象要素の API を呼び出す必要がありました。commandForElement と command 属性は、限定的な一連のアクションを宣言的に実行できるようにしたものです。組み込みコマンドの場合、JavaScript がロードされる前にボタンが操作可能になるため、利点があります。
HTML属性
| 属性 | 説明 |
|---|---|
| をコマンド発火器に変え、指定された ID の要素を制御します。 |
| で特定した対象要素上で実行されるアクションを指定します。 |
インタフェース
– コマンドが発行されたことを通知するイベントオブジェクト。CommandEvent
が参照する要素上で発火します。commandForElement
他のインタフェースへの拡張
インスタンスプロパティ
| プロパティ | 説明 |
|---|---|
| ボタンが制御する要素を取得/設定します(JavaScript で と同等)。 |
| 制御対象要素上で実行されるアクションを取得/設定し、 属性の値と同期します。 |
イベント
イベント –command
が参照する要素上で発火します。<button>
例
宣言的ポップオーバー
<button commandfor="mypopover" command="toggle-popover"> Toggle the popover </button> <div id="mypopover" popover> <button commandfor="mypopover" command="hide-popover">Close</button> Popover content </div>
宣言的ダイアログ
<button commandfor="mydialog" command="show-modal">Show modal dialog</button> <dialog id="mydialog"> <button commandfor="mydialog" command="close">Close</button> Dialog Content </dialog>
カスタムコマンド
<button commandfor="my-img" command="--rotate-left">Rotate left</button> <button commandfor="my-img" command="--rotate-right">Rotate right</button> <img id="my-img" src="photo.jpg" alt="[add appropriate alt text here]" />
const myImg = document.getElementById("my-img"); myImg.addEventListener("command", (event) => { if (event.command === "--rotate-left") { myImg.style.rotate = "-90deg"; } else if (event.command === "--rotate-right") { myImg.style.rotate = "90deg"; } });
スペック
- HTML#commandevent
- HTML#dom-button-commandforelement
- HTML#dom-button-command
ブラウザ互換性
| 機能 | 対応 |
|---|---|
| ✅ |
| ✅ |
| ✅ |
関連項目
プロパティcommand
プロパティcommandForElement
インタフェースCommandEvent