Vue.js Night #1 https://giftee.connpass.com/event/150145/ にて発表した資料です。
SvelteͰ࡞ΔWebComponents@yashi848484
View Slide
ࣗݾհ• Twitter: @yashi848484• Like: WebϑϩϯτΤϯυ• Love: ΑΑ• Recent troubles: ཱྀߦؼࠃศɺ෩Ͱܽߤ
ຊ͍͑ͨ͜ͱ• SvelteͱͲ͏͍͏frameworkͳͷ͔• ֤छframeworkʹґଘ͠ͳ͍ܗͰcomponentΛ࡞Δͱɺ༷ʑͳϓϩμΫτͰcomponentΛڞ༗Ͱ͖ͯศརͦ͏
࡞ͬͨͷ• SvelteͰcustom elements(WebComponents)Λ࡞ͬͨ• ࡞ͬͨcustom elementsΛɺVue applicationͱReactapplicationͷ྆ํͰͬͯΈͨ
Svelteͱ• https://svelte.dev/• svélt: ͢ΒΓͱͨ͠ɺ͢ΜͳΓͱͨ͠• .svelteίʔυΛɺjsʹม͢ΔίϯύΠϥ• (ࠓճɺ.svelte→custom elementsͱͯ͠ు͖ग़͢ܗͰ༻)
Svelteͱ• ίʔυྔগͳ͘ॻ͚Δ͜ͱΛతͱ͍ͯ͠Δ• Virtual DOMΛΘͣɺDOMΛॻ͖͑ΔΞϓϩʔν• ࣮ߦ࣌ͷύϑΥʔϚϯε͕ྑ͍ɺͱݴΘΕ͍ͯΔ
Svelteͱ• ύϑΥʔϚϯεʹؔͯ͠ɺVueReactͱൺֱ͞ΕΔ͜ͱ͕ଟ͍• →jQueryͱൺֱ͢Δ΄͏͕ϕλʔʁ
Hello {{ name }}<br/>export default {<br/>data() {<br/>return {<br/>name: "world"<br/>};<br/>}<br/>};<br/><br/>let name = "world";<br/>Hello {name}7VF 4WFMUFSvelte syntax
Hello world<br/>h1 {<br/>color: red;<br/>}<br/><br/>h1 {<br/>color: red;<br/>}<br/>Hello worldSvelte syntax7VF 4WFMUF
count: {{ count }}button<br/>export default {<br/>data() {<br/>return {<br/>count: 0<br/>};<br/>},<br/>methods: {<br/>handleClick() {<br/>this.count += 1;<br/>}<br/>}<br/>};<br/><br/>let count = 0;<br/>function handleClick() {<br/>count += 1;<br/>}<br/>count: {count}>buttonSvelte syntax7VF 4WFMUF
Svelte syntax• data binding, style binding• if, eachͳͲͷϒϩοΫ• slot• ϥΠϑαΠΫϧϝιου• (؆қతͳ)store• transition, animation• (ҰԠ)contextAPI
WebComponents• ࠶ར༻ՄೳͳಠࣗͷΧελϜཁૉΛ࡞͠ɺ͜ΕΛΣϒΞϓϦͰར༻͢ΔͨΊͷٕज़• Custom elements• Shadow DOM• HTML templates• HTML imports←ഇࢭ
Demo
<br/>export let title = "Svelte Card";<br/>export let message = "This is card component created by svelte";<br/>let selected = false;<br/>function handleOnClick() {<br/>selected = !selected;<br/>}<br/><br/>/* লུ */<br/>{title}{message}Svelte CustomElement
Svelte x {{ name }}card :title="card.title" :message="card.message" :key="card.id">slot="footer"@click="handleButtonOnClick"><br/>import "../public/svelte-elements";<br/>WebComponents in Vue<br/>
return (Svelte x {props.name}{cards.map((card, i) => (card title={card.title} message={card.message} key={i}>slot="footer"onClick={handleButtonOnClick}>))});WebComponents in React
ྑͦ͞͏ͳͱ͜Ζ• Svelteɺsyntax͕Vueʹࣅ͍ͯΔɹˠVue.jsΛॻ͍͍ͯΔਓͰ͋ΕɺΩϟονΞοϓָͦ͏• ͔ͭɺΑΓίʔυྔগͳ͘ॻ͘͜ͱ͕Ͱ͖Δ• طʹVueͱReactͷϓϩμΫτ͕͋Γɺޙ͔ΒσβΠϯͷ౷ҰԽΛਤΓ͍ͨ߹ͳͲʹWebComponentsศརͦ͏
՝• SvelteʹΑΔcustom elementsు͖ग़͠ɺSvelteͷ͓·͚ػೳɹˠΞϓϦέʔγϣϯ࡞༻్ͰਅՁΛൃشͰ͖Δ⭕• SvelteTypeScriptະαϙʔτɹˠࠓޙαϙʔτ͞ΕΔ༧ఆ• WebComponentsॳΊͯͬͨͷͰɺࠓޙࣝΛਂΊ͍͖͍ͯͨ
Sourcehttps://github.com/yashi8484/svelte-custom-elements
Thank you!