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
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
takanorip
August 31, 2017
Technology
70
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
What is Web Components
takanorip
August 31, 2017
More Decks by takanorip
See All by takanorip
「見せる」登壇資料デザインの極意
takanorip
4
1k
Design System Documentation Tooling 2025
takanorip
3
2.7k
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
takanorip
1
1.1k
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
770
Bulletproof Design System with TypeScript
takanorip
7
5.2k
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
290
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
6
1.1k
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
15
7.9k
社内管理画面のデザインもプロダクトデザイン
takanorip
5
2.3k
Other Decks in Technology
See All in Technology
小さく始める AI 活用推進 ― 日経電子版 Web チームの事例/nikkei-tech-talk47
nikkei_engineer_recruiting
0
230
攻撃者視点で考えるDetection Engineering
cryptopeg
2
1.4k
「エンジニア進化論」2028年の開発完全自動化、エンジニアはどう進化するか
cyberagentdevelopers
PRO
6
4.7k
"何を作るか"を任される エンジニアは、どう育つのか
yutaokafuji
1
610
Disciplined Vibes: Scaling AI-Assisted Engineering
sheharyar
0
140
[モダンアプリ勉強会]今更聞けないGit/GitHub入門
tsukuboshi
0
370
2026 TECHFRESH 畢業分享會 - 開發日常大解密!從領域驅動到企業級上線
line_developers_tw
PRO
0
870
新しいVibe Codingと”自走”について
watany
6
300
エンジニアリング戦略の作り方 / Crafting Engineering Strategy
iwashi86
21
6.7k
2026.06.13_AI時代に事業会社が「SIer出身エンジニア」を求める理由 / Why Businesses Seek Engineers with a System Integrator Background in the AI Era
jumtech
0
1.1k
Agentic Web
dynamis
1
210
スキルと MCP ツール、責務をどう分けるか? AI が迷わないインターフェース設計の戦略
cdataj
1
980
Featured
See All Featured
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
inesmontani
PRO
3
2.3k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.5k
The SEO Collaboration Effect
kristinabergwall1
1
480
Leading Effective Engineering Teams in the AI Era
addyosmani
9
2k
RailsConf 2023
tenderlove
30
1.5k
Test your architecture with Archunit
thirion
1
2.3k
We Analyzed 250 Million AI Search Results: Here's What I Found
joshbly
1
1.4k
Skip the Path - Find Your Career Trail
mkilby
1
150
Exploring anti-patterns in Rails
aemeredith
3
400
Side Projects
sachag
455
43k
How to audit for AI Accessibility on your Front & Back End
davetheseo
0
420
The Language of Interfaces
destraynor
162
27k
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フロントエンドの 銀の弾丸になれるのか…?
Έ͍ͨͳײ͡ͷຊΛग़͢ͷͰ Έͳ͞Μ ΑΖ͓͘͠ئ͍͠·͢ʂ
͓ΘΓ