Svelteで作るページビルダー

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>