Modern HTML 1-5｜HTMLだけで作れるインタラクション｜details・dialog・popoverを使う

この回で分かること

Modern HTML 1-4では、フォームだからといって最初からJavaScriptを書くのではなく、type・required・autocomplete・inputmodeなど、HTML標準でできることを先に使う考え方を確認しました。

Modern HTML 1-5では、そのNative HTML Firstの考え方をさらに進めます。

今回のテーマは、

HTMLだけで作れるインタラクション

です。

Webページでは、ユーザーの操作によって表示が変化するUIをたくさん使います。

例えば、

・クリックすると追加情報が開く
・確認画面を前面に表示する
・ボタンからヒントや簡単なメニューを表示する
・必要なときだけ補足情報を表示する

といった操作です。

以前は、このような動作を見ると、

「JavaScriptを書かないと作れない」

と考えやすい場面もありました。

しかし現在のHTMLには、

・details
・summary
・dialog
・popover
・popovertarget
・command
・commandfor

など、ブラウザ標準でインタラクションを作れる仕組みがあります。

今回も、

まずHTMLだけでどこまでできるのか

を確認してから、JavaScriptが必要になる境界まで考えます。

前回のミニチェック｜Modern HTML 1-4 回答・解説

Modern HTML 1-4では、HTML標準を活かしたフォーム設計について学びました。

今回の内容へ進む前に、前回のミニチェック3問を振り返ります。

Q1｜メールアドレスにはどのtypeが候補？

メールアドレスとしての意味をブラウザへ伝えたい場合、

答え：type=”email” が候補です。

type=”email”を使うことで、単なる文字列ではなく「メールアドレスを入力する項目」であることをブラウザへ伝えられます。

ブラウザ標準の入力補助やバリデーションを利用できることもあります。

大切なのは、

見た目が1行入力欄だからtype=”text”を選ぶのではなく、入力される情報の意味からtypeを選ぶこと

です。

Q2｜郵便番号ならtype=”number”？

答え：必ずしもtype=”number”ではありません。

郵便番号は数字で構成されていますが、計算するための「数値」ではありません。

住所を識別するための文字列として扱う情報です。

そのため、

type=”text”

を使いながら、

inputmode=”numeric”

で数字入力用のキーボードを表示しやすくする方法などが候補になります。

数字でできていることと、数値であることは同じではありません。

Q3｜placeholderがあればlabelを省略できる？

答え：いいえ。基本的にlabelは省略しません。

placeholderは入力例や短いヒントを表示するためのものです。

入力を始めると表示されなくなるため、

その入力欄が何のためのものなのか

を常に伝えるlabelの代わりにはなりません。

フォームでは、見た目だけでなく入力項目の意味や使いやすさまで考えることが重要です。

Modern HTML 1-4の3問に共通していたのは、

HTML標準が持っている意味や機能を先に活かす

という考え方です。

この考え方は、今回扱うインタラクションでもそのまま続きます。

details・summaryで開閉UIを作る

まずは、HTMLだけで作れるインタラクションとして分かりやすいdetailsとsummaryから確認します。

detailsは、

必要なときだけ内容を開いて確認できるまとまり

を表します。

summaryは、そのdetailsを開いたり閉じたりするためにユーザーが操作するラベルになります。

例えば、

・FAQの回答
・詳しい説明
・補足情報
・注意事項
・追加の設定内容

などが候補です。

ブラウザ標準で開閉動作が用意されているため、基本的な開閉だけであればJavaScriptを書く必要はありません。

基本形を確認します。

<details>
  <summary>詳しい説明を見る</summary>

  <p>
    ここに補足情報や詳しい説明を表示します。
  </p>
</details>

<details>
  <summary>詳しい説明を見る</summary>

  <p>
    ここに補足情報や詳しい説明を表示します。
  </p>
</details>

最初から開いた状態にもできる

detailsにはopen属性があります。

openを指定すると、ページを表示した時点から内容を開いた状態にできます。

例えば、

「補足情報を最初は開いた状態で見せたいが、必要なら閉じられるようにしたい」

という場合に使えます。

下記で確認します。

<details open>
  <summary>補足情報</summary>

  <p>
    この内容は最初から開いた状態で表示されます。
  </p>
</details>

<details open>
  <summary>補足情報</summary>

  <p>
    この内容は最初から開いた状態で表示されます。
  </p>
</details>

dialogで対話UIを表す

次にdialogです。

dialogは、

ユーザーとの対話を行うためのUI

を表します。

例えば、

・操作前の確認
・重要な通知
・フォーム入力
・設定画面
・ユーザーに対応してほしい内容

などが候補になります。

dialog自体は単なる四角いウィンドウを描くための要素ではありません。

「これはユーザーとの対話を行う領域である」

という意味をHTMLへ持たせます。

モーダルとして表示する

モーダル表示では、dialogが前面へ表示され、ユーザーはそのdialogへの対応へ集中します。

現在のHTMLでは、buttonのcommand属性とcommandfor属性を使って、対応ブラウザではJavaScriptを書かずにモーダルdialogを開閉できます。

次で確認します。

<button
  type="button"
  command="show-modal"
  commandfor="confirm-dialog"
>
  確認画面を開く
</button>

<dialog
  id="confirm-dialog"
  aria-labelledby="confirm-dialog-title"
>
  <h2 id="confirm-dialog-title">操作の確認</h2>

  <p>
    この操作を実行してもよろしいですか？
  </p>

  <button
    type="button"
    command="close"
    commandfor="confirm-dialog"
  >
    閉じる
  </button>
</dialog>

<button
  type="button"
  command="show-modal"
  commandfor="confirm-dialog"
>
  確認画面を開く
</button>

<dialog
  id="confirm-dialog"
  aria-labelledby="confirm-dialog-title"
>
  <h2 id="confirm-dialog-title">操作の確認</h2>

  <p>
    この操作を実行してもよろしいですか？
  </p>

  <button
    type="button"
    command="close"
    commandfor="confirm-dialog"
  >
    閉じる
  </button>
</dialog>

dialogの中で選択して閉じる

dialogの中には通常のHTML要素を配置できます。

例えばボタンを置き、

「キャンセル」

「実行する」

など、ユーザーが次に何をすればよいか分かる操作を用意できます。

dialogは、

前面へ出したいから使う

のではなく、

ユーザーとの対話が必要な内容だから使う

と考えると判断しやすくなります。

popoverで一時的な補助UIを表示する

dialogほど強くユーザーの対応を求めず、

一時的なヒントや補足情報を表示したい

場合にはpopoverが候補になります。

例えば、

・入力方法のヒント
・簡単なメニュー
・補足説明
・追加情報
・一時的な操作パネル

などです。

popover属性を持つ要素と、popovertargetを持つbuttonを関連付けることで、基本的な表示・非表示をHTMLだけで作れます。popoverの基本を確認します。

<button
  type="button"
  popovertarget="help-popover"
>
  ヒントを表示
</button>

<div
  id="help-popover"
  popover
>
  <p>
    ここに補足情報を表示します。
  </p>
</div>

<button
  type="button"
  popovertarget="help-popover"
>
  ヒントを表示
</button>

<div
  id="help-popover"
  popover
>
  <p>
    ここに補足情報を表示します。
  </p>
</div>

なお、popover属性は表示・非表示の仕組みを提供しますが、
それ自体が「メニュー」や「ダイアログ」などの意味を与えるわけではありません。

ヒント、リンク一覧、メニューなど、表示する内容に応じて適切なHTML要素を選びます。
複雑なアプリケーションメニューなどを作る場合には、ARIAによる意味付けやキーボード操作など、追加の設計が必要になる場合があります。

auto popoverは外側の操作でも閉じられる

popover属性を値なしで使用した場合は、既定ではauto popoverとして扱われます。

auto popoverは、表示後にその外側をクリックしたり、Escキーなどのブラウザが提供する閉じる操作を使ったりすることで閉じられます。

このような、

明示的な閉じるボタンを押さなくても簡単に閉じられる動作

をlight dismissと呼びます。

ヒントや簡単なメニューなど、一時的に表示したいUIと相性のよい仕組みです。

表示と非表示を分けることもできる

通常のpopovertargetは表示状態を切り替えます。

必要に応じてpopovertargetactionを使うと、

・show
・hide
・toggle

を明示できます。

popovertargetactionを確認します。

<button
  type="button"
  popovertarget="menu-popover"
  popovertargetaction="show"
>
  メニューを開く
</button>

<div
  id="menu-popover"
  popover
>
  <p>メニュー内容</p>

  <button
    type="button"
    popovertarget="menu-popover"
    popovertargetaction="hide"
  >
    閉じる
  </button>
</div>

<button
  type="button"
  popovertarget="menu-popover"
  popovertargetaction="show"
>
  メニューを開く
</button>

<div
  id="menu-popover"
  popover
>
  <p>メニュー内容</p>

  <button
    type="button"
    popovertarget="menu-popover"
    popovertargetaction="hide"
  >
    閉じる
  </button>
</div>

dialogとpopoverはどう使い分ける？

dialogとpopoverは、どちらもページ上へ一時的にUIを表示できます。

そのため、見た目だけを見ると似ている場合があります。

しかし役割は異なります。

判断の目安は、

dialog：
ユーザーに対して明確な対応を求める対話UI

popover：
ページの流れを大きく止めず、一時的に表示する補助UI

です。

例えば、

「本当に削除しますか？」

という重要な確認ならdialogが候補になります。

一方、

「この項目の意味を詳しく知りたい」

という軽い補足ならpopoverが候補になります。

HTML標準のインタラクションとアクセシビリティ

HTML標準のインタラクションを使う利点は、

「JavaScriptを書かなくて済む」

ことだけではありません。

ブラウザがもともと理解しているHTML要素を正しく使うことで、キーボード操作や支援技術との関係を、ゼロから独自実装するより整理しやすくなります。

例えばsummaryは、ユーザーが操作することで親detailsを開閉できます。

popovertargetでbuttonとpopoverを関連付けると、その関係をブラウザが理解できる仕組みも用意されています。

ただし、

HTML標準の要素を使えば自動的にすべてのアクセシビリティ問題が解決する

という意味ではありません。

ラベル、文章、フォーカス順序、色、エラー表示など、ページ全体としての設計は引き続き必要です。

どこまでHTMLで作り、どこからJavaScriptを使う？

Native HTML Firstは、

JavaScriptを使わないこと

が目的ではありません。

必要になる前にJavaScriptを増やさない、という考え方です。

HTMLだけで対応しやすい例は、

・details・summaryの基本的な開閉
・dialogの基本的な表示
・popoverの基本的な表示
・フォームの標準的な入力や送信
・HTMLがもともと持つ操作

などです。

一方、JavaScriptを追加する場面としては、

・複数のUIの状態を複雑に連動させる
・APIから取得したデータに応じて表示を変える
・ユーザー操作に応じて要素を動的に生成・削除する
・複数コンポーネントで状態を共有する
・細かなタイミング制御が必要になる

などがあります。

つまり、

HTMLかJavaScriptかの二択ではありません。

HTMLで土台を作り、必要な部分だけJavaScriptで拡張する

と考えます。

実務ではどこで使う？

FAQ

よくある質問の回答を必要なときだけ表示する場合、details・summaryを検討できます。

補足説明

記事本文を常に長く表示したくない場合、詳細情報をdetailsへまとめることができます。

削除や重要操作の確認

ユーザーへ確認を求める操作ではdialogを検討できます。

ヒントや簡単なメニュー

ページの流れを大きく止めず、一時的な内容を表示する場合にはpopoverが候補になります。

WordPressやCMS

テーマやプラグインで作られたUIでも、HTML標準で実現できる動作なのかを理解していると、不要なJavaScriptや独自UIを増やす前に構造を判断しやすくなります。

Webアプリケーション

最初はNative HTMLで意味と基本動作を作り、状態管理やAPI連携が必要になった段階でJavaScriptへ広げられます。

迷ったときの確認ポイント

1. このUIは何のために表示するのか
2. 補足内容を開閉するだけならdetailsを使えないか
3. ユーザーに対応を求める対話ならdialogではないか
4. 一時的な補足ならpopoverではないか
5. HTML標準だけで必要な基本動作を作れないか
6. 見た目だけを理由にHTML要素を選んでいないか
7. JavaScriptは本当にこの時点で必要か
8. JavaScriptを使うならHTMLで作った意味や構造を壊していないか

今回できるようになったこと

・details・summaryの役割を整理できる
・HTMLだけで基本的な開閉UIを作れる
・open属性でdetailsの初期状態を指定できる
・dialogを対話UIとして考えられる
・command・commandforを使った宣言的なdialog操作を理解できる
・popoverとpopovertargetの役割を理解できる
・auto popoverのlight dismissを理解できる
・dialogとpopoverを役割から使い分けられる
・HTML標準でできることとJavaScriptを追加する境界を考えられる
・インタラクションでもNative HTML Firstを実践できる

Modern HTML 1-5 ミニチェック

Q1

「よくある質問」の回答を、ユーザーが必要なときだけ開いて確認できるようにします。

基本的な開閉だけであれば、details・dialog・popoverのどれが候補になるでしょうか？

Q2

「このデータを完全に削除します。本当に実行しますか？」

という重要な確認を、ユーザーへ明確に求めたい場面があります。

dialogとpopoverのどちらが候補になるでしょうか？

その理由も考えてみてください。

Q3

HTMLだけでdetails・dialog・popoverを使って基本的なUIを作ることができました。

その後、

「APIから取得した結果に応じて、複数のUIを連動して変更したい」

という要件が追加されました。

この場合もJavaScriptを使わず、必ずHTMLだけで作るべきでしょうか？

まとめ

Modern HTML 1-5では、HTML標準だけでも作れるインタラクションについて確認しました。

今回のポイントは、

・details・summaryで補足情報を開閉できる
・open属性で初期状態を指定できる
・dialogはユーザーとの対話UIを表す
・popoverは一時的な補助UIに使える
・dialogとpopoverは見た目ではなく役割から選ぶ
・HTML標準にはブラウザが理解できる操作の仕組みがある
・JavaScriptを書く前にNative HTMLでできることを確認する
・必要になった部分だけJavaScriptで拡張する

という点です。

インタラクションを見ると、

「JavaScriptでどう作るか？」

と考えたくなる場合があります。

しかし、その前に、

「HTML標準ですでに用意されていないか？」

と確認する。

この順番を持つだけで、HTML・CSS・JavaScriptの役割を整理しやすくなります。

Native HTML FirstはJavaScriptを避ける考え方ではありません。

標準機能を土台として使い、不足する部分だけを補う

という考え方です。

前回を確認する

Modern HTML 1-4では、

HTML標準を活かしたモダンなフォーム設計

について整理しました。

Modern HTML 1-4 | HTML標準を活かしたモダンなフォーム設計

Modern HTML 1-4｜モダンなフォーム設計｜HTML標準で使いやすいフォームを作る

次に読む

次回は、

Modern HTML 1-6｜画像・メディア・レスポンシブHTML

へ進みます。

画像を単にimgで表示するだけではなく、picture・source・srcset・sizesなどを使いながら、

端末や表示条件に合わせて適切な画像やメディアを届けるHTML

を整理します。

ミニチェックの回答は1-6で掲載

Modern HTML 1-6｜画像・メディア・レスポンシブHTML｜img・picture・audio・videoを使いこなす

toshi

フルスタックエンジニア

XFacebookInstagramContact

C型肝炎や感染症の闘病を経て現在通院中
フリーランスとして今日を生きる、それがすべて。
静かな光の中で、歩みを止めずに生きていく。
実験大好きなので色々とやっていきます。