メイラボ開発者ブログ

株式会社メイラボのエンジニアブログ

Web Componentsについて

f:id:soraxism:20190313222539j:plain

こんにちは。メイラボのフロントエンドエンジニアの空です。
今回から4回に渡ってWeb Componentsについて書いていきたいと思います。
「ここどうなってるの?」とか「ここ間違ってるよ」みたいなことがあれば、気軽にコメントなどいただければと思います。

今回は大元のWeb Componentsについてのお話です。

記事にした経緯

まず記事にした経緯について、「今さらWeb Componentsかよ」と思われるかもしれませんが、私は今までどちらかというとPHPなどのサーバサイド言語ばかり触れてきました。
あまり本格的にはフロントエンド側をやっていなかったのですが、現在勤めているメイラボではフロントエンド担当となり、そこで一旦CSSやSassなどの基本的な技術から見直そうと、「Web制作者のためのCSS設計の教科書」を読み進めていると、この「Web Components」についての記載がありました。
真新しい技術ではないですが、幾度となく苦しめれた「CSSの破綻」を防ぐことができるということ、また現在台頭してるVueReactといったフレームワークコンポーネントとという概念に触れられる機会だと思い、アウトプットも含め記事にすることにしました。

Web Componentsとは

Webページ / アプリケーションの中で、再利用可能なカプセル化された独自要素を作成するための仕様です。

何が解決できるのか

今までは記述が複雑なコンポーネントをWebアプリケーションで使い回したい場合、何度も同じ大量のHTMLの記述をおこなう必要がありましたが、Web Componentsを使うことによってもっと簡素にコンポーネントを使い回すことが可能となりました。

仕様

Web Componentsはそれ単独の仕様ではなく、以下の4つの技術から成り立っています。

Custom Elements

開発者独自の要素を作れる技術です。
プロパティやメソッド、イベントを持たせることも可能で、既存の要素を拡張することもできます。
APIのバージョンにv0とv1が存在し、それぞれ仕様が異なるので注意が必要です。
これからはv1の仕様で学んでいけばいいと思います。

Shadow DOM

メインのDOMツリーから分離された、独自のDOMツリーを生成する技術です。
個人的にはこれがWeb Componentsを利用する最大のメリットと思っています。
スタイルとマークアップを分離することによって再利用性を高めて、更にスタイルやスクリプトカプセル化を行うことによって他との干渉を防ぐことができます。
Custom Elementsと同様にAPIのバージョンにv0とv1が存在し、それぞれ仕様が異なります。

HTML Template

<template>要素内に既存のHTML要素やスタイル、スクリプトを含めることによって、独自のDOM要素をテンプレートとして定義することが可能です。

HTML imports

<link>要素を用いて他HTMLファイルを読み込むことができる技術です。
ただブラウザ対応状況も悪く、現在は「ES Modulesを使いましょう」ということが通念のようで、今後は非推奨となる技術なようです。

ブラウザ対応状況

Can I Useで確認すると、ブラウザの対応状況もまちまちですね。。(さすがMSとしか言えない)
サービスのターゲット層によっては本番導入は難しいところでしょうか。

まとめ

一部ブラウザの対応ができていないなどの弊害で、バンバン最前線で使っていくようなことはまだ無理かもしれませんが、Polymerなどのライブラリも多くあるようですし、Vue.jsのようなフレームワークとの親和性も高いようなので、学んでおくことに損はないかと思います。

次回からは各仕様の解説を行いたいと思います。

参考サイト