LitElementとWeb Componentsの比較 #meguroes

LitElementとWeb Componentsの比較 Wataru Taguchi

アジェンダ - 自己紹介 - Web Componentsとは - LitElementとは - Todoリスト
- 比較 - 所感 - Q&A - まとめ

自己紹介 # Wataru Taguchi - GameWith Front End Engineer -
PWAとかWeb Componentsとかパフォーマンスチューニングが好き - @tiwu_official - FF14, Beer, Kyoto Animation

Web Componentsとは Vanilla JS、HTML、CSS を使用して再利用可能なコンポーネントを作成する仕組み

- ライブラリに依存せずコンポーネントを作成できる - ビルド作業はない - どんなサイトでも動く - Scoped CSSが書ける -
命名ルール地獄からの解放メリット

- カスタム要素 - 新しくHTMLタグを作成する - Shadow DOM - DOMを隠すことができる Web
Componentsを構成する技術

シンプルなボタン

シンプルなボタン text属性を利用し表示 cssとHTMLをまとめて配布する

LitElementとは軽量で高速なWebコンポーネントをつくるシンプルなベースクラス

- 宣言的に書ける - 要素は、プロパティが変更されると自動的に更新される - 軽い - lit-htmlが変更されたデータのみを再描画するため、DOMの更新は非常に高速 -
Web Componentsに準拠している - どのフレームワークでも動く - TypeScriptでも書けるメリット

LitElementのサンプル

Todoリスト https://lit-element-sample.netlify.com/

Todoリスト my-todo my-list my-item my-input

Todoリスト my-todo my-list my-item my-input 入力

Todoリスト my-todo my-list my-item my-input 入力 CustomEvent発火

Todoリスト my-todo my-list my-item my-input 入力 CustomEvent発火入力された値を受け取って listに追加＆LSに追加

Todoリスト my-todo my-list my-item my-input 入力 CustomEvent発火入力された値を受け取って listに追加＆LSに追加
リスト更新

Todoリスト my-todo my-list my-item my-input 削除

Todoリスト my-todo my-list my-item my-input 削除 CustomEvent発火

Todoリスト my-todo my-list my-item my-input 削除 CustomEvent発火 CustomEvent発火

Todoリスト my-todo my-list my-item my-input 削除 CustomEvent発火 indexを元にlistから削除＆LSに追加 CustomEvent発火

Todoリスト my-todo my-list my-item my-input 削除 CustomEvent発火 CustomEvent発火 indexを元にlistから削除＆LSに追加
リスト更新

比較 my-input addEventListenerを利用し、イベントを付与 inputのvalueは直接DOM弄りを空にする

比較 my-input @clickを利用し、イベントを付与 inputのvalueは直接DOMは弄らず空にする

比較 my-item addEventListenerを利用し、イベントを付与 indexはattributeから取得

比較 my-item @clickを利用し、イベントを付与 indexはClassの変数から取得

比較 my-list observedAttributesを利用しlistプロパティの変更を監視 attributeChangedCallbackで変更があったら、my-itemを削除して新しいlistを元にmy-itemをDOMに挿入する my-itemにdeleteイベントを貼って、 deleteイベントを再度発火させる

比較 my-list this.list.mapを利用してmy-itemを表示させる @my-delete-eventでイベントを貼って、再度発火させる

比較 my-todo listはJSON.stringifyを使ってJSON文字列にして”をエスケープさせる listの追加、削除があったらsetAttributeを使って,リストを描画させる

比較 my-todo JSON文字列はエスケープ無しで問題なし list変数に変更を加えるだけで、リストの再描画が走る ※ filterではなくspliceを利用し削除したら再描画は走らなかった

- 動的な値の変更・描画はLitElementが楽 - LitElementはcssの補完が効かないのが辛い - bundle size - web components
1.5kb - LitElement 7.7kb 所感

- https://www.youtube.com/ - https://voice.ameba.jp/ - https://support.pairs.lv/hc/ja/ - 日経電子版（現在リニューアル中）事例

Q : 対応ブラウザは？ A : Edge以外大丈夫 Q&A

Q : Edgeどうすれば・・？ A : Chromiumベースになるから大丈夫だろう・・・ Q&A

Q : クライアントサイドでレンダリングされるということは SEOが・・・ A : Google I/Oで最新Chromiumレンダリングエンジンをサポートすることが発表されたから大丈夫 Q&A

- ライブラリに依存せずコンポーネントが作れる - Scoped CSSが書ける - LitElementは結構便利 - ただ描画周りは気をつける必要あり -
結構大手のサイトで使われているまとめ

Web Components / LitElement はいいぞ

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

LitElementとWeb Componentsの比較 #meguroes

LitElementとWeb Componentsの比較 #meguroes

More Decks by tiwu

Other Decks in Technology

Featured

Transcript