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
Web Components(勝手に) 作ってみた #sakenight8
Search
tiwu
April 06, 2019
Technology
0
190
Web Components(勝手に) 作ってみた #sakenight8
LT資料です
https://sakeganaito.connpass.com/event/123806/
tiwu
April 06, 2019
Tweet
Share
More Decks by tiwu
See All by tiwu
Eleventy で SSG
tiwu_dev
2
670
Eleventy - 11ty
tiwu_dev
0
140
Install for PWA
tiwu_dev
0
1.3k
App Shortcuts
tiwu_dev
0
880
Web Vitals
tiwu_dev
0
71
Web Share API
tiwu_dev
0
1.3k
Badge in Background
tiwu_dev
0
66
PWAとCache API #frontkansai
tiwu_dev
5
2.1k
Web Componentsとlit-element #frontkansai
tiwu_dev
2
1.4k
Other Decks in Technology
See All in Technology
Geminiとv0による高速プロトタイピング
shinya337
1
270
Sansanのデータプロダクトマネジメントのアプローチ
sansantech
PRO
0
150
怖くない!はじめてのClaude Code
shinya337
0
390
OPENLOGI Company Profile
hr01
0
67k
CRE Camp #1 エンジニアリングを民主化するCREチームでありたい話
mntsq
1
120
SEQUENCE object comparison - db tech showcase 2025 LT2
nori_shinoda
0
130
さくらのIaaS基盤のモニタリングとOpenTelemetry/OSC Hokkaido 2025
fujiwara3
3
440
ビズリーチが挑む メトリクスを活用した技術的負債の解消 / dev-productivity-con2025
visional_engineering_and_design
3
7.5k
Lufthansa ®️ USA Contact Numbers: Complete 2025 Support Guide
lufthanahelpsupport
0
190
LangChain Interrupt & LangChain Ambassadors meetingレポート
os1ma
2
310
ビズリーチにおけるリアーキテクティング実践事例 / JJUG CCC 2025 Spring
visional_engineering_and_design
1
120
ゼロからはじめる採用広報
yutadayo
3
910
Featured
See All Featured
Being A Developer After 40
akosma
90
590k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Code Review Best Practice
trishagee
69
18k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Why Our Code Smells
bkeepers
PRO
336
57k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
How GitHub (no longer) Works
holman
314
140k
Transcript
『酒がないとプログラム書けない!』の Web Components(勝手に) 作ってみた Wataru Taguchi
アジェンダ • 自己紹介 • 作ったぞい • Web Components • まとめ
自己紹介 # Wataru Taguchi - GameWith Front End Engineer -
PWAとかパフォーマンスチューニングが好き - @tiwu_official - FF14, Beer, Kyoto Animation
みなさん!
お酒は好きですか!
酒がないとプログラミングでき ないですよね!
アルコール駆動開発 していますよね?
IT勉強会グループ 『酒がないとプログラム書けない!』 が好きですよね!!
IT勉強会グループ 『酒がないとプログラム書けない!』 のイベント情報を自分のサイトに 表示させたいですよね!
それWeb Components でできるよ
<sakeganaito-logo> <sakeganaito-connpass-list>
https://informal-sakeganaito-web-compo nents.netlify.com/
使い方
かんたん 2STEP
<script type="module" src="./src/js/sakeganaitoConnpassList.js"> </script> その1
<sakeganaito-connpass-list> </sakeganaito-connpass-list> その2
https://github.com/tiwuofficial/i nformal-sakeganaito-web-com ponents
Web Components • カスタム要素 • Shadow DOM • HTML テンプレート
カスタム要素
Shadow DOM・HTML テンプレート
Web Componentsは いいぞ