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
740
Eleventy - 11ty
Avatar for tiwu tiwu_dev
0
150
Install for PWA
Avatar for tiwu tiwu_dev
0
3.8k
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.9k
Badge in Background
Avatar for tiwu tiwu_dev
0
110
PWAとCache API #frontkansai
Avatar for tiwu tiwu_dev
5
4.7k
Web Componentsとlit-element #frontkansai
Avatar for tiwu tiwu_dev
2
3.9k

Other Decks in Technology

See All in Technology
オントロジーって 結局なにもの？ AI エージェントに「意味」を渡す知識設計の話
Avatar for TomoyukiMurakami greenmidori
0
260
導入から定着へ ~コーディングエージェントを日常業務に組み込む実践知~
Avatar for Yuki Sakai yukisakai1225
0
170
Conditional PED-ANOVA: Hyperparameter Importance in Hierarchical & Dynamic Search Spaces
Avatar for Preferred Networks pfn
PRO
0
150
Persisting Massive Data with Rails ~Designing for 60 billion rows, and fighting the bottlenecks~ Railsで挑む大量データ永続化 〜600億件を永続化するための設計とボトルネックとの戦い〜
Avatar for Shoichi Ochi occhi
0
770
OptunaHub: ブラックボックス最適化のためのプラットフォーム
Avatar for Preferred Networks pfn
PRO
0
150
日本語に強いオープンな大規模言語モデル「LLM-jp」
Avatar for Yusuke Oda odashi
5
1.2k
小規模OSSモデルは サイバーセキュリティ業務に どこまで使えるか
Avatar for isao takaesu bbrbbq
0
170
Rustuna: Rustによる高速なOptuna実装
Avatar for Preferred Networks pfn
PRO
0
210
AI × アーキテクト 第1・2章｜生成AIの課題とアーキテクトの素養
Avatar for Daisuke Motoki daidaidai
1
220
AWSセキュリティで活用するAI機能
Avatar for cm-usuda-keisuke cmusudakeisuke
1
160
LLM-as-a-Judgeは本当に信頼できるのか――評価器を評価する話
Avatar for Takaaki Yayoi taka_aki
2
1k
Turning Repos into the Product Second Brain with an LLM Wiki
Avatar for LINE Developers Thailand linedevth
0
130

Featured

See All Featured
Applied NLP in the Age of Generative AI
Avatar for Ines Montani inesmontani
PRO
4
2.5k
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
10
37k
Skip the Path - Find Your Career Trail
Avatar for Mark Kilby mkilby
1
260
The Curse of the Amulet
Avatar for Matthew Lei leimatthew05
3
16k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
331
25k
Fireside Chat
Avatar for paigeccino paigeccino
43
4.1k
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
3.3k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1033
470k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3.4k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
192
12k
Mind Mapping
Avatar for Hélio Medeiros helmedeiros
1
400
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
Avatar for Tech SEO Connect techseoconnect
PRO
0
500

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は いいぞ