Slide 1
Slide 1 text
Web Components とLitElement
Wataru Taguchi
Slide 2
Slide 2 text
アジェンダ
- 自己紹介
- Web Components
- LitElement
- 比較
- 使ってみたツラミ
- まとめ
Slide 3
Slide 3 text
# Wataru Taguchi
- GameWith Engineer
- PWA, Web Components, AMP
- パフォーマンスチューニングが好き
- @tiwu_official
- FF14, ストファイ5, Beer, Kyoto Animation
自己紹介
Slide 4
Slide 4 text
Web Componentsとは
Vanilla JS、HTML、CSS を使用して
再利用可能なコンポーネントを作成する仕組み
Slide 5
Slide 5 text
例
https://informal-gotanda-js-web-components.netlify.com/
Slide 6
Slide 6 text
例
Slide 7
Slide 7 text
例
Slide 8
Slide 8 text
- ライブラリに依存せずコンポーネントを作成できる
- どんなサイトでも動く
- Scoped CSSが書ける
- 命名ルール地獄からの解放
- 外から影響を受けない
- css の影響を受けない
- document.querySelectorで取得できない
メリット
Slide 9
Slide 9 text
- カスタム要素
- 新しくHTMLタグを作成する
- Shadow DOM
- DOMを隠すことができる
Web Componentsを構成する技術
Slide 10
Slide 10 text
- customElements.define()
- 新しいタグを定義することができる
- 新しいタグは必ずダッシュ（-）が必要
- 例：○hoge-button × hogebutton
カスタム要素
Slide 11
Slide 11 text
- attachShadow()
- Shadow DOMを取得できる
- innerHTMLやappendChildを利用して追加ができる
Shadow DOM
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
ネイティブ要素の拡張
Slide 15
Slide 15 text
https://web-components-sample.netlify.com/
いろいろなWeb Copmonents
Slide 16
Slide 16 text
シンプルなボタン
Slide 17
Slide 17 text
シンプルなボタン
text属性を利用し表示
cssとHTMLをまとめて配布する
Slide 18
Slide 18 text
シンプルなボタン
Slide 19
Slide 19 text
シンプルなボタン
slotを利用して表示
imgやpやspanとか利用できる
Slide 20
Slide 20 text
遷移に使ってみたり
Slide 21
Slide 21 text
遷移に使ってみたり
blue-buttonを利用してaでラップする
遷移先とテキストは属性を使って渡す
Slide 22
Slide 22 text
任意の処理するボタンにしてみたり
Slide 23
Slide 23 text
任意の処理するボタンにしてみたり
ロジックも閉じ込めて配布する
Slide 24
Slide 24 text
条件分岐いれてみたり
Slide 25
Slide 25 text
条件分岐いれてみたり
多彩な振る舞いのコンポーネントも作
れる
Slide 26
Slide 26 text
LitElementとは
軽量で高速なWebコンポーネントをつくる
シンプルなベースクラス
Slide 27
Slide 27 text
- 宣言的に書ける
- 要素は、プロパティが変更されると自動的に更新される
- 軽い
- lit-htmlが変更されたデータのみを再描画するため、DOMの更新は非常に高
速
- Web Componentsに準拠している
- どのフレームワークでも動く
- TypeScriptでも書ける
メリット
Slide 28
Slide 28 text
LitElementのサンプル
Slide 29
Slide 29 text
Todoリスト
https://lit-element-sample.netlify.com/
Slide 30
Slide 30 text
Todoリスト
my-todo
my-list
my-item
my-input
Slide 31
Slide 31 text
Todoリスト
my-todo
my-list
my-item
my-input
入力
Slide 32
Slide 32 text
Todoリスト
my-todo
my-list
my-item
my-input
入力
CustomEvent発火
Slide 33
Slide 33 text
Todoリスト
my-todo
my-list
my-item
my-input
入力
CustomEvent発火
入力された値を受け取って listに追加
＆LSに追加
Slide 34
Slide 34 text
Todoリスト
my-todo
my-list
my-item
my-input
入力
CustomEvent発火
入力された値を受け取って listに追加
＆LSに追加
リスト更新
Slide 35
Slide 35 text
Todoリスト
my-todo
my-list
my-item
my-input
削除
Slide 36
Slide 36 text
Todoリスト
my-todo
my-list
my-item
my-input
削除
CustomEvent発火
Slide 37
Slide 37 text
Todoリスト
my-todo
my-list
my-item
my-input
削除
CustomEvent発火
CustomEvent発火
Slide 38
Slide 38 text
Todoリスト
my-todo
my-list
my-item
my-input
削除
CustomEvent発火
indexを元にlistから削除
＆LSに追加
CustomEvent発火
Slide 39
Slide 39 text
Todoリスト
my-todo
my-list
my-item
my-input
削除
CustomEvent発火
CustomEvent発火
indexを元にlistから削除
＆LSに追加
リスト更新
Slide 40
Slide 40 text
比較 my-input
addEventListenerを利用し、イベントを付与
inputのvalueは直接DOM弄りを空にする
Slide 41
Slide 41 text
比較 my-input
@clickを利用し、イベントを付与
inputのvalueは直接DOMは弄らず空にする
Slide 42
Slide 42 text
比較 my-item
addEventListenerを利用し、イベントを付与
indexはattributeから取得
Slide 43
Slide 43 text
比較 my-item
@clickを利用し、イベントを付与
indexはClassの変数から取得
Slide 44
Slide 44 text
比較 my-list
observedAttributesを利用しlistプロ
パティの変更を監視
attributeChangedCallbackで変更
があったら、my-itemを削除して新し
いlistを元にmy-itemをDOMに挿入
する
my-itemにdeleteイベントを貼って、
deleteイベントを再度発火させる
Slide 45
Slide 45 text
比較 my-list
this.list.mapを利用してmy-itemを表示させる
@my-delete-eventでイベントを貼って、再度発火させる
Slide 46
Slide 46 text
比較 my-todo
listはJSON.stringifyを使ってJSON文字列にして”をエスケープさせる
listの追加、削除があったらsetAttributeを使って,リストを描画させる
Slide 47
Slide 47 text
比較 my-todo
JSON文字列はエスケープ無しで問題なし
list変数に変更を加えるだけで、リストの再描画が走る
※ filterではなくspliceを利用し削除したら再描画は走らなかった
Slide 48
Slide 48 text
- 動的な値の変更・描画はLitElementが楽
- LitElementはcssの補完が効かないのが辛い
- bundle size
- web components 1.5kb
- LitElement 7.7kb
所感
Slide 49
Slide 49 text
- https://www.youtube.com/
- https://voice.ameba.jp/
- https://support.pairs.lv/hc/ja/
- 日経電子版（現在リニューアル中）
事例
Slide 50
Slide 50 text
使ってみたツラミ
https://the-my-best-todo-list.site/
Slide 51
Slide 51 text
- input をShadow DOM 使って装飾ができない
- form でinput のvalue を拾えない
- ネイティブ要素でinput を拡張してみた
- Shadow DOM を生やせない
- https://developer.mozilla.org/ja/docs/Web/API/Element/attachShado
w
使ってみたツラミ
Slide 52
Slide 52 text
- slot を使ってパワープレイで装飾した
使ってみたツラミ
Slide 53
Slide 53 text
- slot を使ってパワープレイで装飾した
使ってみたツラミ
Slide 54
Slide 54 text
- 外部ライブラリが動かない
- （当たり前だけど）Shadow DOM 内だと動かない
- slot でパワープレイ
使ってみたツラミ
Slide 55
Slide 55 text
- slot の装飾が1階層しか効かない
使ってみたツラミ
Slide 56
Slide 56 text
Q : 対応ブラウザは？
A : Edge以外大丈夫
Q&A
Slide 57
Slide 57 text
Q : Edgeどうすれば・・？
A : Chromiumベースになるから大丈夫だろう・・・
Q&A
Slide 58
Slide 58 text
Q : クライアントサイドでレンダリングされるということは
SEOが・・・
A : Google I/Oで最新Chromiumレンダリングエンジンを
サポートすることが発表されたから大丈夫
Q&A
Slide 59
Slide 59 text
- ライブラリに依存せずコンポーネントが作れる
- Scoped CSSが書ける
- LitElementは結構便利
- ただ描画周りは気をつける必要あり
- 結構大手のサイトで使われている
まとめ
Slide 60
Slide 60 text
Web Components / LitElement
はいいぞ
Slide 61
Slide 61 text
ご清聴ありがとうございました