Slide 1
Slide 1 text
SvelteͰ࡞ΔϖʔδϏϧμʔ
Gunma.web #37
Slide 2
Slide 2 text
େా෦ߊ
ϩέοτ -> Web
Slide 3
Slide 3 text
ಘҙͳ͜ͱ
ϋΠϘʔϧΛ࡞Δ͜ͱ
Slide 4
Slide 4 text
ۤखͳ͜ͱ
λΠϐϯά
Slide 5
Slide 5 text
1. ίʔυ͕গͳͦ͏ʹݟ͑ͨSvelteͰ
2. ϖʔδϏϧμʔΛ࡞Δ
Slide 6
Slide 6 text
1. Svelteʹ͍ͭͯ
Slide 7
Slide 7 text
Svelteͱ
ɾReactVue.jsͬΆ͍ϑϩϯτΤϯυϑϨʔϜϫʔΫ
ɾHTMLʗJavaScriptʗCSSΛੜ͢ΔίϯύΠϥ
ɾԾDOMΛ͍͡ΔΑ͏ͳϥϯλΠϜϥΠϒϥϦͰͳ͍
ɾϕϯνϚʔΫͰReactͷ35ഒɺVue.jsͷ50ഒ͍Β͍͠
Slide 8
Slide 8 text
Vue.jsͱͷൺֱ
ʢ୯ҰϑΝΠϧίϯϙʔωϯτʣ
Slide 9
Slide 9 text
ݟग़͠
ຊจ
import Block from ‘...’ export default { components: { Block }, data() { return { content: ‘’ }... Vue.jsSlide 10
Slide 10 text
ݟग़͠
ຊจ
import Block from ‘...’ export default { components: { Block }, data() { return { content: ‘’ }... ɾςϯϓϨʔτλάͷԼʹ1ͭͷࢠཁૉ ɾexport default { … } ɾϓϩύςΟΛdataؔͰఆٛ ɾ༻ίϯϙʔωϯτΛͯ͢એݴ etc... Vue.jsSlide 11
Slide 11 text
ݟग़͠
ຊจ
import Block from ‘...’; export let content; SvelteSlide 12
Slide 12 text
ݟग़͠
ຊจ
import Block from ‘...’; export let content; Svelte ɾ࠷ݶͷHTMLλά ɾίϯϙʔωϯτimport͢Δ͚ͩ ɾϓϩύςΟมͱͯ͠એݴ͢Δ͚ͩSlide 13
Slide 13 text
{#if show}
{/if}
import Preview from '...';
export let componentId;
let show = true;
$: ((id) => {
show = false;
setTimeout(() => show = true, 0);
})(componentId);
Svelte
Slide 14
Slide 14 text
{#if show}
{/if}
import Preview from '///';
export let componentId;
let show = true;
$: ((id) => {
show = false;
setTimeout(() => show = true, 0);
})(componentId);
Svelte
ɾҙਤͨ͠λΠϛϯάͰॳظԽͰ͖ͣɺ
ɹҰ෦ແཧΓ࠶ඳը͢Δඞཁ͕͋ͬͨ
ɾDOMΛ·Δ͝ͱॻ͖͑Δॲཧ͕࿈ଓ
ɹͨ͠ͷಈ͖͕Πέͯͳ͍
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
Vue.jsʢͨͿΜReactʣ
ϥϯλΠϜϥΠϒϥϦͳͷͰϞδϡʔϧΛ͔ͬ͠Γఆٛ
͠ͳ͚ΕͳΒͣهड़͕໘ɻ
Svelte
ੜDOMΛ͍͡Δͷ͕Πέͯͳ͍ɻ
Slide 17
Slide 17 text
2. ϖʔδϏϧμʔ͍ͭͯ
Slide 18
Slide 18 text
࠷ۙ͜Μͳͷ͋Γ·͕͢
Slide 19
Slide 19 text
ߴػೳ͗͢Δʢࢲʹʣ
Slide 20
Slide 20 text
ॊೈੑѱʢࢲʹʣ
Slide 21
Slide 21 text
ॊೈੑѱ
ɾόϥόϥʹͳΓ͕ͪͳ༨ന
ɾ༧ଌ͠ʹ͍͘Ϩεϙϯγϒ࣌ͷಈ͖
ɾѲ͖͠Εͳ͍ઃఆ߲
ɾ݁ہඞཁʹͳΔHTML&CSSͷࣝ
ɾඍௐʹ͔͔Δ࣌ؒ
Slide 22
Slide 22 text
ࣗ༝ͷϖʔδϏϧμʔΛ࡞ͬͯΈͨ
Slide 23
Slide 23 text
ηΫγϣϯΛॎʹ
SECTION
SECTION
Slide 24
Slide 24 text
ίϯϙʔωϯτΛԣʹ
COMPONENT
COMPONENT COMPONENT
SECTION
Slide 25
Slide 25 text
ηΫγϣϯΛॎʹ
Slide 26
Slide 26 text
ίϯϙʔωϯτΛԣʹ
Slide 27
Slide 27 text
σϞ
Slide 28
Slide 28 text
Eruda͍͢͝
Slide 29
Slide 29 text
{{ຊจ:content:text=αϯϓϧ}}