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
今日から始めるWeb Components
Search
Hayashi Takao
April 25, 2020
0
74
今日から始めるWeb Components
WebComponentsの概要に触れました。
Hayashi Takao
April 25, 2020
Tweet
Share
More Decks by Hayashi Takao
See All by Hayashi Takao
Reactで始めるsencer入門
remrem0090
0
48
今日から始めるgithub actions
remrem0090
0
43
Reactでのマルチストア運用を考察する
remrem0090
0
220
effectorを使い倒してReduxのかわりになるか検証する
remrem0090
1
770
React code Splitting
remrem0090
1
550
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
173
14k
Fireside Chat
paigeccino
39
3.6k
Writing Fast Ruby
sferik
628
62k
BBQ
matthewcrist
89
9.8k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
13k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
RailsConf 2023
tenderlove
30
1.2k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
Six Lessons from altMBA
skipperchong
28
4k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
51
5.6k
Transcript
今日から始める Web components
アジェンダ - 自己紹介 - Web Componentsとは - Web Componentsの仕様 -
Web Componentsのつかいどころ - Web Componentsとライブラリ - 実際の書き方
自己紹介 林 恭央 / Hayashi Takao @www_REM_zzz takao-h Software Engineer
/ Scala, Java, TypeScript
Web Componentsとは? Web Componentsはwebページやwebアプリの中でカスタムUIの制御の使いまわしを 可能にする一連のテクノロジーです。 カプセル化された機能をつかってカスタムUIの再利用を実現します。
Web Componentsの仕様 Custom Element : 新しいタイプのDOM要素の設計と利用の基盤 Shadow DOM : カプセル化したスタイルとマークアップの利用法の定義をする
HTML import : HTMLと他のHTMLの取り込みを可能にする HTML Template : マークアップのフラグメントを宣言する
Custom Element
Custom Element
HTML import
HTML Template
Web Componentsとライブラリ 各種フロントエンドのライブラリとの共存が一応できる。 特にVue.jsでは相性がいい。 だが問題もある。 Reactにおいては関数を渡すときに宣言的に書くことができない。
まとめ - Web Componentsはカプセル化を含む一連の技術を使ってカスタムUIの使いまわ しを可能にしてれる。 - グローバルなUIの表示に向いている。 - Web Componentsは未来のフロントエンドの実装を表現してくれる。