ライブラリが不要な8つのネイティブHTML要素

ブラウザと戦うのはやめましょう。すでに備わっている機能のために、ライブラリをインストールするのはやめましょう。

次の8つのネイティブHTML要素を試してみてください：

  • <dialog>: モーダルに使用します。フォーカス管理やバックドロップの制御も可能です。
  • <details> と <summary>: アコーディオンに使用します。
  • popover: メニューに使用します。JavaScriptは一切不要です。
  • <select> と <datalist>: ドロップダウンやオートコンプリートに使用します。
  • <input type="range">: スライダーに使用します。CSSでスタイリング可能です。
  • <input type="color">: カラーピッカーに使用します。
  • <input type="date">: カレンダーに使用します。モバイルでも動作します。
  • loading="lazy": 画像の遅延読み込みに使用します。

「ネイティブ優先」とは、依存関係をゼロにすることではありません。npmを使う前に、まずドキュメントを確認することを意味します。

ライブラリはコードを固定してしまいます。一方、ブラウザは進化し続けます。新しい機能を無料で継承できるのです。

コード量を減らし、アクセシビリティを確保し、メンテナンス時間を短縮しましょう。

まずはプラットフォームのドキュメントを確認してください。多くの場合、タグを一つ追加するだけで実現できます。

出典: https://dev.to/dimonb19a/8-native-html-elements-you-dont-need-a-library-for-29b4