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Λ·Δ͝ͱॻ͖׵͑Δॲཧ͕࿈ଓ
    ɹͨ͠ͷಈ͖͕Πέͯͳ͍
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>