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

Svelteで作るページビルダー

Childhooooo
December 07, 2019

 Svelteで作るページビルダー

Childhooooo

December 07, 2019
Tweet

More Decks by Childhooooo

Other Decks in Programming

Transcript

  1. SvelteͰ࡞ΔϖʔδϏϧμʔ
    Gunma.web #37

    View full-size slide

  2. େా෦ߊ
    ϩέοτ -> Web

    View full-size slide

  3. ಘҙͳ͜ͱ
    ϋΠϘʔϧΛ࡞Δ͜ͱ

    View full-size slide

  4. ۤखͳ͜ͱ
    λΠϐϯά

    View full-size slide

  5. 1. ίʔυ͕গͳͦ͏ʹݟ͑ͨSvelteͰ
    2. ϖʔδϏϧμʔΛ࡞Δ

    View full-size slide

  6. 1. Svelteʹ͍ͭͯ

    View full-size slide

  7. Svelteͱ͸
    ɾReact΍Vue.jsͬΆ͍ϑϩϯτΤϯυϑϨʔϜϫʔΫ
    ɾHTMLʗJavaScriptʗCSSΛੜ੒͢ΔίϯύΠϥ
    ɾԾ૝DOMΛ͍͡ΔΑ͏ͳϥϯλΠϜϥΠϒϥϦͰ͸ͳ͍
    ɾϕϯνϚʔΫͰReactͷ35ഒɺVue.jsͷ50ഒ଎͍Β͍͠

    View full-size slide

  8. Vue.jsͱͷൺֱ
    ʢ୯ҰϑΝΠϧίϯϙʔωϯτʣ

    View full-size slide



  9. ݟग़͠
    ຊจ



    <br/>import Block from ‘...’<br/>export default {<br/>components: {<br/>Block<br/>},<br/>data() {<br/>return {<br/>content: ‘’<br/>}...<br/>Vue.js<br/>

    View full-size slide



  10. ݟग़͠
    ຊจ



    <br/>import Block from ‘...’<br/>export default {<br/>components: {<br/>Block<br/>},<br/>data() {<br/>return {<br/>content: ‘’<br/>}...<br/>ɾςϯϓϨʔτλάͷ௚Լʹ1ͭͷࢠཁૉ<br/>ɾexport default { … }<br/>ɾϓϩύςΟΛdataؔ਺Ͱఆٛ<br/>ɾ࢖༻ίϯϙʔωϯτΛ͢΂ͯએݴ<br/>etc...<br/>Vue.js<br/>

    View full-size slide

  11. ݟग़͠
    ຊจ

    <br/>import Block from ‘...’;<br/>export let content;<br/>
    Svelte

    View full-size slide

  12. ݟग़͠
    ຊจ

    <br/>import Block from ‘...’;<br/>export let content;<br/>
    Svelte
    ɾ࠷௿ݶͷHTMLλά
    ɾίϯϙʔωϯτ͸import͢Δ͚ͩ
    ɾϓϩύςΟ͸ม਺ͱͯ͠એݴ͢Δ͚ͩ

    View full-size slide

  13. {#if show}

    {/if}
    <br/>import Preview from '...';<br/>export let componentId;<br/>let show = true;<br/>$: ((id) => {<br/>show = false;<br/>setTimeout(() => show = true, 0);<br/>})(componentId);<br/>
    Svelte

    View full-size slide

  14. {#if show}

    {/if}
    <br/>import Preview from '///';<br/>export let componentId;<br/>let show = true;<br/>$: ((id) => {<br/>show = false;<br/>setTimeout(() => show = true, 0);<br/>})(componentId);<br/>
    Svelte
    ɾҙਤͨ͠λΠϛϯάͰॳظԽͰ͖ͣɺ
    ɹҰ෦ແཧ΍Γ࠶ඳը͢Δඞཁ͕͋ͬͨ
    ɾDOMΛ·Δ͝ͱॻ͖׵͑Δॲཧ͕࿈ଓ
    ɹͨ͠ͷಈ͖͕Πέͯͳ͍

    View full-size slide

  15. Vue.jsʢͨͿΜReact΋ʣ
    ϥϯλΠϜϥΠϒϥϦͳͷͰϞδϡʔϧΛ͔ͬ͠Γఆٛ
    ͠ͳ͚Ε͹ͳΒͣهड़͕໘౗ɻ
    Svelte
    ੜDOMΛ͍͡Δͷ͕Πέͯͳ͍ɻ

    View full-size slide

  16. 2. ϖʔδϏϧμʔ͍ͭͯ

    View full-size slide

  17. ࠷ۙ͜Μͳͷ͋Γ·͕͢

    View full-size slide

  18. ߴػೳ͗͢Δʢࢲʹ͸ʣ

    View full-size slide

  19. ॊೈੑ͸ѱʢࢲʹ͸ʣ

    View full-size slide

  20. ॊೈੑ͸ѱ
    ɾόϥόϥʹͳΓ͕ͪͳ༨ന
    ɾ༧ଌ͠ʹ͍͘Ϩεϙϯγϒ࣌ͷಈ͖
    ɾ೺Ѳ͖͠Εͳ͍ઃఆ߲໨
    ɾ݁ہඞཁʹͳΔHTML&CSSͷ஌ࣝ
    ɾඍௐ੔ʹ͔͔Δ࣌ؒ

    View full-size slide

  21. ࣗ༝౓ͷϖʔδϏϧμʔΛ࡞ͬͯΈͨ

    View full-size slide

  22. ηΫγϣϯΛॎʹ
    SECTION
    SECTION

    View full-size slide

  23. ίϯϙʔωϯτΛԣʹ
    COMPONENT
    COMPONENT COMPONENT
    SECTION

    View full-size slide

  24. ηΫγϣϯΛॎʹ

    View full-size slide

  25. ίϯϙʔωϯτΛԣʹ

    View full-size slide


  26. {{ຊจ:content:text=αϯϓϧ}}

    <br/>.{{class}} {<br/>position: relative;<br/>}<br/>.{{id}} p {<br/>font-size: {{αΠζ:size:rem=1.2}}rem;<br/>}<br/>

    View full-size slide