【だいあろぐ】

ダイアログ とは?

💡 「ちょっといいですか?」と割り込んでくる確認ウィンドウ
📌 このページのポイント
マイページ (背景は操作できない) 確認 このファイルを削除しますか? 削除すると元に戻せません。 削除する キャンセル 応答するまで ブロック中
ダイアログが開いている間、背景の画面は操作できない。ユーザーが返答するまで待ち続ける
ひよこ ひよこ

ダイアログって何?「ファイルを削除しますか?」って出てくるやつ?

ペンギン先生 ペンギン先生

そう、まさにそれ!ダイアログは画面の上にポップアップして「ちょっと待って、確認してね」とユーザーに話しかける小さなウィンドウのことだよ。削除確認だけじゃなく、エラー通知や名前の入力を求めるときにも使われるんだ。

ひよこ ひよこ

ダイアログが出てると他のボタンが押せなくなるのはなんで?

ペンギン先生 ペンギン先生

それは「モーダルダイアログ」だからだよ。モーダルって「他の操作をブロックする状態」という意味で、ダイアログに答えるまで後ろの画面を操作させない仕組みになってるんだ。逆に後ろも操作できるタイプは「モードレスダイアログ」って呼ぶよ。

ひよこ ひよこ

じゃあモーダルとダイアログって同じもの?

ペンギン先生 ペンギン先生

実は違うんだ。ダイアログは「UI部品」の名前で、モーダルは「他の操作をブロックする状態」のことを指すよ。モーダルダイアログはその両方の性質を持つもの、という感じ。モーダルじゃないダイアログもあるし、ダイアログじゃないモーダルもあるんだ。

ひよこ ひよこ

キーボードだけでダイアログを操作するとき、Tabキーでフォーカスが外に出てしまうことがあるけど、これって何か問題あるの?

ペンギン先生 ペンギン先生

実は意外と知られていないんだけど、「フォーカストラップ」という仕組みが必要で、ダイアログが開いている間はTabキーによるフォーカス移動をダイアログ内だけに閉じ込めなきゃいけないんだ。これを実装しないと、スクリーンリーダーを使っている視覚障害者がダイアログの外を操作してしまえる状態になって、アクセシビリティ的に大きな問題になる。WAI-ARIAの `aria-modal` 属性と組み合わせた正しい実装は、フロントエンドエンジニアでも完璧にできる人が意外と少ないくらい、細かい注意点が多い話なんだよ。

ペンギン
まとめ:ざっくりこれだけ覚えればOK!
「ダイアログ」って出てきたら「画面に割り込んで何かを確認・入力させる小窓のことだな」と思えればだいたいOK!
📖 おまけ:英語の意味
「Dialog / Dialogue」 = 対話・会話
💬 コンピューターとユーザーが「対話」するための窓、という意味からきているよ
← 用語集にもどる