Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Meguro.esの Web Components（勝手に） 作ってみた #meguroes

Avatar for tiwu tiwu
April 04, 2019
Technology
0
200

Meguro.esの Web Components（勝手に） 作ってみた #meguroes

Meguro.esの Web Components（勝手に） 作ってみた #meguroes

Avatar for tiwu

tiwu

April 04, 2019
Tweet

More Decks by tiwu

See All by tiwu
Eleventy で SSG
Avatar for tiwu tiwu_dev
2
680
Eleventy - 11ty
Avatar for tiwu tiwu_dev
0
140
Install for PWA
Avatar for tiwu tiwu_dev
0
1.4k
App Shortcuts
Avatar for tiwu tiwu_dev
0
900
Web Vitals
Avatar for tiwu tiwu_dev
0
72
Web Share API
Avatar for tiwu tiwu_dev
0
1.4k
Badge in Background
Avatar for tiwu tiwu_dev
0
74
PWAとCache API #frontkansai
Avatar for tiwu tiwu_dev
5
2.2k
Web Componentsとlit-element #frontkansai
Avatar for tiwu tiwu_dev
2
1.5k

Other Decks in Technology

See All in Technology
AWSが好きすぎて、41歳でエンジニアになり、AAIを経由してAWSパートナー企業に入った話
Avatar for Yuuki Yamashita yama3133
2
220
激動の時代を爆速リチーミングで乗り越えろ
Avatar for SansanTech sansantech
PRO
1
230
猫でもわかるAmazon Q Developer CLI 解体新書
Avatar for Hiroo Katoh kentapapa
1
240
短期間でRAGシステムを実現　お客様と歩んだ生成AI内製化への道のり
Avatar for sakai taka0709
1
140
Raycast AI APIを使ってちょっと便利なAI拡張機能を作ってみた
Avatar for ryo kawamataryo
0
230
データエンジニアとして生存するために 〜界隈を盛り上げる「お祭り」が必要な理由〜 / data_summit_findy_Session_1
Avatar for Sansan R&D sansan_randd
1
620
Amazon Q Developer CLIをClaude Codeから使うためのベストプラクティスを考えてみた
Avatar for banquet.kuma dar_kuma_san
0
310
Zero Trust DNS でより安全なインターネット アクセス
Avatar for Murachi Akira murachiakira
0
140
20251027_マルチエージェントとは
Avatar for Almondoイベント担当 almondo_event
1
510
How Fast Is Fast Enough? [PerfNow 2025]
Avatar for Tammy Everts tammyeverts
2
210
Oracle Database@Google Cloud：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
0
420
AIを使ってテストを楽にする
Avatar for KNOWLEDGE WORK / 株式会社ナレッジワーク kworkdev
PRO
0
400

Featured

See All Featured
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
8.9k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
5
710
BBQ
Avatar for Matthew Crist matthewcrist
89
9.9k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
34
2.5k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
110k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
140
34k
A better future with KSS
Avatar for Kyle Neath kneath
239
18k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.3k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
2.9k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
231
22k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
412
23k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.7k

Transcript

  1. Meguro.esの Web Components（勝手に） 作ってみた Wataru Taguchi

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

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

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

  4. みなさん！

  5. Meguro.esが好きですか！

  6. Meguro.esのロゴを 自分のサイトに 表示させたいですよね！

  7. Meguro.esのイベント情報 を自分のサイトに 表示させたいですよね！

  8. それWeb Components でできるよ

  9. <meguro-es-logo> <meguro-es-connpass-list>

  10. https://informal-meguro-es-we b-components.netlify.com/

  11. 使い方

  12. <script type="module" src="./src/js/meguroEsConnpassList.js"> </script>

  13. <meguro-es-connpass-list> </meguro-es-connpass-list>

  14. かんたん！！！！

  15. https://github.com/tiwuofficial/i nformal-meguro-es-web-comp onents

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

  17. カスタム要素

  18. Shadow DOM

  19. • constructorとconnectedCallbackの違いに気づく のが遅かった • conpassのAPIがJSONPだった つらみ

  20. Web Componentsは いいぞ