[ドキュメント翻訳] Web componentsとはなにか

Angular React Vue.jsと色々なjavascriptフレームワークを用いてコンポーネントを普段作成していますが、
Web Componentsは、コンポーネントをライブラリを使うことなく素のJSだけで作ることができる技術です。

MDNには以下のように記載されています

Web Components は、いくつかの独立したテクノロジーで構成されています。 Web Components は、オープンなウェブテクノロジーを使用して作成された再利用可能なユーザーインターフェイスウィジェットと考えることができます。これらはブラウザーの一部であるため、jQuery や Dojo などの外部ライブラリーは必要ありません。 HTML ページにインポートステートメントを追加するだけで、既存の Web Components をコードを記述することなく使用できます。 Web Components は、新規または今も開発中の標準ブラウザー機能を使用します。

今回はそのWeb Componentsについて、公式ドキュメントの導入部分を和訳してみます。

はじめに

webcomponentsとは

Webコンポーネントは、WebページとWebアプリケーションで使用する新しいカスタム、再利用、カプセル化されたHTMLタグを作成できるWebプラットフォームAPI群です。
カスタムコンポーネントとウィジェットは、Web Component標準をベースに構築され、最新のブラウザで機能し、HTMLで動作するJavaScriptライブラリやフレームワークで使用できます。

Webコンポーネントは、既存のWeb標準に基づいています。
Webコンポーネントをサポートする機能は現在、HTMLおよびDOM仕様に追加されており、Web開発者がカプセル化されたスタイリングとカスタム動作を持つ新しい要素でHTMLを簡単に拡張できるようにしています。

仕様

Webコンポーネントは、次の4つの主な仕様に基づいています。

Custom Elements
Custom Elementsの仕様は、新しいタイプのDOM要素の設計と使用の基礎を築いています。

Shadow DOM
shadow DOMの仕様は、Webコンポーネントでカプセル化スタイルとマークアップを使用する方法を定義します。

HTML imports
HTML importsの仕様は、他のHTML文書へのHTML文書の組み込みと再利用を定義しています。

HTML Template
HTMLテンプレート要素の仕様では、ページ読み込み時には使用されないが、実行時に後でインスタンス化できるマークアップのフラグメントを宣言する方法を定義しています。

Webコンポーネントをどのように使用するか?

このサイトのコンポーネントは、WebページやWebアプリケーションで使用できる新しいHTML要素を提供します。

カスタム要素を使用するのは、HTML要素をインポートし、HTML文書内の新しいタグを使用するだけです。たとえば、Emoji
Rain要素
を使用するには、次のようにします。

<link rel="import" href="../emoji-rain/emoji-rain.html">
...
<emoji-rain active></emoji-rain>

カスタム要素をインストールするにはいくつかの方法があります。使用したい要素が見つかったら、そのREADMEにコマンドをインストールしてください。今日のほとんどの要素は、Bowerと共にインストールできます。
Bowerはコンポーネントの依存関係のインストールも処理します。 Bowerの詳細については、Bower.ioを参照してください。

たとえばEmoji Rain READMEは、Bowerのインストールプロセスについて説明しています。

mkdir emoji-rain-demo && cd emoji-rain-demo
bower install emoji-rain


新しいHTML要素を定義するにはどうするか

このセクションでは、Webコンポーネント仕様の新しいクロスブラウザバージョン(v1)の構文について説明します。

JavaScriptを使用して、新しいHTML要素とそのタグをcustomElementsグローバルで定義します。
customElements.define()を呼び出すには、作成するタグ名とベースHTMLElementを拡張するJavaScriptクラスを指定します。

たとえば、modile drawerを定義するには、

class AppDrawer extends HTMLElement {...}
window.customElements.define('app-drawer', AppDrawer);

カスタム要素仕様のv0では、この目的でdocument.registerElement()を使用しました。

var XFoo = document.registerElement('x-foo');
document.body.appendChild(new XFoo());

詳細については、v0 Custom
Elements仕様
のこの記事を参照してください。新しいタグを使用するには:

<app-drawer></app-drawer>

カスタム要素を使用することは、<div>または他の要素を使用することと変わりありません。インスタンスをページ上で宣言したり、JavaScriptで動的に作成したり、イベントリスナーをアタッチすることができます。

<script>
// Create with javascript
var newDrawer = document.createElement('app-drawer');
// Add it to the page
document.body.appendChild(newDrawer);
// Attach event listeners
document.querySelector('app-drawer').addEventListener('open', function() {...});
</script>

shadow rootの作成と使用

このセクションでは、shadow root DOM仕様の新しいクロスブラウザバージョン(v1)を使用してshadow DOMを作成するための構文について説明します。shadow
DOMは、コンポーネントを構築するのに役立つ新しいDOM機能です。

shadow DOMは、要素内のスコープ付きサブツリーと考えることができます。

shadow rootは、「ホスト」要素にアタッチされるドキュメント・フラグメントです。shadow rootをアタッチする動作は、その要素がshadow DOMを取得する方法です。要素のshadow
DOMを作成するには、element.attachShadow()を呼び出します。

const header = document.createElement('header');
const shadowRoot = header.attachShadow({mode: 'open'});
shadowRoot.innerHTML = '&lt;h1>Hello Shadow DOM&lt;/h1>'; // Could also use appendChild().
// header.shadowRoot === shadowRoot
// shadowRoot.host === header

shadow DOM仕様のバージョン0では、shadow DOMを作成する方法が少し異なります。

var root = host.createShadowRoot();

詳細は、shadow DOM v0のこの記事を参照してください。shadow
DOM仕様のv0とv1の比較
も参照してください。


Webコンポーネントを構築するためのライブラリ

多くのライブラリが既に存在しているため、Webコンポーネントを簡単に作成できます。独自のコンポーネントを作成して作成するには、いくつか試してみてください:

  • Bosonicは、Web開発者の日々のニーズを満たすように設計されたコンポーネントの集合体です。
  • Polymerはカスタム要素を作成するための一連の機能を提供します。
  • SkateJSは、小さなメモリでWebコンポーネントを記述するためのJavaScriptライブラリです。
  • Slim.jsは、es6ネイティブクラスの継承を使用して、コンポーネントのデータバインディング機能と拡張機能を提供する、オープンソースの軽量Webコンポーネントライブラリです。
  • Stencilは、標準準拠のWebコンポーネントを生成するopensourceコンパイラです。
  • X-Tagは、コンポーネント開発のためのインターフェイスを提供するオープンソースのJavaScriptライブラリです。