Slide 1
Slide 1 text
LitElementとWeb Componentsの比較
Wataru Taguchi
Slide 2
Slide 2 text
アジェンダ
- 自己紹介
- Web Componentsとは
- LitElementとは
- Todoリスト
- 比較
- 所感
- Q&A
- まとめ
Slide 3
Slide 3 text
自己紹介
# Wataru Taguchi
- GameWith Front End Engineer
- PWAとかWeb Componentsとかパフォーマンス
チューニングが好き
- @tiwu_official
- FF14, Beer, Kyoto Animation
Slide 4
Slide 4 text
Web Componentsとは
Vanilla JS、HTML、CSS を使用して
再利用可能なコンポーネントを作成する仕組み
Slide 5
Slide 5 text
- ライブラリに依存せずコンポーネントを作成できる
- ビルド作業はない
- どんなサイトでも動く
- Scoped CSSが書ける
- 命名ルール地獄からの解放
メリット
Slide 6
Slide 6 text
- カスタム要素
- 新しくHTMLタグを作成する
- Shadow DOM
- DOMを隠すことができる
Web Componentsを構成する技術
Slide 7
Slide 7 text
シンプルなボタン
Slide 8
Slide 8 text
シンプルなボタン
text属性を利用し表示
cssとHTMLをまとめて配布する
Slide 9
Slide 9 text
LitElementとは
軽量で高速なWebコンポーネントをつくる
シンプルなベースクラス
Slide 10
Slide 10 text
- 宣言的に書ける
- 要素は、プロパティが変更されると自動的に更新される
- 軽い
- lit-htmlが変更されたデータのみを再描画するため、DOMの更新は非常に高
速
- Web Componentsに準拠している
- どのフレームワークでも動く
- TypeScriptでも書ける
メリット
Slide 11
Slide 11 text
LitElementのサンプル
Slide 12
Slide 12 text
Todoリスト
https://lit-element-sample.netlify.com/
Slide 13
Slide 13 text
Todoリスト
my-todo
my-list
my-item
my-input
Slide 14
Slide 14 text
Todoリスト
my-todo
my-list
my-item
my-input
入力
Slide 15
Slide 15 text
Todoリスト
my-todo
my-list
my-item
my-input
入力
CustomEvent発火
Slide 16
Slide 16 text
Todoリスト
my-todo
my-list
my-item
my-input
入力
CustomEvent発火
入力された値を受け取って listに追加
＆LSに追加
Slide 17
Slide 17 text
Todoリスト
my-todo
my-list
my-item
my-input
入力
CustomEvent発火
入力された値を受け取って listに追加
＆LSに追加
リスト更新
Slide 18
Slide 18 text
Todoリスト
my-todo
my-list
my-item
my-input
削除
Slide 19
Slide 19 text
Todoリスト
my-todo
my-list
my-item
my-input
削除
CustomEvent発火
Slide 20
Slide 20 text
Todoリスト
my-todo
my-list
my-item
my-input
削除
CustomEvent発火
CustomEvent発火
Slide 21
Slide 21 text
Todoリスト
my-todo
my-list
my-item
my-input
削除
CustomEvent発火
indexを元にlistから削除
＆LSに追加
CustomEvent発火
Slide 22
Slide 22 text
Todoリスト
my-todo
my-list
my-item
my-input
削除
CustomEvent発火
CustomEvent発火
indexを元にlistから削除
＆LSに追加
リスト更新
Slide 23
Slide 23 text
比較 my-input
addEventListenerを利用し、イベントを付与
inputのvalueは直接DOM弄りを空にする
Slide 24
Slide 24 text
比較 my-input
@clickを利用し、イベントを付与
inputのvalueは直接DOMは弄らず空にする
Slide 25
Slide 25 text
比較 my-item
addEventListenerを利用し、イベントを付与
indexはattributeから取得
Slide 26
Slide 26 text
比較 my-item
@clickを利用し、イベントを付与
indexはClassの変数から取得
Slide 27
Slide 27 text
比較 my-list
observedAttributesを利用しlistプロ
パティの変更を監視
attributeChangedCallbackで変更
があったら、my-itemを削除して新し
いlistを元にmy-itemをDOMに挿入
する
my-itemにdeleteイベントを貼って、
deleteイベントを再度発火させる
Slide 28
Slide 28 text
比較 my-list
this.list.mapを利用してmy-itemを表示させる
@my-delete-eventでイベントを貼って、再度発火させる
Slide 29
Slide 29 text
比較 my-todo
listはJSON.stringifyを使ってJSON文字列にして”をエスケープさせる
listの追加、削除があったらsetAttributeを使って,リストを描画させる
Slide 30
Slide 30 text
比較 my-todo
JSON文字列はエスケープ無しで問題なし
list変数に変更を加えるだけで、リストの再描画が走る
※ filterではなくspliceを利用し削除したら再描画は走らなかった
Slide 31
Slide 31 text
- 動的な値の変更・描画はLitElementが楽
- LitElementはcssの補完が効かないのが辛い
- bundle size
- web components 1.5kb
- LitElement 7.7kb
所感
Slide 32
Slide 32 text
- https://www.youtube.com/
- https://voice.ameba.jp/
- https://support.pairs.lv/hc/ja/
- 日経電子版（現在リニューアル中）
事例
Slide 33
Slide 33 text
Q : 対応ブラウザは？
A : Edge以外大丈夫
Q&A
Slide 34
Slide 34 text
Q : Edgeどうすれば・・？
A : Chromiumベースになるから大丈夫だろう・・・
Q&A
Slide 35
Slide 35 text
Q : クライアントサイドでレンダリングされるということは
SEOが・・・
A : Google I/Oで最新Chromiumレンダリングエンジンを
サポートすることが発表されたから大丈夫
Q&A
Slide 36
Slide 36 text
- ライブラリに依存せずコンポーネントが作れる
- Scoped CSSが書ける
- LitElementは結構便利
- ただ描画周りは気をつける必要あり
- 結構大手のサイトで使われている
まとめ
Slide 37
Slide 37 text
Web Components / LitElement
はいいぞ
Slide 38
Slide 38 text
ご清聴ありがとうございました