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
1.9k
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
140
Rust 探訪 / rust-chotto-wakaru
yashi8484
0
62
Web Frontend ビルドツールの過去と現在と未来 / The Past, Present, and Future of Web Frontend Build Tools
yashi8484
0
580
ブラウザの仕組みを完全に理解する / Fully understand how browsers work
yashi8484
0
73
『保守性の高いcssを書く』という不可能に立ち向かう
yashi8484
0
640
Other Decks in Programming
See All in Programming
.NET Frameworkでも汎用ホストが使いたい!
tomokusaba
0
170
SpringBoot3.4の構造化ログ #kanjava
irof
3
1k
Visual StudioのGitHub Copilotでいろいろやってみる
tomokusaba
1
180
Grafana Cloudとソラカメ
devoc
0
180
バッチを作らなきゃとなったときに考えること
irof
1
410
2024年のWebフロントエンドのふりかえりと2025年
sakito
3
260
GoとPHPのインターフェイスの違い
shimabox
2
200
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
230
GitHub Actions × RAGでコードレビューの検証の結果
sho_000
0
280
Formの複雑さに立ち向かう
bmthd
1
890
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
670
責務と認知負荷を整える! 抽象レベルを意識した関心の分離
yahiru
8
1.2k
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
4 Signs Your Business is Dying
shpigford
182
22k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
250
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
A Tale of Four Properties
chriscoyier
158
23k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
Statistics for Hackers
jakevdp
797
220k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Building Applications with DynamoDB
mza
93
6.2k
The Cult of Friendly URLs
andyhume
78
6.2k
Navigating Team Friction
lara
183
15k
Embracing the Ebb and Flow
colly
84
4.6k
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!