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
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
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
7
5.4k
「見せる」登壇資料デザインの極意
takanorip
7
1.4k
Design System Documentation Tooling 2025
takanorip
3
2.9k
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
takanorip
1
1.3k
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
830
Bulletproof Design System with TypeScript
takanorip
7
5.3k
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
310
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
6
1.1k
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
15
7.9k
Other Decks in Technology
See All in Technology
AI-DLC実践録_フルサイクル開発への挑戦
miyuc
0
270
20分でわかるセキュアAPI
nwiizo
2
310
老害フォレンジッカーはAI羊の夢を見るか?
tadmaddad
0
350
2026-08-05 IBM Z開発最前線!IBM Bob Premium Package for Zって何がすごいの?
yutanonaka
0
350
SmartHR Engineering Team Deck
smarthr
1
2.9k
PLATEAU で バーチャル花火大会
tatsuya1970
0
170
MulticaとPi Coding Agentで、小規模OSSを30本同時運用した流れ
eiei114
0
130
FPGAが実現する遠方宇宙の高空間分解能天体撮影 -大型地上望遠鏡の視力を補正する「補償光学」とは?-
komei_mt
0
540
事業価値と Engineering 2026年度版
recruitengineers
PRO
51
25k
AIペネトレーションテスト・ セキュリティ検証「AgenticSec」紹介資料
laysakura
2
9.2k
What's new in Go 1.27?
ciarana
0
270
猫付きpingコマンドを自作
uyuki234
0
260
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
28
2.7k
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
konakalab
0
550
Technical Leadership for Architectural Decision Making
baasie
3
500
How to Talk to Developers About Accessibility
jct
2
520
B2B Lead Gen: Tactics, Traps & Triumph
marketingsoph
0
220
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
akademiya2063
PRO
1
250
Why Our Code Smells
bkeepers
PRO
340
58k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
201
75k
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
minecr
1
350
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
23k
How to audit for AI Accessibility on your Front & Back End
davetheseo
0
500
Tips & Tricks on How to Get Your First Job In Tech
honzajavorek
1
700
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フロントエンドの 銀の弾丸になれるのか…?
Έ͍ͨͳײ͡ͷຊΛग़͢ͷͰ Έͳ͞Μ ΑΖ͓͘͠ئ͍͠·͢ʂ
͓ΘΓ