概要
- JavaScript の役割が変化し、 HTMLやCSSの進化 による代替が可能に
- JSの利用を減らし、 パフォーマンス向上 と ユーザー体験の最適化 を目指す流れ
- 具体的な代替例として アコーディオン、 入力補助ドロップダウン、 モーダル/ポップオーバー、 オフスクリーンナビ を紹介
- 各機能の HTML/CSS実装例 と 注意点 を解説
- リソースリンク や ブラウザ対応状況 も掲載
JavaScriptの役割再考とHTML/CSS活用のすすめ
- 長年、 JavaScript はWebの主力技術
- 近年、 HTML や CSS の標準機能が拡張
- JSで実装していたUI機能を ネイティブ要素 で代替可能に
- JSはより重要な処理や高度な機能に集中すべき時代
- ネイティブ化で ダウンロード量削減、 パフォーマンス最適化、 アクセシビリティ向上
アコーディオン／展開式コンテンツパネル
- details と summary 要素でJS不要のアコーディオン実装
- 代表的な用途： コンテンツの開閉、 セクションの展開
- 基本構造：
<details><summary>タイトル</summary>内容</details>open属性でデフォルト展開状態を設定
- name属性 でラジオボタンのように 1つだけ展開 も可能
- CSS や JS で見た目や挙動のカスタマイズも柔軟
- 参考： MDN detailsページ
- ブラウザ対応 ：主要ブラウザで広くサポート
入力補助・オートフィルタドロップダウン
- input と datalist 要素で自動候補ドロップダウンを実現
- 用途例： サイト内検索、 商品検索、 リストフィルタ
- 基本構造：
<input type="text" list="候補ID" /><datalist id="候補ID"><option value="候補1"></option>...</datalist>
- number や time など他のinput型にも適用可能
- 制限事項 ：Firefoxはテキスト型のみ対応、モバイルやアクセシビリティに課題
- 参考： MDN datalistページ
- ブラウザ対応 ：一部制限あり
モーダル／ポップオーバー
- popover属性 や popovertarget属性 でモーダルやポップオーバーをJSなしで実装
- 用途例： サイドパネル、 補足情報の表示
- 主なタイプ：
- auto ：外部クリックやEscで閉じる
- hint ：複数同時表示可能（Firefox/iOS未対応）
- manual ：手動でのみ開閉
- 基本構造：
<button popovertarget="ID">トグル</button><dialog popover id="ID">内容</dialog>
- 詳細： MDN popoverページ
- アクセシビリティ や ブラウザ対応 に注意
オフスクリーンナビゲーション／コンテンツ
- popover 機能を応用し、 オフスクリーンメニュー をJS不要で実現
- 用途例： ナビゲーションメニューの開閉
- 基本構造：
<button popovertarget="menu">メニュー</button><nav popover id="menu">ナビ内容</nav>- CSSで
translateを利用し、画面外からスライドイン
- backdrop 疑似要素で背景の装飾も可能
- manual 指定で明示的な閉じ方も設定可
- 詳細： MDN popoverページ 参照
- ブラウザ対応 ：主要ブラウザで対応進行中
結論・今後の展望
- JavaScript のパワーと柔軟性は健在
- しかし HTML/CSSの進化 を活かし、JSの利用を 本当に必要な場面 に限定することが重要
- パフォーマンス や アクセシビリティ の向上、 メンテナンス性 の強化
- CSSの新機能も多数登場、さらなるノーJS・ローJS化が可能
- 詳細・実装例は長文記事を参照
著者情報：Aaron T. Grogg
- Web Developer／パフォーマンス最適化スペシャリスト
- Blog: aarontgrogg.com
- BlueSky: aarontgrogg.bsky.social
- Mastodon: mastodon.social/@aarontgrogg
- LinkedIn: linkedin.com/in/aarontgrogg