【コードなしで理解する】Web Components超入門

〜n番煎じを恐れない強い心を添えて〜

Web Componentsとは

Webサイトを作っていくうちに、複数のページにまたがって見た目や機能面で何度も利用されるパーツが出てきたことはありませんか？そういったパーツのまとまりを部品化して再利用しようとする考えをコンポーネント指向といいます。
例えばSketchというデザインツールはデザイン面でのコンポーネント化を意識して作られていますし、ReactやVueなどコンポーネントの再利用が簡単に出来るようになっているJSのライブラリ/フレームワークも多いですよね。

対してWebComponentsは、コンポーネント指向をweb標準技術で解決しようとする技術の総称です。Web標準技術とは、babelなどを用いたトランスパイルの必要がない素のHTML・素のJavaScriptのことです。Web標準技術だけでコンポーネント指向が実現できるとは何と素敵なことなのでしょうか😆🎉

上記によると、WebComponentsを構成する技術はShadow DOM, Custom Elements, HTML Templates, CSS changes, JSON/HTML/CSS Modulesの5つがあります。(※2019/08現在)
今回は中でもWebComponentsにおけるメイン技術であるShadow DOM Custom Elements HTML Templatesの3つについて、それぞれの内容を簡単にご紹介します。

1. Custom Elements(v1)

いわゆる独自タグに独自の振る舞いを与えたもののこと。JavaScriptで既存の要素(<div>など)を継承させた上でそのタグ独自の動作を定義することができ、一度定義すれば同じWebサイト内で何度でも使い回すことができます。また、APIにはライフサイクルメソッドも用意されており、それらをフックすることで要素の振る舞いを制御可能です。
Using custom elements | MDN

2. Shadow DOM(v1)

カプセル化されたDOMのこと。Shadow DOMはメインのドキュメントツリーには属さず、独自のドキュメントツリーを形成するDOMです。JSやCSSは基本的にグローバル(windowやdocumentsの下)に置かれるため、多用すると同じページの他の要素に影響することがあるが、Shadow DOMではJSやCSSをカプセル化するので他のDOMに影響を及ぼすことはありません。

例えばChromeでは<video>タグは内部的にShadow DOMが使われています。

HTML上はvideoタグしか書かなくても、実際に描画される時は再生・停止ボタンや時間表示、ボリューム操作などを行うUI・機能が付与されます。

そしてこれらのパーツはHTML文書構造上は存在しません。

3. HTML Templates

<template>要素のこと。ページ読み込み時には中身の要素は描画されず、後から<template>の中の要素をJavaScriptで挿入します。このtemplate要素はVueでも使われていますし、lodashでも関数が用意されているので一番目にしたことが多いのではないでしょうか。内容としてはテンプレートエンジンにおける部分テンプレートのようなものです。
コンテンツテンプレート要素 | MDN

Web標準技術といったけど…

一部の技術はIEや他のブラウザではまだ対応されきっていない現状があります。ですが、下記のポリフィルを使うことでIE11以上やSafari9以上までは対応できるようです。VueやReactではオーバースペックになる小規模サービスであれば採用することもアリっちゃアリ…なのかな…。
https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs
ここにPromiseやObject.Assign()のポリフィルも含まれてることに驚きました😲

個人的には現状クローラーがどこまで理解してくれているのか気になるところです。

参考

• 実際にコードを書きたい方におすすめ: よくわかるWebComponents
• 最近の状況が知りたい方におすすめ: Web Components の最近の仕様と開発手法