🍀

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

2 min read

背景

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

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

ウェブコンポーネンツ(Web Components)とは

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

  • Templates

  • Custom Elements

  • Shadow DOM

  • HTML Imports

それぞれ個別の技術として独立しているが、これらを合わせることで独自なUIのコンポーネント化が可能に。

Templates

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

<template>内のスクリプトの実行や画像のリソースのリクエストは自動では発生しない。

Custom Elements

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

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

拡張も可能

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

<button is"favorite-button">

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

通常のHTML要素と識別するために、Custom Elementsの命名は必ずハイフンを含める必要がある。

Shadow DOM

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

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

上記3つの技術の組み合わせは、JSで制御する必要がある。

HTML Imports

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

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

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

読み込むだけではなく、それを反映させるコードも必要。

References

Book

https://www.amazon.co.jp/Web制作者のためのCSS設計の教科書-モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法-谷-拓樹/dp/4844336355

Website

https://www.webcomponents.org/introduction

Discussion

ログインするとコメントできます