Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Web Components（勝手に） 作ってみた #sakenight8

Avatar for tiwu tiwu
April 06, 2019
Technology
220
0

Web Components（勝手に） 作ってみた #sakenight8

LT資料です

https://sakeganaito.connpass.com/event/123806/

Avatar for tiwu

tiwu

April 06, 2019

More Decks by tiwu

See All by tiwu
Eleventy で SSG
Avatar for tiwu tiwu_dev
2
720
Eleventy - 11ty
Avatar for tiwu tiwu_dev
0
150
Install for PWA
Avatar for tiwu tiwu_dev
0
3.4k
App Shortcuts
Avatar for tiwu tiwu_dev
0
950
Web Vitals
Avatar for tiwu tiwu_dev
0
88
Web Share API
Avatar for tiwu tiwu_dev
0
3.4k
Badge in Background
Avatar for tiwu tiwu_dev
0
110
PWAとCache API #frontkansai
Avatar for tiwu tiwu_dev
5
4.2k
Web Componentsとlit-element #frontkansai
Avatar for tiwu tiwu_dev
2
3.5k

Other Decks in Technology

See All in Technology
Snowflakeのコスト最適化を支えるアーキテクチャ設計
Avatar for Tatsuya Koreeda ktatsuya
0
1.1k
GoにおけるFFIのこれまでとこれから
Avatar for Masaaki Goshima goccy
4
1.4k
Bet AI Day 2026丨Production-Ready AI Agents — エンタープライズの実務を任せるための設計と運用
Avatar for LayerX layerx
PRO
4
2.6k
現場に行くだけでは足りない——プロダクトエンジニアが業務の流れを捉える観点と、その鍛え方
Avatar for 匠技研工業株式会社 / Takumi Engineering, inc. takumiengineering
0
350
GoCon2026 - Open Source, Open World
Avatar for sanposhiho sanposhiho
2
590
こんなアーキテクチャ図は嫌だ BEYOND THE TIME: 半年後の自分へ贈る15のメッセージ / 15 of Anti-pattern in AWS Architecture Diagrams
Avatar for Naomi Yamasaki naospon
3
280
AI時代のAPI品質を支えるガードレール / API Guardrails for API quality in the AI ​​era
Avatar for Yoichi Kawasaki yokawasa
1
180
Snowflakeで実現する全社横断の顧客の声（VOC）分析・活用基盤@Snowflake World Tour Tokyo 2026
Avatar for yuto16 yuto16
0
120
リージョンの壁を越える、 ちょっと変わったAWSサービスの話
Avatar for Michael Tedder falken
PRO
0
280
プロダクト思考 × 基盤思考を AIで実現する Compound Engineering
Avatar for Watanabe Takeshi(Buzz) tkc66buzz
1
300
Driving AI Adoption Using In-House GPUs to Serve Qwen
Avatar for po3rin po3rin
2
470
Bet AI Day 2026丨バクラク Autopilot、業務システムの再設計
Avatar for LayerX layerx
PRO
2
1.7k

Featured

See All Featured
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6.3k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
15k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
56k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
37
6.6k
The AI Search Optimization Roadmap by Aleyda Solis
Avatar for Aleyda Solis aleyda
1
6.2k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon Słowik szymonslowik
1
1.3k
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
580
From π to Pie charts
Avatar for Rasagy Sharma rasagy
0
360
Sam Torres - BigQuery for SEOs
Avatar for Tech SEO Connect techseoconnect
PRO
0
540
Lightning talk: Run Django tests with GitHub Actions
Avatar for Sarah Abderemane sabderemane
0
250
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
9
2.6k
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
7.9k

Transcript

  1. 『酒がないとプログラム書けない！』の Web Components（勝手に） 作ってみた Wataru Taguchi

  2. アジェンダ • 自己紹介 • 作ったぞい • Web Components • まとめ

  3. 自己紹介 # Wataru Taguchi - GameWith Front End Engineer -

    PWAとかパフォーマンスチューニングが好き - @tiwu_official - FF14, Beer, Kyoto Animation

  4. みなさん！

  5. お酒は好きですか！

  6. 酒がないとプログラミングでき ないですよね！

  7. アルコール駆動開発 していますよね？

  8. IT勉強会グループ 『酒がないとプログラム書けない！』 が好きですよね！！

  9. IT勉強会グループ 『酒がないとプログラム書けない！』 のイベント情報を自分のサイトに 表示させたいですよね！

  10. それWeb Components でできるよ

  11. <sakeganaito-logo> <sakeganaito-connpass-list>

  12. https://informal-sakeganaito-web-compo nents.netlify.com/

  13. 使い方

  14. かんたん 2STEP

  15. <script type="module" src="./src/js/sakeganaitoConnpassList.js"> </script> その1

  16. <sakeganaito-connpass-list> </sakeganaito-connpass-list> その2

  17. https://github.com/tiwuofficial/i nformal-sakeganaito-web-com ponents

  18. Web Components • カスタム要素 • Shadow DOM • HTML テンプレート

  19. カスタム要素

  20. Shadow DOM・HTML テンプレート

  21. Web Componentsは いいぞ