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
230
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
730
Eleventy - 11ty
Avatar for tiwu tiwu_dev
0
150
Install for PWA
Avatar for tiwu tiwu_dev
0
3.7k
App Shortcuts
Avatar for tiwu tiwu_dev
0
950
Web Vitals
Avatar for tiwu tiwu_dev
0
90
Web Share API
Avatar for tiwu tiwu_dev
0
3.7k
Badge in Background
Avatar for tiwu tiwu_dev
0
110
PWAとCache API #frontkansai
Avatar for tiwu tiwu_dev
5
4.5k
Web Componentsとlit-element #frontkansai
Avatar for tiwu tiwu_dev
2
3.8k

Other Decks in Technology

See All in Technology
[Kiro Meetup #7] Kiro Crew Dive Deep
Avatar for Kyosuke Konishi konippi
0
440
React Nativeでの OTA Updateって、 どう説明する？
Avatar for Ichiki ichiki1023
0
130
Snowflake Horizon Catalog と Apache Iceberg で作る オープンなデータ基盤
Avatar for キタガワ kitagawaz
0
360
MCPゲートウェイを作って運用してわかったこと — Agent時代の権限管理の現在地
Avatar for k.muguruma mtpooh
8
2.4k
HolmesGPTで始めるSREエージェント入門！プラットフォームの障害調査はAIにお任せ 〜
Avatar for Tech Leverages leveragestech
PRO
0
120
プラットフォームを「作る」、 チームに「入り込む」
Avatar for SansanTech sansantech
PRO
0
410
CI/CDではもう遅い - 人とAIが迂回しないDevSecOps Verify基盤の再設計 -
Avatar for KintoTech_Dev kintotechdev
1
550
The kernel report
Avatar for Kernel Recipes ennael
PRO
1
170
企業の現実世界をグラフで写し取る
Avatar for SansanTech sansantech
PRO
0
230
行動するAIのためのオントロジー ｜ DevRev — Encraft #26.pdf
Avatar for Takanori Suzuki dvrv_tknrszk
2
650
認知負荷を吸収し、プロダクトをまたぐPR Preview基盤の設計事例
Avatar for taiki45 taiki45
2
560
AIに書かせて、プラットフォームで縛る ― EKSプラットフォームで実践した責任境界と権限設計
Avatar for elmo elmodev09
1
1.1k

Featured

See All Featured
The Mindset for Success: Future Career Progression
Avatar for Greg Gifford greggifford
PRO
0
520
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
Avatar for Ines Montani inesmontani
PRO
0
730
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
850
Marketing Yourself as an Engineer | Alaka | Gurzu
Avatar for Gurzu gurzu
0
320
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.6k
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
570
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
55
13k
First, design no harm
Avatar for Per Axbom axbom
PRO
2
1.3k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
1k
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
Avatar for David Carrasco davidcarrasco
3
270
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
390
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
35
2.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は いいぞ