最近 Web Components という言葉を耳にする機会が増えました。
この記事には、Web Components の概要と、React や Vue.js などのコンポーネント指向のフレームワークとの違い、iframe との違いを簡単にまとめました。
Web Components の概要
コンポーネント指向とは
まず前提となるコンポーネント指向について簡単に説明します。
最近の Web フロントエンド開発では、React や Vue.js といったコンポーネント指向のフレームワークが使われる場合が多いです。
コンポーネント指向のフレームワークでは、<my-button> といった独自の HTML タグを作成します。
<my-button> などのコンポーネントは、構造・見た目・挙動 (HTML・CSS・JavaScript) を持っており、各所でコンポーネントを再利用することで、HTML・CSS・JavaScript を一箇所で定義することを可能にします。
また、通常の HTML タグと同様、<my-button onclick="xxx"> のようにして、外部から与えた属性で挙動などを変えられるようにすることも多いです。
コンポーネント指向により、画面を構成する要素を部品化するアトミック・デザインを実装に落とし込むことも可能になります。
Web Components とは
Web Components | MDN によると、
Web Components は、再利用可能なカスタム要素を作成し、ウェブアプリの中で利用するための、一連のテクノロジーです。コードの他の部分から独立した、カプセル化された機能を使って実現します。
とのことです。
ざっくり言うと、<my-button> のようなコンポーネントの定義をフレームワークに依存せずに可能にするのが「Web Components」です。
この記事ではコンポーネントの具体的な作り方についてはふれませんが、Web Components でコンポーネントを作成する方法は、React などでコンポーネントを作るのとかなり近いです。
機能としても React や Vue.js でコンポーネントを作成するときと似たものが提供されています。 例えば HTML 属性 (props) の定義であったり、テンプレートの記述方法、slot (children) によって外部から子要素を与える方法などが定められています。
要するに、React や Vue.js などのフレームワークがそれぞれ独自にしていたコンポーネント定義方法を標準化した技術が「Web Components」です。
ちなみに、Web Components のコンポーネントは、webcomponents.org で公開されていたりします。
Web Components と React や Vue.js の違い
上記のようにコンポーネントの定義方法を標準化した技術が Web Components なのですが、逆に言えば、Web Components はコンポーネント化の技術でしかなく、React や Vue.js が持つ機能の全てを持っている訳ではありません。
例えば、データバインディングであったり、Redux や Vuex による状態管理などは提供されていません。
Web Components では、データバインディングは Polymer などのライブラリで実現したり、状態管理には Redux を使ったりすることになります。
iframe との違い
最後に、iframe との違いを説明します。 Web Components について調べるまで、私は iframe との違いは何だろうと思っていました。
Web Components と iframe の違いを調べると、「iframe は要素外から要素内に干渉できないが、Web Components はできる」などの説明がされる場合があります。
これは挙動の違いとして間違ってはいないのですが、そもそも Web Components と iframe はどちらか選ぶといったものではありません。 根本的に使い道が違うのです。
Web Component はボタンなどの要素をコンポーネント化するための技術です。 一方で、iframe は他の Web ページを自分のページ内に組み込む技術です。
ですので、Web Components と iframe でどちらが優れているといった話ではなく、用途によって使い分けることになります。
参考
書籍
Web
