目次
まえがき
第1章 Web Componentsとは
第2章 Web Componentsを使ってみよう
第3章 Polymerでウェブサイト構築
第4章 lit-html（応用編）
あとがき
まえがき
近年、Webフロントエンドでは「コンポーネント指向」のフレームワークやライブラリーが多く開発され、コンポーネント単位での開発が主流になってきました。Web Componentsは、特定のフレームワークやライブラリーに依存せず、Webの標準技術を使用してコンポーネント単位での開発を可能にする考え方です。本書では、Web Componentsとは何か、どうやって使うのかを解説します。
また、第3章でWeb Componentsをベースにウェブアプリケーションを構築するJavaScriptライブラリーであるPolymerを使ったウェブサイト構築について解説します。PolymerはWeb ComponentsのPolyfillの機能とCustom ElementsやHTML templatesの構築を助ける機能を備えたライブラリーです。（Polyfillとは既存の技術を使って、古いブラウザでも新しい機能を使えるようにする手法のことです。）Polymerを利用することでより効率的にWeb Componentsの開発を進められます。
対象読者
本書はHTML/CSS/JavaScriptを利用して独力でウェブサイト開発ができる人を対象にしています。また、本書ではECMAScript 2015（以降、ES2015）以降の書き方を使用しているため、それらの知識があればより読み進めやすいと思います。
対象環境
本書のコード、公開しているサイトやソースは下記実行環境を前提にしています。その他の環境での動作は保証しかねますので、ご了承ください。
第2章：Google Chrome、Opera（それぞれ最新版）
第3章：Google Chrome、Opera、Safari、Microsoft Edge（それぞれ最新版）お問い合わせ
本書に関するお問い合わせはTwitter（https://twitter.com/takanoripe）までお願いします。
謝辞
レビューに協力してくださった皆様、本当にありがとうございました。
免責事項
本書に記載された内容は、情報の提供のみを目的としています。したがって、本書を用いた開発、製作、運用は、必ずご自身の責任と判断によって行ってください。これらの情報による開発、製作、運用の結果について、著者はいかなる責任も負いません。
表記関係について
本書に記載されている会社名、製品名などは、一般に各社の登録商標または商標、商品名です。会社名、製品名については、本文中では©、®、™マークなどは表示していません。
底本について
本書籍は、技術系同人誌即売会「技術書典5」で頒布されたものを底本としています。
第1章 Web Componentsとは
近年、ReactやVue.js、Angularといったコンポーネント指向のフレームワークやライブラリがいくつか台頭し、急速に普及が進んでいます。これらの新しいフレームワークによって、jQueryでガリガリDOM操作を行う世界は置き換わりつつあります。しかし、これらのフレームワークやライブラリーは互換性がなく、コンポーネントの共有ができない問題があります。
ここでコンポーネントという言葉の意味に触れておきます。コンポーネントとは「構成要素」「部品」といった意味の言葉です。Webアプリケーションにおいてのコンポーネントは、ある特定の機能を持ち、コンポーネントを使うユーザーコンポーネントまたはアプリケーションに依存していない、アプリケーションを構成する要素といった意味合いで使われます。単体で完結しているものの、そのまま使用するわけではなく、必要に応じてアプリケーションから呼び出したり、他の機能を持つコンポーネントと連結して使用します。
その一方で、Webの標準規格として、 Web Componentsという「コンポーネント」をつくる技術が提唱されました。
この章ではWeb Components入門として、その成り立ちや基本概念、使用するメリット、今後の展望を紹介します。
1.1 基本概念
1.1.1 Web Componentsとは
Web Componentsのポータルサイト（https://www.webcomponents.org）の導入部を翻訳すると、
Web Componentsとは、WebページやWebアプリケーションの中で、再利用性がありカプセル化された独自のHTMLタグを新たに作成する為のWebプラットフォームAPIのセットです。カスタムコンポーネントやウィジェットは、Web Componentsの標準をベースに構築され、最新のブラウザーで動作し、HTMLで動作するJavaScriptライブラリやフレームワークとともに使用できます。(https://www.webcomponents.org/introduction)
とあります。
つまり、アプリケーション内でよく使うコンポーネントを独自に定義したHTMLタグを使っていつでも呼び出せるようにする技術 です。便利ですね。また、Web ComponentsはHTML/CSS/JavaScriptを独自に定義したDOMスコープ内にカプセル化するので、呼び出し元の環境に依存せず動作させることができ、再利用性が高くなります。
近年ではReactやAngularなどUIをコンポーネントとして扱うフレームワークが多くありますが、CSSがアプリケーション内で単一のグローバルスコープしか持たない為、呼び出し先の環境に影響を受ける場合があり、より再利用性が高い手法が望まれています。Web Componentsでは前述の通り、HTML/CSS/JavaScriptを含めコンポーネント化する為、独立したスコープを持ち、再利用性を高めています。
上記のようなJavaScriptフレームワークで作られたコンポーネントとWeb Componentsの違いは、再利用性の高さだけではありません。Web Componentsはブラウザーの標準機能を使用するので、特別な開発・ビルド環境を用意する必要がありません。Web Componentsの実装をより強力にサポートする為のライブラリーも存在します。次項では、Web Componentsの具体的な内容に触れていきましょう。
1.1.2 Web Componentsを構成する4つの技術
Web Componentsを構成する4つの仕様（APIのセットの技術仕様を定義したもの）は、ぞれぞれWHATWGで仕様が検討されています。（参照： https://github.com/w3c/webcomponents/）また2018/10/08現在、各仕様の勧告レベルは以下になっています。
・Custom Elements：Living Standard
・Shadow DOM：Living Standard
・HTML Imports：Abandoned
・HTML Template：Living Standard
それぞれの仕様は独立しており、各APIは単独で利用することもできます。詳しい利用方法については改めて後述しますが、ここではまず簡単に概要をご紹介します。
1.Custom Element
独自のDOM要素（Custom Element）を定義するための仕様です。
みなさんは大量の<div>要素に囲まれたコンテンツを見かけたことはありませんか？これは、複雑なコンテンツを限られた抽象的なネイティブ要素で表現せざるを得ない場合に陥る現象ですが、文章構造の意味付け（＝マークアップ）として良い状態ではありません。そこで独自にコンテンツの内容に合ったDOM要素を定義し、この問題を回避します。
Custom Elementsで新たに定義したDOM要素には、メソッドやプロパティーの追加ができます。また、既存のHTMLElementsやHTMLButtonElementを継承した新しいDOM要素を定義することもできます。
2.Shadow DOM
カプセル化した（ローカルスコープを設定した）スタイルとマークアップを定義する仕様です。Shadow DOM APIはDOM要素には、通常の子要素と分離されスコープが設定されたDOMツリーが作成されます。このDOMツリーのことを Shadowツリー と呼びます。Shadowツリーの中にあるスタイルは外部のDOM要素には適用されず、外部のスタイルがShadowツリー内部のDOM要素に適用されることもありません。
Custom Elementsと組み合わせることによって、再利用性の高いのコンポーネントを作成することができます。
Shadow DOM APIを使用したコンポーネントは周囲に影響を与えることがないので、 コンポーネントの使用者は中身がどうなっているか詳しく知る必要がなく、用意された機能だけ知っていれば扱える というメリットがあります。この逆も然りで、コンポーネントの実装者は使用される環境について考える必要がありません。
現在、Shadow DOMの仕様の大部分はDOM標準としてメンテナンスされています。
3.HTML Template
DOMのテンプレートを宣言する方法を定義する仕様です。このテンプレートはページ読み込み時は使用されず、後からJavaScriptを利用してインスタンス化されドキュメントに挿入されます。
通常のマークアップを<template>要素で囲うことでテンプレートを宣言し、必要に応じてJavaScriptでアクティベート（有効化）してコンテンツを描画します。
<template>要素で宣言された要素は、アクティベートされるまで描画はもちろん、スクリプトの作動や画像のロード等もされません。テンプレートの宣言は<body>要素、<frameset>要素、<head>要素および span 属性を持たない<colgroup>要素に設置することができます。
HTML Templateの利点は、appendChildやinnerHTMLを使用せず宣言的にマークアップを記述でき、しかも実行時に動的追加できることです。直感的に通常のHTMLと同じように記述できるので、デザイナーやマークアップエンジニアとの協業もやりやすくなります。
4.HTML Imports（廃止）
この仕様は廃止されました。
HTMLの読み込みと再利用を定義する仕様です。この機能を使うことによって、様々なリソースをひとつのHTMLファイルにまとめてロードできるようになります。
なぜ廃止されたのか、今後どうなって行くのかについては、後述します。（「1.3 Web Components の未来」参照）
現在、ES Modulesを使用してHTML Importsの機能を再構築する、HTML Modulesという仕様の議論が進められています。1HTML ImportsはGoogle Chromeでしか実装されていませんが、2019年4月ごろにGoogle Chromeからも削除される予定です。2
1.1.3 Web Componentsの使い方
以上4つの仕様で構成されるWeb Componentsですが、それぞれどのように関連しているのでしょうか。ここでは利用する流れを簡単に説明します。具体的な実装方法等は2章で改めて解説します。
１．Custom Elementを作る
１．Shadow DOMでカプセル化する
１．HTML Templateでテンプレートを定義
１．Custom Elementを登録
１．HTML Importsでコンポーネント及びそのコンポーネントが依存するコンポーネントをインポートする（仕様が廃止されたので代替仕様の策定中）
Web Componentsを利用できるライブラリーが多数出ており、手軽に利用することができます。本書3章では、Polymerを利用したWebアプリケーション開発手法を紹介します。
・webcomponents.js
─https://github.com/webcomponents/webcomponentsjs
─未対応のブラウザーにもWeb Componentsを提供するためのPolyfill
・Polymer
─https://www.polymer-project.org/
─Googleが中心となって開発した、宣言的にWeb Componentsを作成する機能セットを提供するライブラリー
・Slim.js
─ES2015+のネイティブクラス継承を利用して、データバインディング等の拡張機能を提供するライブラリー