読者です 読者をやめる 読者になる 読者になる

#daiizメモ

フレンチフライ トリュフ塩仕立て

技術ネタはてブ数が多いごはん情報

スポンサーリンク

Web Components を学ぶ #1 「Web Components とは」

web-components Polymer tech

HTML・JavaScriptの新技術「Web Components」の勉強をはじめました。学んだことを記事に残していきたいと思います。個人的な考えやメモは四角枠で囲んでいます。間違いや勘違いなどはご指摘いただけると嬉しいです。よろしくお願いします!

Web Components とは

f:id:daiiz:20140815112708p:plain

画像:WebComponents.org

  • 以下の新たなテクノロジーの総称
    1. Custom Elements
    2. Template Tag
    3. Shadow DOM
    4. HTML Imports

1. Custom Elements

  • 自分の好きな名前で好きな属性を持つHTML要素をつくることができる。
  • いちから新たな要素をつくることもできるし、既存の標準要素をパワーアップさせることもできる。
  • ブラウザに既存の要素と区別させるために要素名は「-(ハイフン)」を含む必要がある。

これまではdiv要素のidclassを使って用途を表していたが、タグ名使って同じことができるようになる

2. Template

  • HTMLのテンプレート
  • <template></template>で括った部分は自動ではレンダリングされない。
    • JavaScriptでtemplateをコピーし、テキストや画像などのリソースを埋め込んだ後にアクティベートすると、初めてロードされ、表示される。
  • プレースホルダーやデータバインディング機能は無い。

div要素にvisibility: hiddenを指定して、「JavaScriptからはこのdivにアクセスできるけれどブラウザには表示されない」ことを利用したオフスクリーンDOMよりも扱いやすそう

3. Shadow DOM

  • 要素を完全にカプセル化することができる。
    • idclassが他とコンフリクトすることがなくなる。
  • ブラウザ上での見た目は他の要素と同じだが、Shadow DOMとしてレンダリングされる。
    • Google I/Oで紹介されたMaterial Designのサンプルアプリ「paper-calculator」のレンダリングを見てみると以下のような感じでカスタムエレメントpaper-calculatorのなかにshadow-rootが生成されている。

f:id:daiiz:20140815135205p:plain

f:id:daiiz:20140815140154p:plain

  • shadow-rootのなかには"keypad"のように、idを持つ要素があることがわかるが、これらの要素にサードパーティJavaScriptからアクセスすることはできなくなっている。

f:id:daiiz:20140815140637p:plain

4. HTML Imports

  • JavaScriptCSSファイルと同様にCustom Elements、Template Tag、Shadow DOMを駆使して書かれたHTMLファイルをインポートすることができるようになる技術。<link rel="import" href="my-widget.html">のようにlinkタグを移植したいHTMLのheadに記述するだけで良い。
  • これによりHTMLファイルやHTMLとJavaScriptでつくったウィジェットを配布・移植しやすくなる。

HTMLをC言語での#includeみたいにインポートできればとても便利になる


初日はこれにて終了です!
次回はWeb Componentsの技術をより簡単に、便利に、クールに、使うことができるようになるGoogle製のライブラリ「Polymer」について調べようと思います。

参考にしたページ