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
Svelteで作るWebComponents / svelte-web-components
Search
やし
October 30, 2019
Programming
2
2k
Svelteで作るWebComponents / svelte-web-components
Vue.js Night #1
https://giftee.connpass.com/event/150145/
にて発表した資料です。
やし
October 30, 2019
Tweet
Share
More Decks by やし
See All by やし
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
230
Rust 探訪 / rust-chotto-wakaru
yashi8484
0
67
Web Frontend ビルドツールの過去と現在と未来 / The Past, Present, and Future of Web Frontend Build Tools
yashi8484
0
600
ブラウザの仕組みを完全に理解する / Fully understand how browsers work
yashi8484
0
77
『保守性の高いcssを書く』という不可能に立ち向かう
yashi8484
0
660
Other Decks in Programming
See All in Programming
Beyond_the_Prompt__Evaluating__Testing__and_Securing_LLM_Applications.pdf
meteatamel
0
100
Bedrock × Confluenceで簡単(?)社内RAG
iharuoru
1
110
The Missing Link in Angular’s Signal Story: Resource API and httpResource
manfredsteyer
PRO
0
140
「理解」を重視したAI活用開発
fast_doctor
0
270
ASP.NETアプリケーションのモダナイゼーションについて
tomokusaba
0
240
Cursorを活用したAIプログラミングについて 入門
rect
0
150
2ヶ月で生産性2倍、お買い物アプリ「カウシェ」4チーム同時改善の取り組み
ike002jp
1
110
Deoptimization: How YJIT Speeds Up Ruby by Slowing Down / RubyKaigi 2025
k0kubun
1
1.9k
Cline with Amazon Bedrockで爆速開発体験ハンズオン/ 株式会社ブリューアス登壇資料
mhan
0
110
ニーリーQAのこれまでとこれから
nealle
2
140
UMAPをざっくりと理解 / Overview of UMAP
kaityo256
PRO
3
1.4k
fieldalignmentから見るGoの構造体
kuro_kurorrr
0
130
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Fireside Chat
paigeccino
37
3.4k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.6k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.2k
What's in a price? How to price your products and services
michaelherold
245
12k
KATA
mclloyd
29
14k
Making the Leap to Tech Lead
cromwellryan
133
9.2k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
137
33k
Automating Front-end Workflow
addyosmani
1370
200k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
21k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Transcript
SvelteͰ࡞Δ WebComponents @yashi848484
ࣗݾհ • Twitter: @yashi848484 • Like: WebϑϩϯτΤϯυ • Love: ΑΑ
• Recent troubles: ཱྀߦؼࠃศɺ෩Ͱܽߤ
ຊ͍͑ͨ͜ͱ • SvelteͱͲ͏͍͏frameworkͳͷ͔ • ֤छframeworkʹґଘ͠ͳ͍ܗͰcomponentΛ࡞Δ ͱɺ༷ʑͳϓϩμΫτͰcomponentΛڞ༗Ͱ͖ͯศ རͦ͏
࡞ͬͨͷ • SvelteͰcustom elements(WebComponents)Λ࡞ͬͨ • ࡞ͬͨcustom elementsΛɺVue applicationͱReact applicationͷ྆ํͰͬͯΈͨ
Svelteͱ • https://svelte.dev/ • svélt: ͢ΒΓͱͨ͠ɺ͢ΜͳΓͱͨ͠ • .svelteίʔυΛɺjsʹม͢ΔίϯύΠϥ • (ࠓճɺ.svelte→custom
elementsͱͯ͠ు͖ग़͢ ܗͰ༻)
Svelteͱ • ίʔυྔগͳ͘ॻ͚Δ͜ͱΛతͱ͍ͯ͠Δ • Virtual DOMΛΘͣɺDOMΛॻ͖͑ΔΞϓ ϩʔν • ࣮ߦ࣌ͷύϑΥʔϚϯε͕ྑ͍ɺͱݴΘΕ͍ͯΔ
Svelteͱ • ύϑΥʔϚϯεʹؔͯ͠ɺVueReactͱൺֱ͞ΕΔ ͜ͱ͕ଟ͍ • →jQueryͱൺֱ͢Δ΄͏͕ϕλʔʁ
<template> <h1>Hello {{ name }}</h1> </template> <script> export default {
data() { return { name: "world" }; } }; </script> <script> let name = "world"; </script> <h1>Hello {name}</h1> 7VF 4WFMUF Svelte syntax
<template> <h1>Hello world</h1> </template> <style scoped> h1 { color: red;
} </style> <style> h1 { color: red; } </style> <h1>Hello world </h1> Svelte syntax 7VF 4WFMUF
<template> <div> <div>count: {{ count }}</div> <button @click="handleClick"> button</button> </div>
</template> <script> export default { data() { return { count: 0 }; }, methods: { handleClick() { this.count += 1; } } }; </script> <script> let count = 0; function handleClick() { count += 1; } </script> <div>count: {count}</div> <button on:click={handleClick} >button</button> Svelte syntax 7VF 4WFMUF
Svelte syntax • data binding, style binding • if, eachͳͲͷϒϩοΫ
• slot • ϥΠϑαΠΫϧϝιου • (؆қతͳ)store • transition, animation • (ҰԠ)contextAPI
WebComponents • ࠶ར༻ՄೳͳಠࣗͷΧελϜཁૉΛ࡞͠ɺ͜ΕΛ ΣϒΞϓϦͰར༻͢ΔͨΊͷٕज़ • Custom elements • Shadow DOM
• HTML templates • HTML imports←ഇࢭ
Demo
<script> export let title = "Svelte Card"; export let message
= "This is card component created by svelte"; let selected = false; function handleOnClick() { selected = !selected; } </script> <style> /* লུ */ </style> <svelte:options tag="svelte-card" /> <div class="card" class:selected on:click={handleOnClick}> <div class="card-title">{title}</div> <div class="card-body">{message}</div> <slot name="footer" /> </div> Svelte CustomElement
<template> <div class="container"> <h1>Svelte x {{ name }}</h1> <div class="content-wrapper">
<template v-for="card in cards"> <svelte- card :title="card.title" :message="card.message" :key="car d.id"> <svelte-button slot="footer" @click="handleButtonOnClick" ></svelte-button> </svelte-card> </template> </div> </div> </template> <script> import "../public/svelte-elements"; WebComponents in Vue
return ( <div className="container"> <h1>Svelte x {props.name}</h1> <div className="content-wrapper"> {cards.map((card,
i) => ( <svelte- card title={card.title} message={card.message} key= {i}> <svelte-button slot="footer" onClick={handleButtonOnClick} ></svelte-button> </svelte-card> ))} </div> </div> ); WebComponents in React
ྑͦ͞͏ͳͱ͜Ζ • Svelteɺsyntax͕Vueʹࣅ͍ͯΔ ɹˠVue.jsΛॻ͍͍ͯΔਓͰ͋ΕɺΩϟονΞοϓָͦ͏ • ͔ͭɺΑΓίʔυྔগͳ͘ॻ͘͜ͱ͕Ͱ͖Δ • طʹVueͱReactͷϓϩμΫτ͕͋Γɺޙ͔ΒσβΠϯͷ౷Ұ ԽΛਤΓ͍ͨ߹ͳͲʹWebComponentsศརͦ͏
՝ • SvelteʹΑΔcustom elementsు͖ग़͠ɺSvelteͷ͓·͚ػೳ ɹˠΞϓϦέʔγϣϯ࡞༻్ͰਅՁΛൃشͰ͖Δ⭕ • SvelteTypeScriptະαϙʔτ ɹˠࠓޙαϙʔτ͞ΕΔ༧ఆ • WebComponentsॳΊͯͬͨͷͰɺࠓޙࣝΛਂΊ͍͖͍ͯͨ
Source https://github.com/yashi8484/svelte-custom-elements
Thank you!