はじめに
window.alert()やwindow.confirm()など、ブラウザ組み込みのモーダルは使用を避けるべきです。
意外と知られてなさそうだったので共有させていただきます。
なぜなのか
機能しない可能性が高いためです。
モーダルはユーザの操作を強制的にブロックします。このようにユーザの意思に反して特定の操作を行わせるのはUX上よくないとされています。
これはブラウザに限ったことではなく、Androidの標準デザインシステムであるMaterial Designのガイドラインにおいても、モーダル(ダイアログ)は優先度の高いメッセージにのみ使用すべきと規定されています。
またwindow.alert()はいわゆる「無限アラート」などのいたずらにも容易に使用できてしまいます。
このため、現代のほとんどのブラウザでは複数回モーダルダイアログが表示された場合、無視できるようにするオプションを挿入するようになっています。
1回目
2回目以降
ここでオプションにチェックを入れてしまうと、当該ドメインのサイトではwindow.alert()などのモーダルがすべて表示されなくなり、強制キャンセル扱いになります。 window.confirm()の場合は即falseが返るようになるため、ユーザからすると何回やっても処理が進まない、という状態になります。
厄介なのはユーザからすると「次から確認をスキップして進めるんだな」というように見える点です。
実際はその逆で、すべてキャンセルされてしまいます。
どうすればよいか
まずはそのモーダルが本当に必要なのか考えます。
参考→https://alistapart.com/article/neveruseawarning/
そのうえで必要であると判断した場合、取りうる道は主に2種類あります。
いずれもブラウザによるダイアログではなく、HTML要素としてレンダリングする方法です。
<dialog>要素を使う
HTMLではダイアログ用にdialog要素が定義されているため、これを使うことでダイアログが表示できます。
参考→https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Elements/dialog
表示にはJavaScriptを使用し、モーダル(ユーザ操作ブロック)と非モーダル(ブロックしない)の両方の用途で使用できます。
HTMLDialogElement.showModal(): モーダル表示HTMLDialogElement.show(): 非モーダル表示
ただし比較的新しい要素のため、古いブラウザでは使用できません。ブラウザ互換性が重要である場合は採用できない可能性があります。
IE11は非対応で、Safariも15.4以上を必要とします。
CSSで自前作成
dialog要素が使えない場合には、CSSのposition: absoluteやposition: fixedを使用して要素をオーバーレイ表示させます。
ただし背面の要素を操作できなくするには
- ダイアログ外をクリック不可にする
- スクロールの無効化
- タブ等によるフォーカス移動の無効化
などを実装する必要があり、実装工数が大きいです。
コンポーネントライブラリを利用している場合は実装済みのものを利用できることもあります。
ex) Chakra UIのDialogコンポーネント
おわりに
window.alert()などのモーダルは古くから使われてきたAPIですが、現在においては無効化される可能性が高いため、使用を避けましょう。
UX上悪影響を与えるものでもあるため、真にモーダルが必要なのかを見極めたうえで、それでも必要性が認められる場合にのみ、適切な実装を選択するようにしましょう。
