進化し続けるフロントエンド技術「Web Components」はライブラリ不要！――気軽に始めて開発の生産性を高めよう

再利用可能なUI部品を組み合わせて画面を構築していくのは、多くのGUIアプリケーションにとって効率の良い開発手法です。ブラウザ向けにも多くのライブラリが再利用性を担保するための工夫を重ねてきましたが、実はブラウザ自身が再利用可能なUI部品を作成するための機能を備えていることはご存知でしょうか。本記事では、Web Componentsという名称で総称されるブラウザの機能について解説します。 対象読者 AngularやReactなどのフレームワークに頼らずに再利用可能なHTMLやCSSを整備したいマークアップエンジニア AngularやReactなどのフレームワークとWeb Componentsを併用する利点を学びたいJavaScriptエンジニア 前提環境 筆者の検証環境は以下の通りです。 macOS Monterey 12.3.1 Google Chrome 100.0.4896.127

[takahashim]

進化し続けるならsetとgetとobservedAttributesとattributeChangedCallbackをちまちま書かずに済むところまで進化して欲しい…という気持ちになっております(今Web Components書いてるので)

[yarumato]

“部品化されたUIをブラウザで扱う手法。Reactもよいが、Node.jsやNPMに頼るため、ブラウザの外側のツールの学習コストが高くなる。JavaScript向けのAPI機能群Web Componentsは非標準HTMLタグを自作して再利用できます。シャドウDOM”

[pascal256]

いきわれ