以下の記事は、自分の知識整理のための記事です。間違っていたらご指摘ください。
Web Componentとは
ウェブの再利用可能なウィジェット・コンポーネントを作成するための標準技術の集合。
これにより、HTML, CSS, JSをカプセル化した上で再利用することが可能になる。
1. カスタム要素
カスタム要素と、その動作に関するJavaScript API。以下のようなコードをJavaScriptに書くことで、HTMLからpopup-infoタグを使用できるようになる。
customElements.define("popup-info", PopupInfo); class PopupInfo extends HTMLElement { constructor() { // コンストラクターでは常に super を最初に呼び出してください super(); // ここに要素の機能を記述します } }
<popup-info></popup-info>
2. Shadow DOM
Shadow DOMツリーを要素に紐づけて関連する機能を制御するための、一連のJava Script API。カプセル化している。つまり、シャドウDOM外のJavaScript, CSSが、シャドウDOM内の要素に影響を与えることは無い。
1のカスタム要素単体だと、カプセル化されていないので、Shadow DOMと組み合わせることで、外部と隔離された形でタグが使用できるようになる。Shadow DOMは、HTML templateと違って、attachされたらすぐにレンダリングされる。
3. HTML template
template要素と、slot要素によって、レンダリングされたページに表示されないマークアップのtemplateを書くことができる。JavaScriptを介してインスタンス化される。
HTML templateは、templateの内容をカスタム要素としてカプセル化した上でShadow DOMに追加することで真価を発揮する。
customElements.define( "my-paragraph", class extends HTMLElement { constructor() { super(); let template = document.getElementById("my-paragraph"); let templateContent = template.content; const shadowRoot = this.attachShadow({ mode: "open" }); shadowRoot.appendChild(templateContent.cloneNode(true)); } }, );
<template id="my-paragraph"> <style> p { color: white; background-color: #666; padding: 5px; } </style> <p>My paragraph</p> </template>
こうすると、以下のような形で、my-paragraphタグを利用できる。my-paragraphは、HTML templateなので、ページ読み込みと同時にレンダリングされるわけではないので、パフォーマンス向上に貢献できる。
<my-paragraph></my-paragraph>
Web ComponentとReact
メルカリのWeb Componentsに関する記事によると、メルカリ Core teamはWeb ComoponentsからReactに移行中であるとのこと(2022年末)。 そもそもWeb Componentsを導入した背景としては、Web Componentsを使えば、React, Vueなど、様々なフレームワークで利用できるというメリットがあったためらしい。
しかし、導入後、以下のような課題が出てきた。
- Web Componentsを使ってくれる・contributeしてくれる人が少ない
- Web Componentsでサーバーサイドレンダリング(SSR)を実行するのは難しい
- Web Componentsのその他の技術的な制約
そこで、Web ComponentsからReactへの移行を実施しているらしい。
所感
Web Components自体は面白い技術だが、導入した場合、メルカリの記事にあるような技術課題に直面しそう。つまり、Web Componentsは「世間的な認知がそこまで高くない・SSRなどの技術的制約が存在する」。Web Componentsを導入するのであれば、組織全体でWeb Components体制をサポートする必要がある。ただ、そこまでの企業努力をしてまで導入するメリットは、一般的な会社には無さそう。エンジニア採用しやすくて、使いやすい技術スタックという観点で考えると、Reactに軍配が上がる。
参考
https://developer.mozilla.org/ja/docs/Web/API/Web_components
https://engineering.mercari.com/blog/entry/20210823-8128e0d987/
