これはTSUKURUBA Advent Calendar 2022 の3日目の記事です

Zennのみなさん、こんにちは！
株式会社TSUKURUBAで、Web フロントエンドエンジニアをしているkiiです
新卒で入社してもう１年半ほど経ちました。時間の進みを感じます🍂

※この記事は、Zennで書いた記事の転載記事です✍

、事例ないので、Sample code用意した割に、あまり読まれていなくて悲しかったので...

はじめに

2022年3月、Safari(15.4)にも待望の<dialog>タグがやってきて、
モダンブラウザでは、Web標準の技術を用いて、簡単に良いモーダルUIを作れるようになる！と期待が高まったんじゃないでしょうか？

ただ現実的には、プロダクトやサイトの対応ブラウザバージョンを考慮すると、利用を躊躇してしまい、頑張ってJavaScriptを書いたり、既存のモーダルライブラリを利用して対応することも多いはず...😢

私も2022年5月に、Web Appのモーダルを新しく作ることになったのですが、
複数の実装方法で比較検討してみた所、
<dialog>タグを利用して、マルチプラットフォーム対応で良い感じのモーダルUIが作れそうだと分かりました💡
実際にプロダクト開発に利用した所上手くいったので、その知見を共有したいと思います📝

🚩 記事の目的

<dialog>タグを利用した良い感じのモーダルUIが作れる🧩

良い感じのモーダルUI

マルチプラットフォーム対応📱🖥
モーダルを操作している時に、背景がスクロールしない🖱
各インターフェースで操作しやすい⌨️

スコープ外のこと

モーダルUI実装の方法比較検討
- 対応ブラウザや既存システムの性質によりけりなので、今回は省きます
- Scrapboxに軽く書いているので参考までにどうぞ。この記事の反応良ければ頑張ってまとめるかも...
dialogタグの細かい利用方法
- わかりやすい神記事があるので、そちら見てください(自分も熟読しました)
- Building a dialog component

🏃‍♂️ 3行まとめ

マルチプラットフォーム用に、dialog-polyfillを利用🤝
後ろがスクロールしないようにするために、body-scroll-lockを利用🖱👆🏽
Code Exampleを用意したので、forkして遊んでみてください⚽️

📄今回、作りたいモーダルUIの要件定義

はじめに、今回作りたいモーダルUIの要件を整理します。

マルチプラットフォーム対応📱🖥

自身が提供するサービスの対応ブラウザ全てで、機能的、視覚的に問題なく利用出来る。
自身が提供するサービスの対応ブラウザは、各社それぞれ基準があると思います。
2022年現在だと、dialog要素に対応していないブラウザ(Safari iOS ver15.3以前など)を使っているユーザーが一定数いるので、dialog要素単体で実装することは難しそうです😢