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ͱ͸ ɾReact΍Vue.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.js

Slide 10

Slide 10 text

ݟग़͠

ຊจ

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

Slide 11

Slide 11 text

ݟग़͠

ຊจ

import Block from ‘...’; export let content; Svelte

Slide 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

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