こんにちは。野中やすおです。
今回の記事では、フロントエンド開発について必須の概念であるModal、Popup・Popover、Dialogについて再確認とその違いについてまとめてみました。
Modalとは？
modalは、「モードがある状態」を指します。一番上（トップレイヤー）のコンポーネントに「フォーカス」を当てた構造を指すことが多いです。MDN Web DocsのHTMLDialogElement: showModal() メソッドの説明では、最上位レイヤーの中に表示、あるいはダイアログの外の操作はブロックされ、ダイアログの外のコンテンツは不活性にレンダリングという記載が見られます。
showModal() は HTMLDialogElement インターフェイスのメソッドで、ダイアログをモーダルに、見…
Popupとは？
pop upは、英単語の「突然現われる、ポンっと音を立てて表れる」という意味の通り、表示に焦点を当てたコンポーネントや構造を指します。
MDN Web Docsのポップアップでは、ポップアップの説明にダイアログという単語が使われていてわかりづらいですが・・・、つまり画面の表示について汎用的に使うことができます。
また最近出てきたばかりの技術で、JavaSciptの記述が不要でHTMLだけでポップオーバー要素を実装できるpopoverがリリースされています。こちらもかなり弁そうなので機会があれば積極的に利用していきたいですね。
Dialogとは？
dialogという単語は、元々「話し合い、対話」という意味です。ということでMDN Web Docsのdialogに記載があるとおり、ダイアログボックスや、消すことができるアラート、サブウィンドウなどのような対話的コンポーネントや構造に対してDialogを使います。
最後に
Modal、Popup、Dialogの違いについて解説しました！コンポーネント名や変数名を名付ける時や機能を実装する時にこうした違いを把握した上で、実装しないと思わぬバグの温床になるので、（自分にも言い聞かせながら）覚えておきましょう！
