スマホ開発しかしてなかった初心者が良いなと思った<dialog>

はじめに

最近少し業務でも使うかもしれないと思い、HTML,CSS,JavaScriptを勉強していました。
自分は今までアプリ開発しか基本したことがなく、むか〜し1年目の頃にJavaの研修を受けて、
JavaScriptもよく分からないまま,「Angular」FWを使って少しだけ改修作業をやったレベルでしたので、
サンプルアプリを作りながら、まずベタ書きでWeb開発を１から勉強したのですが、その時にスマホ開発でも標準UIでもあったら楽だな〜と思ったので（知らないだけかもしれない）息抜きついでに書いていきます。

<dialog>タグ

自分はMDNのドキュメントを使ってインプットしていったんですが、ダイアログを実装する時に見つけたのがこの<dialog>タグ。
いや、普段フロントエンジニアで活躍されている方、FWを使ってる方からすると全然使わないのかもしれないんですが、
自分的には結構楽で良いなーって思いました。

何が良いと思った？

作り込めば大変なのかもしれないけど、わかりやすく簡単なところ。

そもそもHTMLはマークアップ言語で初心者でも簡単だというような内容の記事が多く、こちらのダイアログ実装もシンプルなものであればホント簡単でした。

(別にフロントの開発が簡単なんて思ってはいないですし、自由で歴史がある分何通りもやり方があり、今回は参考書を買ったわけではなかったのでモダンな実装の仕方、ベストな回答が探しにくいという難しさがありました)。

最新の2020年とかの記事がなかったのでそこまで使用頻度が高くないのかもしれないのですが、
HTML5.2から登場したようですね。

hoge.html

<dialog>
  <h1>ネイティブのダイアログ ボックス</h1>
</dialog>

hoge.js

const modal = document.querySelector('dialog');
 
// モーダルを表示する (open属性を与える)
modal.showModal();
 
// モーダルを隠す (open属性を削除する)
modal.close();

はい！

これで終わりです。

もちろんの中にテキストボックスだったりボタンも置いて簡単にカスタマイズできます。

ちなみに自分とかだとこんな感じ

調べながらやりつつも、1hかからないくらいで実装自体はできました。
(閉じるボタンの位置変だな...)

スマホでダイアログ実装だとアラートレベルなら良いんです。(iOSにもUIAlertというものがあります)

ただ、なかなかエラー表示くらいなら良いものの、大体デザイナーさんの用意したUIデザインに沿ったダイアログを実装することが多くい気がします。

自作でカスタムView作るのめんどいし、ライブラリ使うのもデザイナーさんからの要望にあったものを探すのも意外と大変だしと、なかなか前向きに自分はなれないんですが標準で

まとめ

誰に向けてというわけではないんですが、他の分野の勉強するのも楽しいな〜と思ったのでまとめました。
あとは、いやいやこんなの使わないよとか自分のためにもご指摘があったら受けたいのもあり。

うまくまとまらないですが、カスタマイズしやすい標準ダイアログこい！

参考

• HTML 5.2で新しく登場した要素で、ダイアログ ボックスを実装する方法と注意点