Web Componentsはこわくない
こんにちは。FORCASでUIデザインを担当しているおくだです。
みなさんはWeb Componentsをご存知でしょうか？
デザイナーの皆さんなら一度は耳にしたことがあると思います。
私はコーディングもするのですが、触れたことはあるんです。
しかしWeb Componentsが一体何なのか、どういったものなのか全然理解していませんでした。
「こりゃまずいぞ」と思い始めてはや数ヶ月。noteの当番が回ってきたので良い機会だぞということで重い腰を上げて調べてみることにしました。
が。いろんな記事やドキュメントを読んだのですが、文字ばっかりでよくわからない。結構コアなことも書いてあったりして、初心者向けにはちょっと難しい気がしました。加えて、「知らないもの＝怖い」というイメージもあって、読んでもなんだか頭に入ってこない、理解できない。
もっとさらっと知りたい。
きっとそう思ったことのあるデザイナーさんは私だけではないはず！
そんな思いから、この記事では、読んでくださった方が
「Web Components全くわからん、怖い」から
「Web Components何となく分かる、怖くない」状態になることを目的に書いていきたいと思います。
はじめに
Web Componentを簡単に言葉にすると
「HTMLのパーツを再利用可能にするブラウザのAPI群」です。
Custom Elements、HTML Templates、Shadow DOM
という3つの機能で構成されています。現段階では「ライブラリ不要でコンポーネントが作れる機能の総称」くらいの理解で大丈夫です。
では、順番に機能を紹介していきます。
動かそう - Custom Elements機能
動かしてみましょう。はい、これがCustom Elementsです。シンプル。
Custom Elementsは、「自分でHTMLタグか作れる」機能です。
HTMLの中にあるこれ↓
<hello-web-components>Web Componentsだよ！</hello-web-components><hello-web-components>っていうのが自分で作ったHTMLタグです。それをjsの中で登録しています。
動かそう - HTML Templates機能
さて、自分でHTMLタグが作れる！ということはわかったのですが、これをどうやって再利用しようか。そこでHTML Templates機能です。
「Web Componentsだよ！」が2回出てますね。再利用成功です。さて、ここでちょっと「機能」という言葉に違和感が。そうです。HTML Templatesは機能というか、テンプレート用のHTMLタグ、というイメージのほうが近いかも知れません。それをクローンして再利用しているだけです。シンプル。
動かそう - Shadow DOM機能
再利用できるようになったけど、Class名とかバッティングしない？全部CSSの設計に任せるのしんどくない？そこで Shadow DOM機能です。
「Web Componentsだよ！」が3回出力されていて、同じHTML要素なのに一番最後だけCSSがあたっておらず、文字が黒いですね。Shadow DOM成功です。
Shadow DOM機能とは、DOM要素をカプセルしてくれる機能です。
カプセル化されるとスコープ外のCSSが無効になるのです。CSSの設計に頼らず、セレクタの影響範囲を絞ることができますね。
これがWeb Components
はい、ここまでがWeb Componentsです。
ゆっくり紐解いていけば思ったよりシンプルで（深堀りしていけばとてもむずかしいと思いますが）、なによりとても便利な機能だなと思いました。
どうでしょう、「Web Components何となく分かる、怖くない」となっていただけたでしょうか。
そして、やっぱり実装は楽しいな〜！と思っていただけたら嬉しいです。
読んでいただいてありがとうございました。
DESIGN BASEの記事はこちらからどうぞ👇これからもたくさん更新される予定なので、是非チェックしてみてください。