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
What is Web Components
takanorip
August 31, 2017
More Decks by takanorip
See All by takanorip
「見せる」登壇資料デザインの極意
takanorip
3
790
Design System Documentation Tooling 2025
takanorip
3
2.6k
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
takanorip
1
1k
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
730
Bulletproof Design System with TypeScript
takanorip
7
5k
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
280
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
6
1.1k
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
15
7.8k
社内管理画面のデザインもプロダクトデザイン
takanorip
5
2.2k
Other Decks in Technology
See All in Technology
The 7 pitfalls of AI
ufried
0
200
2026-05-14 要件定義からソース管理まで!IBM Bob基礎ハンズオン
yutanonaka
0
120
試作とデモンストレーション / Prototyping and Demonstrations
ks91
PRO
0
200
CyberAgent YJC Connect
shimaf4979
1
170
Purview 勉強会報告 Microsoft Purview 入門しようとしてみた
masakichixo
1
250
鹿野さんに聞く!CSSの最新トレンド Ver.2026
tonkotsuboy_com
6
2.8k
サービスの信頼性を高めるため、形骸化した「プロダクションミーティング」を立て直すまでの取り組み
stefafafan
1
260
AI時代に、 データアナリストがデータエンジニアに異動して
jackojacko_
0
620
SLI/SLO、「完全に理解した」から「チョットデキル」へ
maruloop
2
180
AI対話分析の夢と、汚いデータの現実 Looker / Dataplex / Dataform で実現する品質ファーストな基盤設計
waiwai2111
0
340
クラウドネイティブ DB はいかにして制約を 克服したか? 〜進化歴史から紐解く、スケーラブルアーキテクチャ設計指針〜
hacomono
PRO
6
850
Swift Sequence の便利 API 再発見
treastrain
1
250
Featured
See All Featured
Utilizing Notion as your number one productivity tool
mfonobong
4
300
Measuring & Analyzing Core Web Vitals
bluesmoon
9
820
GitHub's CSS Performance
jonrohan
1032
470k
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
minecr
1
250
Mind Mapping
helmedeiros
PRO
1
190
HTML-Aware ERB: The Path to Reactive Rendering @ RubyCon 2026, Rimini, Italy
marcoroth
1
33
[SF Ruby Conf 2025] Rails X
palkan
2
1k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
28
3.5k
Measuring Dark Social's Impact On Conversion and Attribution
stephenakadiri
2
190
Accessibility Awareness
sabderemane
1
110
The Curious Case for Waylosing
cassininazir
0
340
Agile Actions for Facilitating Distributed Teams - ADO2019
mkilby
0
180
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フロントエンドの 銀の弾丸になれるのか…?
Έ͍ͨͳײ͡ͷຊΛग़͢ͷͰ Έͳ͞Μ ΑΖ͓͘͠ئ͍͠·͢ʂ
͓ΘΓ