Web Components

● 自己紹介
● Web Componentsとは
● コンポーネントの利用
● オリジナルコンポーネントの作成
アジェンダ

自己紹介
名前：田口航
職業：フロントエンジニア
一言：LPIC勉強中・・・

今日の発表内容
Web Components!
https://www.webcomponents.org/

Web Componentsとは
Googleが提唱しているWebのUIを部品化するプロジェクト。
W3Cが仕様を策定しています。
VueとかReactとかがコンポーネント化しているけど
きっとこれがフロントの標準になると思ってます。

Web Components使い方
例）
<link rel="import" href="original-button.html">
・・・
<original-button></original-button>

Web Componentsとは
下記4つの要素で構成されています
● Custom Elements
● Shadow DOM
● HTML Imports
● HTML Template

独自要素を定義することができる仕様
var XFoo = document.registerElement('x-foo');
document.body.appendChild(new XFoo());
Custom Elements

CSSをカプセル化する仕様
var root = document.querySelector('div').createShadowRoot();
root.innerHTML = '<style>h3{ color: red; }</style>' + '<h3>Shadow DOM</h3>';
Shadow DOM

他のHTMLを読み込む仕様
<link rel="import" href="/path/to/imports/stuff.html">
HTML Imports

JSで利用できるテンプレートの仕様
<template id="mytemplate">
<img src="" alt="great image">
<div class="comment"></div>
</template>
HTML Template

HTML TemplateでHTMLを記述し
Shadow DOMでCSSをカプセル化し
Custom Elementsで記述したHTMLを要素として定義し
HTML Importsで読み込み、利用する
組み合わせる

Web Componentsにはいろいろなコンポーネントが利用でき
る。
今回絵文字が降るemoji-rainを実際に利用してみます。
※確認にはwebサーバーが必要です
コンポーネントの利用

コンポーネントのインストール
インストールはbowerを利用
mkdir emoji-rain-demo && cd emoji-rain-demo
bower install emoji-rain

コンポーネントの読み込み
webcomponents-lite.jsは必須で読み込む。
その後、利用するコンポーネントを読み込む。
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="bower_components/emoji-rain/emoji-rain.html">

コンポーネント利用
読み込み後通常のHTMLタグと同じく利用する。
<emoji-rain active></emoji-rain>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>zomg</title>
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="bower_components/emoji-rain/emoji-rain.html">
</head>
<body>
<emoji-rain active></emoji-rain>
</body>
</html>

独自でWeb Componentsを作ることは可能。
しかしかなり大変・・・
そこで、Googleが開発しているPolymerというライブラリを
使います。
https://www.polymer-project.org/
オリジナルコンポーネント

Polymer CLIを利用して作っていきます。
Polymer CLIのインストールとコンポーネントのディレクトリ作成
npm install polymer-cli
mkdir my-elm && cd my-elm

コンポーネントを作成します。
何を作るか選択肢が出るので「polymer-2-element」を選択
し、コンポーネント名と説明を入力し完了。
polymer init

作成が完了するといくつかファイルとディレクトリが作成
されます。
先程入力したコンポーネント名.htmlがオリジナルコンポー
ネントです。

コンポーネントの確認はpolymer serveコマンドで確認でき
ます。
表示された「http://localhost:8080/components/｛コンポー
ネント名｝/demo/」にアクセスすると確認できます。

まとめ
● W3Cが仕様を策定している部品化プロジェクト
● 4つの仕様を組み合わせている
● 既にいろいろ配布されている
● Polymerを使うと簡単に作成できる

ご清聴ありがとうございました

Web Components

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Web Components

Similar to Web Components (20)

Web Components

Editor's Notes