 |
Webコンポーネントは、Webの標準的なコンポーネントモデルを提供する機能セットであり[ 1 ]、個々のHTML要素のカプセル化と相互運用性を実現します。Webコンポーネントは、マイクロフロントエンドを構築する際によく使われるアプローチです。
Webコンポーネントを作成するために使用される主な技術は次のとおりです。[ 2 ]
- カスタム要素
- 新しいHTML要素を定義するためのAPI
- シャドウDOM
- カプセル化されたDOMとスタイリング、コンポジション
- HTMLテンプレート
- レンダリングされず、JavaScriptによってインスタンス化されるまで保存されるHTMLフラグメント[ 3 ]
特徴
カスタム要素
カスタム要素には、自律型カスタム要素とカスタマイズされた組み込み要素の2つの部分があります。自律型カスタム要素は、ネイティブHTML要素から完全に分離されたHTML要素であり、基本的にはカスタム要素APIを使用してボトムアップで構築されます。カスタマイズされた組み込み要素は、ネイティブHTML要素上に構築され、その機能を再利用する要素です。[ 4 ]
シャドウDOM
Shadow DOMは、ウェブブラウザがDOM要素をメインドキュメントのDOMツリーに配置せずにレンダリングできるようにする機能です。これにより、開発者とブラウザのアクセス範囲に障壁が生まれます。開発者はネストされた要素と同じようにShadow DOMにアクセスすることはできませんが、ブラウザはネストされた要素と同じようにコードをレンダリングおよび変更できます。特定の要素のShadow DOM内にCSSスコープを設定することで、CSSスタイルが漏洩して本来影響を及ぼさない要素に影響を与えるリスクなしに、HTML要素をカプセル化できます。これらの要素はHTMLとCSSに関してカプセル化されていますが、ドキュメント内の他の要素が取得できるイベントを発生させることができます。[ 5 ] [ 6 ]
要素内のスコープ付きサブツリーはシャドウツリーと呼ばれます。シャドウツリーが接続されている要素はシャドウホストと呼ばれます。[ 6 ]
Shadow DOMは、リテラル要素として追加するか、スクリプトを使用して既存の要素に常に接続する必要があります。JavaScriptでは、 Shadow DOMはを使用して要素に追加されますElement.attachShadow()。[ 7 ]
HTMLテンプレート
HTMLテンプレートは、テンプレートから複製されたHTMLの断片を自由に挿入する方法です。HTMLテンプレートの構文は次のようになります。
< html > <テンプレート> < h1 > <スロット名= "タイトル" ></スロット></ h1 > < p > <スロット名= "説明" ></スロット></ p > </テンプレート> </ html >テンプレートがインスタンス化されるまでスクリプトは実行されず、テンプレート内のリソースは取得されません。[ 8 ]
ブラウザのサポート
Webコンポーネントは、すべての主要ブラウザの現在のバージョンでサポートされています。[ 9 ]
古いブラウザとの下位互換性は、JavaScriptベースのポリフィルを使用して実装されています。
図書館
カスタム要素を作成する際の抽象度を高めることを目的として、Webコンポーネント上に構築されたライブラリは数多く存在します。これらのライブラリには、X-Tag、Slim.js、Polymer、Bosonic、Riot.js、Salesforce Lightning Web Components、DataFormsJS、Telepathy、Wompoなどがあります。
コミュニティ
Webコンポーネントのエコシステムには、数多くのコミュニティ活動が存在します。WebComponents.org [ 10 ]は、既存のWebコンポーネントを検索するためのインターフェースを提供しています。Custom Elements Everywhere [ 11 ]は、主要なフロントエンドフレームワークがWebコンポーネント標準と互換性があり、使用できるかどうかを検証し、未解決のバグと利用可能な回避策を提供しています。さらに、Vaadin Tutorials [ 12 ]には、これらの回避策がサンプルデモアプリや同様の関連トピックを用いて効率的に使用されていることを示す専用セクションがあります。
歴史
2011年、WebコンポーネントはAlex RussellによってFronteersカンファレンスで初めて紹介されました。[ 13 ]
2013年に、Webコンポーネントに基づくライブラリであるPolymerがGoogleによってリリースされました。 [ 14 ] Polymerは、Webアプリケーションのユーザーインターフェースのための マテリアルデザインの標準的な実装です。
2016年には、カスタム要素用のJavaScriptライブラリとAMDローダープラグインとしてRequireJSが導入されました。[ 15 ]
2017年、Ionic（モバイルアプリフレームワーク）チームは、Webコンポーネントを生成するJavaScriptコンパイラであるStencilJSを構築しました。 [ 16 ]
2018年にAngular 6ではAngular Elementsが導入され、AngularコンポーネントをWebプラットフォームAPIのWebコンポーネントセットの一部であるカスタムWeb要素としてパッケージ化できるようになりました。[ 17 ]
2018年、Firefox 63ではWebコンポーネントのサポートがデフォルトで有効化され、開発者ツールもWebコンポーネントをサポートするように更新されました。[ 18 ]
2018年、LitElementはGoogle Chromeチームによって、より大規模なPolymerプロジェクトの一環として開発されました。LitElementは、Webコンポーネントを作成するための軽量で使いやすいフレームワークとして設計されました。
参照
参考文献
- ^ GitHub - w3c/webcomponents: Webコンポーネント仕様。、World Wide Web Consortium、2019年1月3日、2019年1月3日取得
- ^ 「Webコンポーネント」 . MDN Web Docs . 2019年1月3日閲覧。
- ^ "<template>: コンテンツテンプレート要素" . MDN Web Docs . Mozilla . 2018年7月8日閲覧。
- ^ 「カスタム要素」 . www.w3.org . 2016年12月1日閲覧。
- ^ 「What the Heck is Shadow DOM?」 Dimitri Glazkov 2011年1月15日2016年12月1日閲覧。
- ^ a b「Shadow DOM v1: 自己完結型ウェブコンポーネント | ウェブ | Google Developers」。Google Developers 。 2016年12月1日閲覧。
- ^ 「Shadow DOM」 . Mozilla Developer Network . 2016年12月1日閲覧。
- ^コミュニティ. 「テンプレート要素の紹介 — WebComponents.org」 . webcomponents.org . 2016年12月3日閲覧。
- ^ "webcomponents.org - Webコンポーネントについて議論・共有する" . www.webcomponents.org . 2020年7月22日閲覧。
- ^ 「利用可能なWebコンポーネントを検索する」。
- ^ 「Web コンポーネント標準を使用してフロントエンド フレームワークを検証する」。
- ^ 「Web コンポーネント チュートリアル」。
- ^ 「Webコンポーネントとモデル駆動型ビュー by Alex Russell · Fronteers」fronteers.nl . 2022年4月17日時点のオリジナルよりアーカイブ。2016年12月2日閲覧。
- ^ 「Webコンポーネントの現状 ★ Mozilla Hacks – Web開発者ブログ」 hacks.mozilla.org . 2016年12月2日閲覧。
- ^ 「コマースにおけるRequireJS」。
- ^ 「Web コンポーネント ソリューション: 比較」。
- ^ 「Angular 6 カスタム要素と Web コンポーネントを作成する方法」。
- ^ 「Firefox 63 の Web コンポーネントに対する開発者ツールのサポート」。
外部リンク
