Web Componentsとは
今回はWeb Componentsについて自分の理解も深めるために書いていきます。
Web Componentsについては公式サイトにおいて下記のように説明されています。
Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML.
簡単にいうとWeアプリケーションなどで共通となる部品を独自のタグを使っていつでも呼び出せる(使える)ようにしようといった意味になります。
headerタグやfooterなどは何を意味しているのか視覚的にわかりますが、divタグとか見ても作った本人ならまだしも、他の人がそのコードを見た時にどのような意味なのか実際に表示されたものと照らし合わせて見ないとわかりずらいですよね？
ReactやVueなどは共通部品となるものなどをコンポーネント化してそれぞれ役割に合った命名をするかと思います。また大切なのはそれぞれが独立しても機能するために、HTML/CSS/JavaScriptなどを一つのスコープとしてコンポーネント化します。そうすることで例えばCSSのグローバルスコープの汚染問題を回避することができます。
また更に重要なこととしてWeb Componentsはブラウザの標準の機能を使用するので特別なビルド環境などが不要になります。
ではここでWeb Componentsを構成する4つの要素について説明していきたいと思います。
1 Custom Elements
Custom ElementsとはHTMLのタグに独自の名前をつけることができるものです。すでにこのことについては言及しましたが、divタグなどがたくさんある時よりもheaderやfooterなど役割をもたせ、視覚的にわかりやすい方がコーディングがしやすいです。
文書構造に意味付けとして非常に大切な要素だと思います。
2 Shadow DOM
CSS スコープ、DOM カプセル化、コンポジションなどを活用し、Custom Elementsで新しいHTMLを作成します。したがってShadow DOMだけでェブ コンポーネントを作成するわけではありません。 詳細を知りたい方はこちらを参考にしてみてください。
3 HTML Imports
CSSやJavaScriptなどを含むHTMLファイルを一つのモジュールとしてロードすることができる仕組みです。
4 HTML Template
普段使用しているタグなどを<template>要素で囲い、テンプレートを宣言します。宣言するだけでは実際に描画されません。JavaScriptなどを使用することでテンプレートを描画します。
Web Componentsは上の４つの仕様から構成されています。 実際に手を動かしてみないと実感が湧かないと思いますので次回はコードを例にしながらWeb Componentsの理解を深めていこうと思います。
