注目★★★★★Lobsters
HTML だけで実装できた — ダイアログ・ポップオーバー・アコーディオンなど 10 の動的機能
30秒で把握
- 1HTML だけで 10 種類の動的機能が実装可能に・`<dialog>` `popover` `<details>` `command` 等が段階的に対応
- 2JavaScript ライブラリ依存を削減・バンドルサイズ縮小・保守コスト低下の道筋が開ける
- 3実装時にはブラウザ対応状況を確認・レガシー環境ではフォールバック戦略の立案が必要
要約
Chris Burnell は HTML が JavaScript の役割を奪い続けていることを示すため、最新ブラウザで HTML のみで実装できる動的機能を 10 個まとめた。`<dialog>` (2022 年 3 月以降対応)・`popover` 属性 (2025 年 1 月以降)・グループ化された `<details>` アコーディオン (2025 年 9 月以降)・`command`/`commandfor` 属性 (2025 年 12 月以降)・ネイティブカラー・レンジ・日付ピッカー・`<datalist>` オートコンプリート・`loading="lazy"` 遅延読み込み・`hidden="until-found"` フラグメント連動表示が、すべて JavaScript なしで動作する。ブラウザの標準化進行により、従来 JS ライブラリに頼っていた UI パターンがネイティブ HTML で実現可能になった。
あなたへの影響
従来は Bootstrap・Material UI・Headless UI など JS ライブラリで実装していたモーダル・ポップオーバー・アコーディオンが HTML のみで実現可能になれば、依存ライブラリ削減・バンドルサイズ縮小・保守負荷軽減が期待できるため、新規プロジェクトではこれらのネイティブ HTML 機能の採用を優先検討する価値がある。
推奨：ただし古いブラウザ対応が必要なプロジェクトではポリフィルの選択肢確認も合わせて実施すべき。