Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
今日から始める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
110
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
今日から始めるWeb Components
WebComponentsの概要に触れました。
Hayashi Takao
April 25, 2020
Transcript
11 slides
今日から始める 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は未来のフロントエンドの実装を表現してくれる。
More Decks by Hayashi Takao
See All by Hayashi Takao
React 19×Rustツール 進化の「ズレ」を設計で埋める
remrem0090
1
150
Reactで始めるsencer入門
remrem0090
0
83
今日から始めるgithub actions
remrem0090
0
66
Reactでのマルチストア運用を考察する
remrem0090
0
250
effectorを使い倒してReduxのかわりになるか検証する
remrem0090
1
840
React code Splitting
remrem0090
1
600
Featured
See All Featured
KATA
mclloyd
PRO
35
16k
The Illustrated Guide to Node.js - THAT Conference 2024
reverentgeek
1
610
Building the Perfect Custom Keyboard
takai
2
960
YesSQL, Process and Tooling at Scale
rocio
174
15k
We Are The Robots
honzajavorek
0
440
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
katarinadahlin
PRO
3
3.9k
Mind Mapping
helmedeiros
1
440
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
2
560
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
kimpetersen
PRO
0
530
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.9k
Context Engineering - Making Every Token Count
addyosmani
9
1.3k
Raft: Consensus for Rubyists
vanstee
143
7.9k