Web Componentsとlit-element #frontkansai
by
tiwu
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
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
ご清聴ありがとうございました