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

Svelteで作るページビルダー

21a1403c78714ecef56b46f18eefac8e?s=47 Childhooooo
December 07, 2019

 Svelteで作るページビルダー

21a1403c78714ecef56b46f18eefac8e?s=128

Childhooooo

December 07, 2019
Tweet

Transcript

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

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

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

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

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

  6. 1. Svelteʹ͍ͭͯ

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

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

  9. <template> <main class=”index”> <h1>ݟग़͠</h1> <p>ຊจ</p> <Block :content=”content”/> </main> </template> <script>

    import Block from ‘...’ export default { components: { Block }, data() { return { content: ‘’ }... Vue.js
  10. <template> <main class=”index”> <h1>ݟग़͠</h1> <p>ຊจ</p> <Block :content=”content”/> </main> </template> <script>

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

    let content; </script> Svelte
  12. <h1>ݟग़͠</h1> <p>ຊจ</p> <Block {content}/> <script> import Block from ‘...’; export

    let content; </script> Svelte ɾ࠷௿ݶͷHTMLλά ɾίϯϙʔωϯτ͸import͢Δ͚ͩ ɾϓϩύςΟ͸ม਺ͱͯ͠એݴ͢Δ͚ͩ
  13. {#if show} <Preview></Preview> {/if} <script> import Preview from '...'; export

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

    let componentId; let show = true; $: ((id) => { show = false; setTimeout(() => show = true, 0); })(componentId); </script> Svelte ɾҙਤͨ͠λΠϛϯάͰॳظԽͰ͖ͣɺ ɹҰ෦ແཧ΍Γ࠶ඳը͢Δඞཁ͕͋ͬͨ ɾDOMΛ·Δ͝ͱॻ͖׵͑Δॲཧ͕࿈ଓ ɹͨ͠ͷಈ͖͕Πέͯͳ͍
  15. None
  16. Vue.jsʢͨͿΜReact΋ʣ ϥϯλΠϜϥΠϒϥϦͳͷͰϞδϡʔϧΛ͔ͬ͠Γఆٛ ͠ͳ͚Ε͹ͳΒͣهड़͕໘౗ɻ Svelte ੜDOMΛ͍͡Δͷ͕Πέͯͳ͍ɻ

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

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

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

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

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

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

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

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

  25. ηΫγϣϯΛॎʹ

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

  27. σϞ

  28. Eruda͍͢͝

  29. <div class={{class}} id={{id}}> <p>{{ຊจ:content:text=αϯϓϧ}}</p> </div> <style> .{{class}} { position: relative;

    } .{{id}} p { font-size: {{αΠζ:size:rem=1.2}}rem; } </style>