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
What is Web Components
Search
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
AI-Slopなデザインを生まないためのデザインプロセス戦略
takanorip
10
5.9k
「見せる」登壇資料デザインの極意
takanorip
7
1.6k
Design System Documentation Tooling 2025
takanorip
3
3k
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
takanorip
1
1.3k
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
880
Bulletproof Design System with TypeScript
takanorip
7
5.4k
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
320
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
6
1.2k
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
15
8k
Other Decks in Technology
See All in Technology
What the customer really needed
kawaguti
PRO
3
200
越境するなら専門用語を使うな高校校歌 / If you wanna cross border, you shouldn't use jargon
vtryo
0
140
【技術的負債conf】事業成長に伴う技術的負債の説明責任とAIによるモニタリング、認知的負債について
i35_267
3
1.6k
今話題のAI「Jev」って何? 宇宙最速で学ぶ会
minorun365
PRO
26
15k
20260912_スクフェス三河
kgnkhkr
0
380
2026_devsumi_ozono.pdf
o3
3
510
例外の正しい扱い方 そのエラー try-catchして大丈夫?
jinwatanabe
3
510
銀行勘定系システムにおける開発プロセス刷新×AIによる環境モダナイゼーション / Development Process Transformation and AI-Driven Environment Modernization
muit
0
2.2k
AI時代の「技術的負債」の変質ー概念の終焉と再解釈、エージェントと共に向かう先
nwiizo
0
2.7k
HRC_Frontend_Conference_Fukuoka_2026.pdf
ts020
0
730
すぐできる衛星通信対応 あとは山奥に行くだけ
tatetate55
0
130
新機種発売前に見直そう!端末移行で再ログインが要るアプリ・要らないアプリは何が違うのか 〜シームレスに再開できる設計と実装〜
zozotech
PRO
0
200
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
12
1.3k
Building AI with AI
inesmontani
PRO
1
1.2k
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
kimpetersen
PRO
0
450
A better future with KSS
kneath
240
18k
Sam Torres - BigQuery for SEOs
techseoconnect
PRO
0
540
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
68
57k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
szymonslowik
1
1.3k
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
aleyda
1
2.2k
Context Engineering - Making Every Token Count
addyosmani
9
1.1k
The Curse of the Amulet
leimatthew05
3
14k
Measuring Dark Social's Impact On Conversion and Attribution
stephenakadiri
2
280
Building the Perfect Custom Keyboard
takai
2
870
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フロントエンドの 銀の弾丸になれるのか…?
Έ͍ͨͳײ͡ͷຊΛग़͢ͷͰ Έͳ͞Μ ΑΖ͓͘͠ئ͍͠·͢ʂ
͓ΘΓ