Web Components v1 - 次世代

Web Components はクロスブラウザ サポートを獲得し、コミュニティは飛躍的に拡大しています。また、必要なコンポーネントを正確に見つけられる新しい Web Components カタログも用意されています。

Taylor Savage
Taylor Savage

複数のプロジェクトで簡単に使用したり、他のデベロッパーと共有している JavaScript フレームワークに関係なく、独自の自己完結型 JavaScript コンポーネントを作成したいと思ったことはありませんか?Web Components をぜひご活用ください。

ウェブ コンポーネントは、独自の HTML 要素を作成できる新しいウェブ プラットフォーム機能のセットです。新しいカスタム要素にはそれぞれ <my-button> のようなカスタムタグを設定し、組み込み要素のすべての長所を活かすことができます。カスタム要素にはプロパティとメソッド、イベントの呼び出しと応答が可能で、カプセル化されたスタイルと DOM ツリーを使用して、独自のデザインを組み込むこともできます。

紙の進行状況要素のアニメーション。

Web Components では、プラットフォーム ベースの低レベルのコンポーネント モデルを用意することで、専用のボタンから日付選択ツールなどの複雑なビューまで、あらゆる要素に再利用可能な要素を構築し、共有できます。Web Components は強力なカプセル化プリミティブを含むプラットフォーム API を使って構築されているため、これらのコンポーネントを他の JavaScript ライブラリやフレームワーク内で標準の DOM 要素のように使用することもできます。

Web Components についてご存じの方もいらっしゃるでしょう。Web Components 仕様の初期バージョンである v0 は、Chrome 33 に搭載されています。

現在、ブラウザ ベンダー間の幅広いコラボレーションのおかげで、次世代の Web Components 仕様 v1 が広くサポートされるようになりました。Chrome は、Chrome 53 および Chrome 54 の時点で、ウェブ コンポーネントを構成する 2 つの主要な仕様(Shadow DOMカスタム要素)をサポートしています。Safari は、Safari 10 で Shadow DOM v1 のサポートを提供し、WebKit のカスタム要素 v1 の実装を完了しました。Firefox は現在 Shadow DOMカスタム要素 v1 を開発しており、Shadow DOMカスタム要素は両方とも Edge のロードマップに含まれています。

v1 実装を使用して新しいカスタム要素を定義するには、ES6 構文を使用して HTMLElement を拡張する新しいクラスを作成し、それをブラウザに登録するだけです。

class MyElement extends HTMLElement {...}
window.customElements.define('my-element', MyElement);

新しい v1 仕様は非常に強力で、すぐに使用を開始できるように、カスタム要素 v1Shadow DOM v1 の使用に関するチュートリアルを用意しています。

webcomponents.org

Web Component のコミュニティも飛躍的に成長しています。ウェブ コンポーネント コミュニティの中心となる webcomponents.org サイトが更新され、デベロッパーが要素を共有するための統合カタログが追加されました。

webcomponents.org

webcomponents.org のサイトには、Web Components の仕様、アップデート、ウェブ コンポーネント コミュニティのコンテンツに関する情報が掲載されています。また、他のデベロッパーが作成したオープンソース要素要素のコレクションのドキュメントも用意されています。

Google の Polymer などのライブラリを使って最初の要素を作成することも、低レベルの Web Component API を直接使用することもできます。次に、webcomponents.org で要素を公開します。

コンポーネント化のお役に立てば幸いです。