🍀

Web UIのコンポーネント化に欠かせない4つの技術

2021/06/24に公開

背景

Webアプリケーション開発において再利用性及びメインテナンス性を高める事ができるのは、プログラミング言語特有のカプセル化やスコープのような概念のおかげです。

これらの概念がないHTMLやCSSでは、どのように対処すればいいのか？
そこで生まれたのが、ウェブコンポーネンツと呼ばれるものです。

ウェブコンポーネンツは、再利用性の高いカプセル化されたHTMLタグを、ウェブアプリ上で使えるようにしてくれる仕組みのことです。これを実現するために、ウェブコンポーネンツは以下の4つの技術で構成されています。

HTMLのコンテンツテンプレート要素<template>のことです。
この中にHTMLやCSSをまとめて記述しておくことでDOMとして呼び出すことが可能になります。

独自の要素(カスタム要素)を作るための技術です。
これによって、デフォルトでは定義されていない新しいHTML要素を作成・利用することが可能になります。

ここでいう"カスタム"とは、単純にタグの名前をカスタマイズできるというだけではなく、タグに付随するプロパティやイベントもカスタマイズできるという意味です。

また新たに要素を作るだけではなく、既存の要素の機能を拡張することもできます。
例えば、以下のbuttonタグ。

<button is"favorite-button">

要素内にis属性を記述し、それに独自の名前を入れることでカスタマイズできます。

DOMをカプセル化して生成するための技術です。オブジェクト指向でお馴染みのカプセル化は、特定スコープ内の処理や値が外部に漏れず、外部からのアクセスも受け付けないようにする仕様を指します。

JSにはカプセル化をするための方法は存在しますが、CSSにはありません。
Shadow DOM はこの"CSSのカプセル化"を可能にしてくれます。

上記で紹介した技術を組み合わせて作成したコンポーネントとそれを利用するための補足的な要素をひとまとめにして読み込むようにするための技術です。

CSSファイルをhead内で読み込むように、コンポーネントを<link>タグを用いて読み込みます。

<head>
<link rel="import' href="components/sample.html"
<head>