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
「クラウドコスト絶対削減」を支える技術—FinOpsを超えた徹底的なクラウドコスト削減の実践論
delta_tech
4
170
タイミーのデータモデリング事例と今後のチャレンジ
ttccddtoki
6
2.4k
関数型プログラミングで 「脳がバグる」を乗り越える
manabeai
1
190
What’s new in Android development tools
yanzm
0
310
IPA&AWSダブル全冠が明かす、人生を変えた勉強法のすべて
iwamot
PRO
2
140
スタートアップに選択肢を 〜生成AIを活用したセカンダリー事業への挑戦〜
nstock
0
200
Beyond Kaniko: Navigating Unprivileged Container Image Creation
f30
0
130
Sansanのデータプロダクトマネジメントのアプローチ
sansantech
PRO
0
160
敢えて生成AIを使わないマネジメント業務
kzkmaeda
2
440
ビズリーチが挑む メトリクスを活用した技術的負債の解消 / dev-productivity-con2025
visional_engineering_and_design
3
7.6k
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
2
7.7k
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
210
Featured
See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
What's in a price? How to price your products and services
michaelherold
246
12k
Speed Design
sergeychernyshev
32
1k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Fireside Chat
paigeccino
37
3.5k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Raft: Consensus for Rubyists
vanstee
140
7k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
950
How to Think Like a Performance Engineer
csswizardry
25
1.7k
Documentation Writing (for coders)
carmenintech
72
4.9k
Navigating Team Friction
lara
187
15k
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は いいぞ