それにJavaScriptは必要ありません

 (htmhell.dev)
3 ポイント 投稿者 GN⁺ 2023-12-03 | 1件のコメント | WhatsAppで共有

Web開発の中核原則: 最小権限の原則

  • Web開発の中核原則の1つである「最小権限の原則」は、与えられた目的に適した最も低いレベルの言語を選ぶことを意味する。
  • HTML、CSS、JSの中ではHTMLが最も好ましく、次がCSS、最後がJSである。
  • JSは最も多用途だが、読み込み失敗、追加のリソース消費、アクセシビリティの問題などのリスクがある。

カスタムスイッチ

  • デザイン要件に応じて通常のチェックボックスの代わりにカスタムスイッチを実装する場合、JSの代わりに:checked擬似クラスを使い、HTMLとCSSで実装できる。
  • ブラウザはラベル内にある入力要素を自動的に関連付けてクリック可能にするため、追加のJSハンドラーなしでもトグル機能を提供する。

ネイティブのオートコンプリート機能: Datalist

  • JavaScriptの代わりに、ブラウザの組み込み機能であるdatalistを使って、ユーザーの入力に応じてオプションを自動でフィルタリングして表示する機能を実装できる。
  • ユーザーは自分の望む値を入力することもでき、ブラウザが追加したドロップダウンアイコンをクリックしてすべてのオプションを見ることもできる。

ネイティブのカラーピッカー

  • 複雑なJSを使ったカラーピッカーの代わりに、単一のHTML行で実装できるネイティブのカラーピッカーを使える。
  • Chrome系ブラウザでは、画面上のどこからでも色を選択できる追加機能を提供している。

アコーディオン

  • detailsとsummary要素を使うことで、ユーザーが必要になるまで内容を隠しておき、ページの構造を改善できる。
  • open属性を使えば、アコーディオン項目の1つをデフォルトで開いたままにできる。

対話型モーダル

  • dialog要素を使って、ユーザーに情報を提示したり入力を求めたりするモーダルを実装できる。
  • モーダルを開くにはJSを使うが、それ以外はすべてネイティブのHTMLとCSSで処理できる。

結論

  • この記事は、JSの使用を減らし、CSSとHTMLの機能を活用することで、より良いWebサイトを作れることを示している。
  • アクセシビリティを考慮しながら、新しい実装方法をテストすることが重要である。

GN⁺の見解

  • この記事で最も重要な点は、Web開発においてJSに依存せず、HTMLとCSSの機能を最大限活用することで、パフォーマンスとアクセシビリティを向上できるということだ。
  • Web開発者にとって興味深い理由は、これまでJSでしか可能だと思われていた機能を、よりシンプルで効率的な方法で実装できる新しいアプローチを示しているためである。

関連記事

1件のコメント

 
GN⁺ 2023-12-03
Hacker Newsのコメント

  • JavaScript の互換性がより高いため、特定の領域でそれを使うことへの言及が欠けているという指摘

    • 新しい JavaScript はトランスパイルによって使えるが、CSS や HTML の欠けている機能をポリフィルするのははるかに難しく、ときには不可能である
    • appearance プロパティの使用について MDN は多くの注意点を挙げており、特に appearance: none の使用には徹底したテストを推奨している
    • datalist は Firefox Android では機能せず、単なる入力ボックスとしてしか見えない
    • カラーピッカーは非常に非標準的で、多くのビジネスでは使いにくい
    • 記事自体も details と dialog の一貫性不足を認めている
    • ブラウザがこれらの機能を一貫してサポートする時代が来ることを願うが、それまでは主に個人プロジェクトでのみ使うつもりである

  • 2023年になってもなお、フォームやユーザーデータ入力に関する一般的なユーザー体験（UX）の問題を抱えていることへの驚き

    • なぜこの問題が解決されていないのか理解できない
    • XForms によって一度に解決しようとする試みがあったが、ブラウザでは実装されず、その代わりに CSS/JS コンポーネントフレームワークが限られたフォーム要素セットを提供している

  • datalist を知らなかったが、Chrome Android でも正常に動作しないように見える

    • キーボード上では候補が見えるが、モバイル Web UI でこの機能を見たのは初めてで、一般ユーザーが使い方を理解できるか自信がない
    • Firefox Android ではまったくサポートされていない

  • scroll-behavior: smooth を使ったネイティブなスムーズスクロール、scroll-snap を使ったネイティブなカルーセル、スクロールベースのアニメーションへの言及

    • これらの機能は使用を制限し、しばしば負の副作用があるため慎重に使うべきだと勧めている

  • <details> を使うと Ctrl+F で内容を検索でき、JavaScript のアコーディオンは開けない一方で、<details> は開けるという利点がある

  • datalist は内部ツールでない限り適切な選択ではないという意見

    • デフォルトが良くなく、スタイルを変更できず、スタイリングや挙動の変更に制限があるとき、JavaScript を使うことがしばしば唯一の選択になる

  • HTML 標準に従えば、すべてが一貫し、アクセシビリティや翻訳のようなものにも容易に適用できるという意見

    • 現代のサイトは動的にページを読み込むため、戻るボタンすら機能しない問題を指摘している

  • CSS が Web ページを読みづらくする道具として使われうるという指摘

    • レイアウトとタイポグラフィのあらゆる側面をユーザーが制御できるブラウザに戻すべきだという意見

  • Web 開発の中核原則の一つとして「最小権力の原則（Rule of Least Power）」への言及

    • この原則を聞いたことがないという開発者の意見と、できるだけシンプルに作業したいフロントエンド開発者がいるのかという疑問を示している