Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
LitElementとWeb Componentsの比較 #meguroes
Search
tiwu
June 06, 2019
Technology
1
680
LitElementとWeb Componentsの比較 #meguroes
Meguro.es # 21 @ ビザスク
で登壇した資料です
https://lit-element-sample.netlify.com/
tiwu
June 06, 2019
Tweet
Share
More Decks by tiwu
See All by tiwu
Eleventy で SSG
tiwu_dev
2
680
Eleventy - 11ty
tiwu_dev
0
140
Install for PWA
tiwu_dev
0
1.3k
App Shortcuts
tiwu_dev
0
890
Web Vitals
tiwu_dev
0
71
Web Share API
tiwu_dev
0
1.4k
Badge in Background
tiwu_dev
0
71
PWAとCache API #frontkansai
tiwu_dev
5
2.1k
Web Componentsとlit-element #frontkansai
tiwu_dev
2
1.5k
Other Decks in Technology
See All in Technology
Claude Code でアプリ開発をオートパイロットにするためのTips集 Zennの場合 / Claude Code Tips in Zenn
wadayusuke
5
760
ブロックテーマ時代における、テーマの CSS について考える Toro_Unit / 2025.09.13 @ Shinshu WordPress Meetup
torounit
0
130
まずはマネコンでちゃちゃっと作ってから、それをCDKにしてみよか。
yamada_r
2
120
RSCの時代にReactとフレームワークの境界を探る
uhyo
10
3.5k
MagicPod導入から半年、オープンロジQAチームで実際にやったこと
tjoko
0
110
AIのグローバルトレンド2025 #scrummikawa / global ai trend
kyonmm
PRO
1
310
株式会社ログラス - 会社説明資料【エンジニア】/ Loglass Engineer
loglass2019
4
65k
20250912_RPALT_データを集める→とっ散らかる問題_Obsidian紹介
ratsbane666
0
100
DroidKaigi 2025 Androidエンジニアとしてのキャリア
mhidaka
2
380
Oracle Cloud Infrastructure IaaS 新機能アップデート 2025/06 - 2025/08
oracle4engineer
PRO
0
110
S3アクセス制御の設計ポイント
tommy0124
3
200
Webアプリケーションにオブザーバビリティを実装するRust入門ガイド
nwiizo
7
880
Featured
See All Featured
Writing Fast Ruby
sferik
628
62k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.6k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
113
20k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
How to Ace a Technical Interview
jacobian
279
23k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
What's in a price? How to price your products and services
michaelherold
246
12k
Transcript
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 はいいぞ
ご清聴ありがとうございました