こんにちは、及川です。 今回のテーマはdialog要素です。みなさん、dialog要素はご存知でしょうか?もう現場で使っているでしょうか? dialog要素はいわゆるダイアログボックスを描画するための実装で、HTML要素の中では比較的新しめの要素です。このdialog要素の仕様を理解し、モーダルダイアログコンポーネントとしてどのように実装するかを学習することが本記事のゴールです。 dialog要素 ってなに?dialog要素はダイアログボックスを表現するためのHTML要素です。 cf) <dialog>: ダイアログ要素 – HTML: ハイパーテキストマークアップ言語 | MDN dialog要素は新しめとは言うものの意外と長い歴史をもっていて、2012年あたりから今の形でHTMLの草案に追加されたり削除されたりを繰り返し、全てのモダンブラウザで動くようになったのが2022年のことです。
![モーダルダイアログの未来はdialog要素で幸せになるか](https://cdn-ak-scissors.b.st-hatena.com/image/square/d1a59b0e1491a8ebab3aec25da1b173ce2d12838/height=288;version=1;width=512/https%3A%2F%2Fwp.gaji.jp%2Fwp-content%2Fuploads%2F2023%2F12%2FFrame-2157.png)