Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Svelteで作るWebComponents / svelte-web-components

やし
October 30, 2019

Svelteで作るWebComponents / svelte-web-components

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

やし

October 30, 2019
Tweet

More Decks by やし

Other Decks in Programming

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