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
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
1.2k
Design System Documentation Tooling 2025
takanorip
3
2.8k
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
takanorip
1
1.1k
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
790
Bulletproof Design System with TypeScript
takanorip
7
5.2k
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
300
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
6
1.1k
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
15
7.9k
社内管理画面のデザインもプロダクトデザイン
takanorip
5
2.3k
Other Decks in Technology
See All in Technology
SREとQA 二人三脚で進めるSLO運用/sre-qa-slo
sugitak
0
880
ZOZOTOWNの進化と信頼性を両立する負荷試験
zozotech
PRO
2
190
個人開発で育てる「大規模設計の苗床」 - AI時代の1人開発から始める業務への知識接続 / The Seedbed for Large-Scale Design - From AI-Era Solo Projects to Professional Knowledge
bitkey
PRO
1
280
AI Agent SaaS を支える自社仮想化基盤への挑戦と実運用 / ai-agent-saas-virtualization
flatt_security
3
4.2k
型は壁、Rustでもバグを直すな、表現できなくせよ
nwiizo
14
2.1k
AI、CDK と協働する Full TypeScript アプリケーション開発 / Full TypeScript Application with AI and CDK
geekplus_tech
2
380
AI時代のYAGNI:「爆速で無駄になった機能」からの学び / 20260720 Naoki Takahashi
shift_evolve
PRO
2
320
「最後に責任を取るのはチーム」— 人間のPRレビューを最小化してアップデートしたメンタルモデル
jnishime_dresscode
0
900
ソニー銀行におけるビジネスアジリティ向上のためのクラウドシフト戦略
srenext
0
760
「AIに依存している」と 「AIを使いこなしている」の違い
k8yasuma
0
120
Devsumi 2026 Summer 人もAIも使える共通基盤を事業の加速装置にする~デザインシステム運用に学ぶ組織レバレッジ~ 渡辺 凌央
legalontechnologies
PRO
1
230
オブザーバビリティ、本当に活用できてる? 〜API連携×生成AIで成熟度を自動評価〜
dmmsre
1
3.5k
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
23k
Automating Front-end Workflow
addyosmani
1370
210k
Mind Mapping
helmedeiros
PRO
1
280
Utilizing Notion as your number one productivity tool
mfonobong
4
420
Ten Tips & Tricks for a 🌱 transition
stuffmc
0
150
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
37
6.5k
Optimising Largest Contentful Paint
csswizardry
37
3.8k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
4.1k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
31
3.3k
Prompt Engineering for Job Search
mfonobong
0
380
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
baasie
0
610
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フロントエンドの 銀の弾丸になれるのか…?
Έ͍ͨͳײ͡ͷຊΛग़͢ͷͰ Έͳ͞Μ ΑΖ͓͘͠ئ͍͠·͢ʂ
͓ΘΓ