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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Hayashi Takao
April 25, 2020
86
0
Share
今日から始めるWeb Components
WebComponentsの概要に触れました。
Hayashi Takao
April 25, 2020
More Decks by Hayashi Takao
See All by Hayashi Takao
React 19×Rustツール 進化の「ズレ」を設計で埋める
remrem0090
1
100
Reactで始めるsencer入門
remrem0090
0
53
今日から始めるgithub actions
remrem0090
0
51
Reactでのマルチストア運用を考察する
remrem0090
0
230
effectorを使い倒してReduxのかわりになるか検証する
remrem0090
1
800
React code Splitting
remrem0090
1
570
Featured
See All Featured
Bash Introduction
62gerente
615
210k
Side Projects
sachag
455
43k
So, you think you're a good person
axbom
PRO
2
2k
The Director’s Chair: Orchestrating AI for Truly Effective Learning
tmiket
1
160
Documentation Writing (for coders)
carmenintech
77
5.3k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
231
23k
Measuring Dark Social's Impact On Conversion and Attribution
stephenakadiri
2
190
RailsConf 2023
tenderlove
30
1.4k
4 Signs Your Business is Dying
shpigford
187
22k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
659
62k
Evolving SEO for Evolving Search Engines
ryanjones
0
190
Bootstrapping a Software Product
garrettdimon
PRO
307
120k
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は未来のフロントエンドの実装を表現してくれる。