Svelteで作るWebComponents / svelte-web-components

Vue.js Night #1
https://giftee.connpass.com/event/150145/
にて発表した資料です。

Transcript

1. SvelteͰ࡞Δ
   WebComponents
   @yashi848484
   

   View Slide

2. ࣗݾ঺հ
   • Twitter: @yashi848484
   • Like: WebϑϩϯτΤϯυ
   • Love: ΀Α΀Α
   • Recent troubles: ཱྀߦؼࠃศɺ୆෩Ͱܽߤ
   

   View Slide

3. ຊ೔఻͍͑ͨ͜ͱ
   • Svelteͱ͸Ͳ͏͍͏frameworkͳͷ͔
   • ֤छframeworkʹґଘ͠ͳ͍ܗͰcomponentΛ࡞Δ
   ͱɺ༷ʑͳϓϩμΫτͰcomponentΛڞ༗Ͱ͖ͯศ
   རͦ͏
   

   View Slide

4. ࡞ͬͨ΋ͷ
   • SvelteͰcustom elements(WebComponents)Λ࡞ͬͨ
   • ࡞ͬͨcustom elementsΛɺVue applicationͱReact
   applicationͷ྆ํͰ࢖ͬͯΈͨ
   

   View Slide

5. Svelteͱ͸
   • https://svelte.dev/
   • svélt: ͢ΒΓͱͨ͠ɺ͢ΜͳΓͱͨ͠
   • .svelteίʔυΛɺjsʹม׵͢ΔίϯύΠϥ
   • (ࠓճ͸ɺ.svelte→custom elementsͱͯ͠ు͖ग़͢
   ܗͰ࢖༻)
   

   View Slide

6. Svelteͱ͸
   • ίʔυྔগͳ͘ॻ͚Δ͜ͱΛ໨తͱ͍ͯ͠Δ
   • Virtual DOMΛ࢖ΘͣɺDOMΛ௚઀ॻ͖׵͑ΔΞϓ
   ϩʔν
   • ࣮ߦ࣌ͷύϑΥʔϚϯε͕ྑ͍ɺͱݴΘΕ͍ͯΔ
   

   View Slide

7. Svelteͱ͸
   • ύϑΥʔϚϯεʹؔͯ͠ɺVue΍Reactͱൺֱ͞ΕΔ
   ͜ͱ͕ଟ͍
   • →jQuery౳ͱൺֱ͢Δ΄͏͕ϕλʔʁ
   

   View Slide

8. 
   Hello {{ name }}
   
   <br/>export default {<br/>data() {<br/>return {<br/>name: "world"<br/>};<br/>}<br/>};<br/>
   <br/>let name = "world";<br/>
   Hello {name}
   7VF 4WFMUF
   Svelte syntax
   

   View Slide

9. 
   Hello world
   
   <br/>h1 {<br/>color: red;<br/>}<br/>
   <br/>h1 {<br/>color: red;<br/>}<br/>
   Hello world
   
   Svelte syntax
   7VF 4WFMUF
   

   View Slide

10. 
    
    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}
    >button
    Svelte syntax
    7VF 4WFMUF
    

    View Slide

11. Svelte syntax
    • data binding, style binding
    • if, eachͳͲͷϒϩοΫ
    • slot
    • ϥΠϑαΠΫϧϝιου
    • (؆қతͳ)store
    • transition, animation
    • (ҰԠ)contextAPI
    

    View Slide

12. WebComponents
    • ࠶ར༻ՄೳͳಠࣗͷΧελϜཁૉΛ࡞੒͠ɺ͜ΕΛ
    ΢ΣϒΞϓϦ಺Ͱར༻͢ΔͨΊͷٕज़
    • Custom elements
    • Shadow DOM
    • HTML templates
    • HTML imports←ഇࢭ
    

    View Slide

13. Demo
    

    View Slide

14. <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
    

    View Slide

15. 
    
    Svelte x {{ name }}
    
    
    card :title="card.title" :message="card.message" :key="car
    d.id">
    slot="footer"
    @click="handleButtonOnClick"
    >
    
    
    
    
    
    <br/>import "../public/svelte-elements";<br/>WebComponents in Vue<br/>

    View Slide

16. 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
    

    View Slide

17. ྑͦ͞͏ͳͱ͜Ζ
    • Svelte͸ɺsyntax͕Vueʹࣅ͍ͯΔ
    ɹˠVue.jsΛॻ͍͍ͯΔਓͰ͋Ε͹ɺΩϟονΞοϓ͸ָͦ͏
    • ͔ͭɺΑΓίʔυྔগͳ͘ॻ͘͜ͱ͕Ͱ͖Δ
    • طʹVueͱReactͷϓϩμΫτ͕͋Γɺޙ͔ΒσβΠϯͷ౷Ұ
    ԽΛਤΓ͍ͨ৔߹ͳͲʹWebComponents͸ศརͦ͏
    

    View Slide

18. ՝୊
    • SvelteʹΑΔcustom elementsు͖ग़͠͸ɺSvelteͷ͓·͚ػೳ
    ɹˠΞϓϦέʔγϣϯ࡞੒༻్ͰਅՁΛൃشͰ͖Δ⭕
    • Svelte͸TypeScriptະαϙʔτ
    ɹˠࠓޙαϙʔτ͞ΕΔ༧ఆ
    • WebComponentsॳΊͯ࢖ͬͨͷͰɺࠓޙ஌ࣝΛਂΊ͍͖͍ͯͨ
    

    View Slide

19. Source
    https://github.com/yashi8484/svelte-custom-elements
    

    View Slide

20. Thank you!
    

    View Slide