はじめに
谷拓樹さんのWEB制作者のためのCSS設計の教科書を読み、自分なりにまとめたものです。
自分のメモとして残しておきたいので、詳細を多少端折っていますので、気になる方は購入してみてください。
数回に分けて投稿する予定です。
今回で最後になります。
Webコンポーネントの可能性
HTML/CSSのコンポーネント化
現状のHTML/CSSにおける限界
世界中のフロントエンドの開発者が、他の言語よりもアプリケーションを創るための言語として貧弱なCSSと戦ってきた。その結果、OOCSSのようなアイデアや、十分に工夫されたフレームワークやガイドラインの登場によって再利用性、メンテナンス性の高いCSSのを書くことができるようになった。
しかし、ここまで色々紹介してきたものを駆使しても、本来のプログラミングに於けるコンポーネントをCSSでは実現することができない。それはCSSには他のプログラミング言語のようなスコープ化や、カプセル化といった概念が無いからである。Web Componentsはその問題の解決につながるかもしれない手段の一つである。
Web Componentsとは
Web Componentsは簡潔に言えば、名前の通り、WebのUIをコンポーネント化する為の仕様である。W3Cで仕様策定が進んでおり、各ブラウザベンダの協力もあって、少しづつブラウザに実装され始めている。
https://www.google.co.jp/chrome/browser/canary.html
↑Chromeの開発者向けブラウザ
Web Componentsの仕様
Web Componentsは単独の仕様ではなく、4つの技術で成り立っている。
- Templates
- Custom Elements
- Shadow DOM
- HTML Imports
それぞれ個別の仕様として扱うこともできるが、これらの仕様を組み合わせることによって、独自のUIコンポーネントをつくることができる。
Templates
やや複雑なサイトやアプリケーションの開発では、開発効率などのメリットからテンプレートエンジンと呼ばれるものを採用することがある。Handlebars.jsなどはその一つである。マークアップの断片をテンプレートとして、必要なときに呼び出すことができる。
そうしたテンプレートの機能をブラウザのネイティブで提供するものになる。
コンポーネントを作る上では、それを構成するマークアップとCSSをこのテンプレートに内包することになる。
Custom Elements
独自の要素（カスタム要素）を作ることができる。
つまり、のようなものや、など、現状のHTMLとして定義されていない要素を作ることができ、それらをブラウザに解釈させられるということ。単にそうした名前のタグが使えるということだけではなく、プロパティやメソッド、イベントを持たせる事ができる。
例えば、select要素をクリックすれば、オプションを選択するメニューが開き、選択ができるというような機能を独自の要素に必要に応じて実装することができる。
全く新しく要素を作るだけではなく、既存の要素を元に拡張することもできる。その際には、is属性をもたせ、値に独自の名前を入れる。
<button is=“like-button">
Shadow DOM
CSS設計において最も重要な仕様である。Shadow DOMはその名の通り、隠蔽されたDOMを作ることができるものである。
ここにカプセル化の機能を持つ。カプセル化は、あるスコープ内の処理や、値などを外部に漏らさないようにすること。
https://www.html5rocks.com/ja/tutorials/webcomponents/shadowdom/
https://www.html5rocks.com/ja/tutorials/webcomponents/shadowdom-201/
https://www.html5rocks.com/ja/tutorials/webcomponents/shadowdom-301/
HTML Imports
独自に作ったコンポーネントは再利用されることに大きな価値がある。あらゆるページ、プロジェクトで使いやすいように、パッケージにして読み込めるようにするのが、HTML Importsである。
利用イメージは、Javascriptのファイルをscriptタグで読み込んだり、CSSファイルをタグを用いて読み込んだりするのと同じ。
<head>
<link real=“import” href=“component/success-message.html">
</head>