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 やし
Rust 探訪 / rust-chotto-wakaru
yashi8484
0
61
Web Frontend ビルドツールの過去と現在と未来 / The Past, Present, and Future of Web Frontend Build Tools
yashi8484
0
570
ブラウザの仕組みを完全に理解する / Fully understand how browsers work
yashi8484
0
70
『保守性の高いcssを書く』という不可能に立ち向かう
yashi8484
0
620
Other Decks in Programming
See All in Programming
Spring gRPC について / About Spring gRPC
mackey0225
0
130
Compose でデザインと実装の差異を減らすための取り組み
oidy
1
230
Amazon Nova Reelの可能性
hideg
0
240
オニオンアーキテクチャを使って、 Unityと.NETでコードを共有する
soi013
0
380
振り返れば奴(Cline)がいる
keiyagi
0
110
いりゃあせ、PHPカンファレンス名古屋2025 / Welcome to PHP Conference Nagoya 2025
ttskch
1
240
テストコード書いてみませんか?
onopon
2
360
自分ひとりから始められる生産性向上の取り組み #でぃーぷらすオオサカ
irof
8
2.1k
DevFest - Serverless 101 with Google Cloud Functions
tunmise
0
140
さいきょうのレイヤードアーキテクチャについて考えてみた
yahiru
0
330
Immutable ActiveRecord
megane42
0
120
traP の部内 ISUCON とそれを支えるポータル / PISCON Portal
ikura_hamu
0
230
Featured
See All Featured
A better future with KSS
kneath
238
17k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.3k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
28
4.5k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
Documentation Writing (for coders)
carmenintech
67
4.6k
How STYLIGHT went responsive
nonsquared
96
5.3k
The Invisible Side of Design
smashingmag
299
50k
Optimizing for Happiness
mojombo
376
70k
Code Reviewing Like a Champion
maltzj
521
39k
Mobile First: as difficult as doing things right
swwweet
222
9.1k
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!