BT

最新技術を追い求めるデベロッパのための情報コミュニティ

寄稿

Topics

地域を選ぶ

InfoQ ホームページ ニュース Vanilla JSの108の一般的なDOMタスク:HTML DOMプロジェクト

Vanilla JSの108の一般的なDOMタスク:HTML DOMプロジェクト

原文(投稿日:2020/04/23)へのリンク

オープンソースプロジェクトのHTML DOMは、一般的なDOM操作タスクを実行する100を超えるvanilla JavaScriptのスニペットを提供する。タスクの難易度は、些細なもの(要素のクラスを取得する)から高度なもの(サイズ変更可能な分割ビューを作成する)までさまざまである。このプロジェクトは、教育目的や、低レベルのDOM処理を自分で行う必要があるコンポーネント開発者にとって有益である。

プロジェクトの主要な貢献者であるPhuoc Nguyen氏は、プロジェクトの論理的根拠を説明した。

どのフレームワークでもWebコンポーネントを開発または使用する場合には、特定のレベルでDOMを操作する必要があります。

ブラウザのDOM APIとその使用方法を知ることは、Web開発において重要な役割を果たします。API、よく知られた問題、よくある質問を紹介するWebサイトは非常に有益です。

HTML DOMスニペットはネイティブブラウザのAPIのみを使用するため、外部ライブラリは必要ない。これは、World Wide Web Consortium(W3C)による、すべての最新ブラウザでのネイティブブラウザAPIの標準化によって実現されている。そして、Web Platform Incubator Community Group(WICG)やResponsive Issues Community Group(RICG)などのプラットフォームの革新的な機能について議論するブラウザベンダー間のコラボレーションによって実現されている。

HTML DOMスニペットは、推定される複雑さのレベルまたは必要な事前知識に応じて3つのカテゴリに分類される。基本的なタスクには、イベントハンドラーのアタッチまたはデタッチ、兄弟要素の取得要素のCSSスタイルの更新がある。

中間タスクには、スクロールバーのサイズの計算要素の最初のスクロール可能な親の取得iframeとその親ウィンドウ間の通信ファイルのダウンロードテーブルからCSVへのエクスポートCSSファイルの動的な読み込みなどがある。

高度なタスクには、サイズ変更可能な分割ビューの作成ドラッグしてスクロールする操作サイズ変更可能な要素の作成ヘッダーをクリックしてテーブルを並べ替えるなどがある。

サイズ変更可能な要素の作成に関連するスニペットは、20行のCSS、7行のHTML、および30行をわずかに超えるJavaScriptで構成される。HTMLには、bottomとrightの境界ハンドルのdivが含まれている。CSSコードは、マウスがHTML要素のハンドル上にあるときにカーソルの変更を処理する。JavaScriptはインタラクションロジックを処理し、ユーザが1つのハンドルをドラッグしているかどうかに応じて、mousemoveリスナーを設定および削除する。最終アウトプットは次のとおりである。

demo snipped for making a resizable element only with vanilla JS, HTML and CSS

部の開発者は、Hacker Newsに熱意を示している。ある開発者は次のように述べている。

整理されたリソースです。ブックマークしました。
SPAの時代ですが、どこにvanilla JSの適切なユースケースがあるでしょうか。ランディングページです。

  • ほとんど静的なHTMLです。最初にレンダリングするまでの時間が重要です。必要なのは、少しの(徐々に追加される)センスだけです。
  • 瞬時のロード/実行のためにインライン化できます。バンドルのダウンロード(またはSSR)は必要ありません。
  • コードの量とスコープが小さいため、構造/スパゲッティは問題になりません。
  • 残りのSPAバンドルから分離できます。そのため、出荷の変更はSPA CI/CDプロセスから完全に切り離され、何度でも_very_quicklyで実行できます。

別の開発者は、プロジェクトの教育的価値を強調した

MDNドキュメントは、私の経験から、利用可能な最高のブラウザフロントエンドリファレンスです。
ただし、このサイトは別のニーズをカバーしています。ガイド/ハウツー指向のドキュメントです。これはよく必要とされるものです。

HTML DOMは、MITオープンソースライセンスの下で利用できる。コントリビューションとフィードバックは大歓迎であり、GitHubプロジェクトを介してお願いします。

この記事に星をつける

おすすめ度
スタイル

BT