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
What is Web Components
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
takanorip
August 31, 2017
Technology
0
68
What is Web Components
takanorip
August 31, 2017
Tweet
Share
More Decks by takanorip
See All by takanorip
「見せる」登壇資料デザインの極意
takanorip
2
660
Design System Documentation Tooling 2025
takanorip
3
2.5k
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
takanorip
1
980
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
690
Bulletproof Design System with TypeScript
takanorip
7
4.8k
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
270
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
1k
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
15
7.8k
社内管理画面のデザインもプロダクトデザイン
takanorip
5
2.2k
Other Decks in Technology
See All in Technology
20年以上続く PHP 大規模プロダクトを Kubernetes へ ── クラウド基盤刷新プロジェクトの4年間
oogfranz
PRO
0
120
システム標準化PMOから ガバメントクラウドCoEへ
techniczna
1
150
The_Evolution_of_Bits_AI_SRE.pdf
nulabinc
PRO
0
250
社内レビューは機能しているのか
matsuba
0
170
開発チームとQAエンジニアの新しい協業モデル -年末調整開発チームで実践する【QAリード施策】-
kaomi_wombat
0
140
新規事業×QAの挑戦:不確実性を乗りこなす!フェーズごとに求められるQAの役割変革
hacomono
PRO
0
130
It’s “Time” to use Temporal
sajikix
3
230
2026年もソフトウェアサプライチェーンのリスクに立ち向かうために / Product Security Square #3
flatt_security
1
700
A Casual Introduction to RISC-V
omasanori
0
470
WebアクセシビリティをCI/CDで担保する ― axe DevTools × Playwright C#実践ガイド
tomokusaba
2
190
AI時代の「本当の」ハイブリッドクラウド — エージェントが実現した、あの頃の夢
ebibibi
0
150
Microsoft “Adaptive Cloud” Update 2026年3月版
sdosamut
0
100
Featured
See All Featured
Being A Developer After 40
akosma
91
590k
We Are The Robots
honzajavorek
0
200
The Pragmatic Product Professional
lauravandoore
37
7.2k
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
katarinadahlin
PRO
1
3.5k
A Tale of Four Properties
chriscoyier
163
24k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
More Than Pixels: Becoming A User Experience Designer
marktimemedia
3
350
Building a Modern Day E-commerce SEO Strategy
aleyda
45
9k
Public Speaking Without Barfing On Your Shoes - THAT 2023
reverentgeek
1
340
How To Speak Unicorn (iThemes Webinar)
marktimemedia
1
410
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
64
52k
The Straight Up "How To Draw Better" Workshop
denniskardys
239
140k
Transcript
8IBUJT 8FC $PNQPOFOUT 5BLBOPSJ0LJ
ࠂ
݄ ٕज़ॻయ!ΞΩόεΫΤΞ ࢀՃ͠·͢ʂ
None
ʮ8FC$PNQPOFOUTͰ ΣϒαΠτΛͭ͘Ζ͏ʯ Έ͍ͨͳײ͡ͷຊग़͠·͢
ങ͍ͬͯͩ͘͞ʂ
技術書典3…? • 技術書だけの同人ࢽのイベント • 技術書のൢ売が中心 • 今回で3回目の開催 • 今回初めてのサークル参加です!
8FC$PNQPOFOUT
ίϯϙʔωϯτࢦ
コンポーネント指向 • ウェブサイトをパーツ単位でデザイン、管理 していこうという考え方 • パーツを再利用することで、保守性や 開発スピードを上げる • Atomic Designなどが有名
None
実装方法
JSフレームワークや ライブラリを使う (React、Vueなど)
ΊΜͲ͍͘͞ʂʂʂ
めんどくさい理由 • フレームワーク、ライブラリごとに書き方が 違うので互換性がない • フレームワークの開発が終了する危険がある
8FC$PNQPOFOUT
Web Components • Webの標準技術 • UIのカプセル化ができる • 特定のフレームワークなどに依存しない • ブラウザの対応が進んできている
ブラウザ対応状況
None
まだ対応できていない ブラウザもある ↓ Polyfillが必要
1PMZNFS
Polymer • Google製のJSライブラリ • Web ComponentsのPolyfill • YouTubeの新しいUIはPolymerを使ってる
Web Componentsは Webフロントエンドの 銀の弾丸になれるのか…?
Έ͍ͨͳײ͡ͷຊΛग़͢ͷͰ Έͳ͞Μ ΑΖ͓͘͠ئ͍͠·͢ʂ
͓ΘΓ