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
0
53
What is Web Components
takanorip
August 31, 2017
Tweet
Share
More Decks by takanorip
See All by takanorip
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
100
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
790
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
14
6.9k
社内管理画面のデザインもプロダクトデザイン
takanorip
4
1.8k
早わかり W3C Community Group
takanorip
0
460
Ubieとアクセシビリティのこれからを考える
takanorip
0
420
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
3.8k
Astroで始める爆速個人サイト開発
takanorip
15
11k
後悔しないデザインシステムの始め方
takanorip
4
3.1k
Other Decks in Technology
See All in Technology
20250304_赤煉瓦倉庫_DeepSeek_Deep_Dive
hiouchiy
2
140
MLflowはどのようにLLMOpsの課題を解決するのか
taka_aki
0
150
リクルートのエンジニア組織を下支えする 新卒の育成の仕組み
recruitengineers
PRO
2
200
アジャイルな開発チームでテスト戦略の話は誰がする? / Who Talks About Test Strategy?
ak1210
1
870
AIエージェント時代のエンジニアになろう #jawsug #jawsdays2025 / 20250301 Agentic AI Engineering
yoshidashingo
9
4.3k
Amazon Q Developerの無料利用枠を使い倒してHello worldを表示させよう!
nrinetcom
PRO
2
130
生成AI×財務経理:PoCで挑むSlack AI Bot開発と現場巻き込みのリアル
pohdccoe
1
840
プロダクト開発者目線での Entra ID 活用
sansantech
PRO
0
170
フォーイット_エンジニア向け会社紹介資料_Forit_Company_Profile.pdf
forit_tech
1
1.7k
Global Databaseで実現するマルチリージョン自動切替とBlue/Greenデプロイ
j2yano
0
180
AI自体のOps 〜LLMアプリの運用、AWSサービスとOSSの使い分け〜
minorun365
PRO
9
1.2k
30→150人のエンジニア組織拡大に伴うアジャイル文化を醸成する役割と取り組みの変化
nagata03
0
380
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
115
51k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
Statistics for Hackers
jakevdp
797
220k
Unsuck your backbone
ammeep
669
57k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1.1k
Fireside Chat
paigeccino
35
3.2k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Designing for humans not robots
tammielis
250
25k
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フロントエンドの 銀の弾丸になれるのか…?
Έ͍ͨͳײ͡ͷຊΛग़͢ͷͰ Έͳ͞Μ ΑΖ͓͘͠ئ͍͠·͢ʂ
͓ΘΓ