UIコンポートネント作成の方法は今や様々な方法がありますが、JSを減らす、ないしは無くすことができればそれに越したことはありません。
ネイティブHTMLを活用することで、JSやCSSへの依存をある程度減らすことができるかもしれません。Cool native HTML elements you should already be usingを読んでとても勉強になったので、備忘録として残したいと思います。
ネイティブHTMLを使って嬉しいのか
以下のような利点があると思っています。
- JSの依存関係を考えなくても良くなる場合がある
- ブラウザネイティブなため、互換性の心配がUIライブラリと比較して小さい
- ネイティブHTMLはアクセシビリティへの配慮ができているので、ネイティブHTMLをうまく活用できるとアクセシビリティへの対策もできる
モーダルウィンド
過去にまとめたことがあるので、よければ別の記事（HTML】便利そうな dialog 使ってみた感想）を参照してください。
-
dialog要素にによりキーボードで操作可能 - モーダルを開くとフォーカスが自動的にモーダルの中に移動
- ESCキーでモーダルを閉じる
などが自動で実装されており大変便利です。
アコーディオン
<details>
<summary>クリックして開く見出し</summary>
ここに隠されたコンテンツが入ります
</details>
details要素で追加の詳細情報を確認できるようになります。
ただ、details要素には必ずsummary要素を含まなければならず、詳細情報が非表示になった状態では、summary要素の内容のみが表示されます。
メモ
-
details要素はインタラクティブな要素の一つでもあるので、デフォルトでキーボードによるフォーカスが可能 -
details要素にはopen属性をつけることができるので、デフォルトで開いた状態も作れる -
name属性を活用することで排他的アコーディオンになる - アコーディオンのネストも可能
デモ
See the Pen native html accordion by 小林誠 (@knicisow-the-vuer) on CodePen.
スライダー
input 要素の type='range' を活用すると実装できます。
スライダーをつまみで調整できるインターフェースなため、大まかな値を直感的に操作しやすい反面、細かい値の微調整には向きません。
ちなみに ARIAロールは slider です
メモリ付き
範囲入力にdatalist要素を使用することで、書く値のチェックマークを表示できます。
以下のように実装します。
<input type="range" min="1" max="5" list="steps" />
<datalist id="steps">
<option>1</option>
<option>2</option>
<option>3</option>
</datalist>
リアルタイム値表示
少しのJSを使用することで簡単に表現できます。
<input type='range'>が動かされると、すぐ後ろの<output>要素の値をスライダーの値に同期させます。
<input type="range" value='50' min="1" max="100" oninput="this.nextElementSibling.value = this.value" />
<output>50</output>
デモ
See the Pen native html slider by 小林誠 (@knicisow-the-vuer) on CodePen.
output要素はアプリケーションの実行結果やユーザーの操作結果を表示するために使用します。
spanなどでも代用できそうな気もしますが、
- name属性で名前をつけられる（formの値として送信はされない）
- フォームに配置するとリセットボタンで初期値に戻せる
- ARIAロールが
statusであり、値が変化した際に支援技術に対して通知する機能を持つ
と機能を持つので、outputを使える場面ならこれを活用する方がいいでしょう。
プログレスバー
nativeなhtmlがサポートしています。
参考: progress
See the Pen native html progressbar by 小林誠 (@knicisow-the-vuer) on CodePen.
これは動的な進捗状況を表現するためのものなので、単なる静的なグラフとして表現したい場合はmeter を使用します
静的なグラフ meter
棒グラフのようなゲージとしてレンダリングされます。
<meter value='0.75>0.75</meter>
注意:
valueだけでUIは表現できますが、meter要素を解釈しないブラウザに対するフォールバックとして、テキストを入れておくことが無難だそうです。
参考: meter
検索可能なドロップダウン
datalistやoptgroupを活用することで検索したり、グループ化を簡単に実装できます。
入力補完の候補を表示
datalist要素に id属性を指定し、そのidをinput要素のlist属性で指定することで、datalistの子要素であるoption要素が補完候補になります。
入力しながら絞り込みができるので、検索フォームで活用できます。
<!-- datalist -->
<label for='browser'>リストを選択してください</label>
<input list='browser-names' name='browser' id='browser' />
<datalist id='browser-names'>
<option value='Edge' />
<option value='Firefox' />
<option value='Chrome' />
<option value='Safari' />
</datalist>
ちなみにinput要素にtype='range'を指定すると option で指定した位置にメモリがつくスライダーとなります。
候補のグループ化
select要素の中で、optgroup要素を使用すると、option要素をグループ化できます。
<!-- group list -->
<label for='food'>食べ物を選択してください</label>
<select id='food'>
<optgroup label='Fruits'>
<option value=''>🍏Apple</option>
</optgroup>
<optgroup label='Vegetables'>
<option value=''>🍅Tomata</option>
</optgroup>
<optgroup label='Desserts'>
<option value=''>🍮Pudding</option>
</optgroup>
</select>
注意:
-
optgroupにはoption以外を入れることができない -
optgroupを入れ子にできない
参考: optgroup
デモ
See the Pen native html datalist by 小林誠 (@knicisow-the-vuer) on CodePen.
キャプション付き画像
figcaptionを使用するとキャプションを表現できます
figcaptionはfigure要素のなかの先頭か末尾におく必要があります。
以下のように書きます
<figure>
<img src="image.jpg" alt="..." />
<figcaption>画像の説明</figcaption>
</figure>
See the Pen Untitled by 小林誠 (@knicisow-the-vuer) on CodePen.
注意:
figcaptionのスクローンリーダーの読み上げ対象となるので、alt と同じ文言を書いた場合、2度同じ内容が読み上げられるので注意が必要です。
参考: figcaption
マークされたテキスト
強調やハイライトを表現し、強調したいケース以外に、検索語句をハイライトとしたい場合でも使用できます。
<mark>ここテストに出ます！</mark>
まとめ
ここまで見ていただきありがとうございます。
自分も過去にspanタグやjsを無理やり駆使して、車輪の再発明をしたことがあります。😅
こういったネイティブHTMLの挙動を知っておくと、実装を効率化させたり、よりアクセシビリティに配慮されたUIコンポーネントを実装できます。
誰かの参考になると嬉しいです。