天下一 Dev Server 武道会 / World Dev Server Tournament

by Pちゃん

Slide 1

Slide 1 text

גࣜձࣾσΟʔɾΤψɾΤʔ ౻ݪ৻ଠ࿠BLB1$IBO ఱԼҰdev server෢ಓձ Frontend de KANPAI! #5

Slide 2

Slide 2 text

͜Μʹͪ͸

Slide 3

Slide 3 text

PͪΌΜͰ͢ @p1ch_jp

Slide 4

Slide 4 text

ීஈ͸ɺ6*σβΠφʔΛ΍͍ͬͯ·͢ɻ MyAnimeListͱ͔ɺϋοΧυʔϧͱ͔

Slide 5

Slide 5 text

ࣗݾ঺հ͸·͍͍͋΍

Slide 6

Slide 6 text

ࠓ೥͓ੈ࿩ʹͳͬͨ΋ͷͰ͢Ͷʂ

Slide 7

Slide 7 text

ࠓ೥ͱ͘ʹ͓ੈ࿩ʹͳͬͨ΋ͷ w 4LFUDI w 6*ͭ͘Δͷ͸ίϨ͕ϝΠϯ w "CTUSBDU w ΋͏ʮ࠷৽൛DPQZ@OFXʯΈ͍ͨͳ࣌୅͸ऴΘΓ w /PXTI w ແྉͰ্ཱ͕ͪͬͯɺ84௨Δͷ͸وॏͩ w /VYUKT w ࣗ෼͸੩తαΠτΛHFOFSBUFίϚϯυͰͭ͘ΔΈ͍ͨ ͳ࢖༻ํ๏͕ଟ͔ͬͨ

Slide 8

Slide 8 text

͜ͷதͰϑϩΧϯͰ ஻ΕΔͱͨ͠ΒNuxt͔ͳ( ˘ω˘)

Slide 9

Slide 9 text

ͱࢥͬͨͷͰ͕͢

Slide 10

Slide 10 text

Nuxt͕௒ศརͳ͜ͱͱ͔ Έͳ͞Μඦ΋ঝ஌ͩͱࢥ͏͠

Slide 11

Slide 11 text

5෼ؒͷLTͰઆ໌ͨ͠ͱ͜ΖͰ ʮͦΕ͸ͦ͏ʯͱͳͬͯ͠·͍ͦ͏ͳͷͰ

Slide 12

Slide 12 text

ࠓճ͸

Slide 13

Slide 13 text

OVYUHFOFSBUFͨ͋͠ͱʹग़ͯ͘Δ EJTUΛԿ͔͠ΒͷϩʔΧϧαʔόʔͰ ֬ೝ͢Δͱࢥ͏ͷͰ͕͢

Slide 14

Slide 14 text

ͦΕΛԿͰ֬ೝ͢Δͷ͕ྑ͍ͷ͔ͱ͍͏ ௒χονͳ࿩Λ͍ͨ͠ͱࢥ͍·͢ɻ

Slide 15

Slide 15 text

ͱ͍͏Θ͚ͰվΊ·ͯ͠

Slide 16

Slide 16 text

ఱԼҰDev Server෢ಓձ

Slide 17

Slide 17 text

ࢀՃࢿ֨ w ϩʔΧϧͰ΢Σϒαʔόʔ͕ͨͭ͜ͱ w Command Line InterfaceΛ΋͍ͬͯΔ͜ͱ

Slide 18

Slide 18 text

બखೖ৔

Slide 19

Slide 19 text

No1. python -m SimpleHTTPServer ϫϯϥΠφʔαʔόʔքͷॏ௟

Slide 20

Slide 20 text

No2. light-server (from npm)

Slide 21

Slide 21 text

No3. budo (from npm)

Slide 22

Slide 22 text

No4. serve (from npm)

Slide 23

Slide 23 text

ධՁํ๏ w ֮͑΍͢͞ w ୯७ʹίϚϯυΛԿจࣈͰݺ΂Δ͔ w ৮Γ΍͢͞ w ΍Γ͍ͨ͜ͱΛαοͱͰ͖Δ͔ w ͦͷଞ w ػೳ໢ཏੑ΍࣮੷ͳͲ ࠓճ͸ҎԼͷ࣠ͰධՁ͍ͨ͠ͱࢥ͍·͢ɻ ֤఺Ͱɺ߹ܭ఺ຬ఺Ͱ͢ɻ

Slide 24

Slide 24 text

1ճઓ֮͑΍͢͞

Slide 25

Slide 25 text

1ճઓ͸୯७ʹͦͷίϚϯυΛ ԿจࣈͰݺͼग़ͤΔ͔Ͱ͢

Slide 26

Slide 26 text

5จࣈҎԼͳΒ3఺ 15จࣈҎԼͳΒ2఺ 20จࣈҎԼͳΒ1఺ ͦΕҎ্ͳΒ0఺

Slide 27

Slide 27 text

1ճઓ֮͑΍͢͞ w QZUIPON4JNQMF)5514FSWFS w 26จࣈ1఺ w MJHIUTFSWFS w 11จࣈ2఺ w CVEP w 4จࣈ3఺ w TFSWF w 5จࣈ3఺

Slide 28

Slide 28 text

2ճઓ৮Γ΍͢͞

Slide 29

Slide 29 text

2ճઓ͸৮Γ΍͢͞Ͱɺ ΍Γ͍ͨ͜ͱΛαοͱͰ͖Δ͔Ͱ͢

Slide 30

Slide 30 text

ࠓճ͸

Slide 31

Slide 31 text

./distΛlocalhost:3000Ͱ ϗεςΟϯά͢Δͱ͍͏

Slide 32

Slide 32 text

͋Γ͕ͪͳγνϡΤʔγϣϯͰ ࢼͯ͠Έ͍ͨͱࢥ͍·͢

Slide 33

Slide 33 text

No1.python -m SimpleHTTPServer w 42จࣈ΋͔͔Δ w ͦ΋ͦ΋EJTUΛϕʔεʹϗεςΟϯάΈ͍ͨͳ͜ͱ͕Ͱ͖ ͳ͍ͷͰDE͢Δඞཁ͕͋Δ w ͔ͳΓ࣮༻తͰ͸ͳ͍ͷͰ0఺ $ cd dist && python -m SimpleHTTPServer 3000

Slide 34

Slide 34 text

No2.light-server w 28จࣈͰ࣮ߦͰ͖Δ w Φϓγϣϯ΋௚ײతͰΘ͔Γ΍͍͢ w 3఺ $ light-server -s dist -p 3000

Slide 35

Slide 35 text

No3.budo w 20จࣈͰ࣮ߦͰ͖Δ w Φϓγϣϯ΋௚ײతͰΘ͔Γ΍͍͢ ೔ຊਓʹ༏͍͠ w 3఺ $ budo -d dist -p 3000

Slide 36

Slide 36 text

No4.Terve w 60จࣈͰ࣮ߦͰ͖Δ w EJTUΛϕʔεʹϗεςΟϯάΈ͍ͨͳ͜ͱ͕ઃఆϑΝΠϧܦ ༝Ͱ͔͠σΩͳ͍ w 2ճ໨͔Β͸serve -l 3000ͷ13จࣈͰ࣮ߦͰ͖Δ w ͷͰ1఺͸͋͛ͪΌ͏ $ echo {\ public\ : \ dist\ } >> serve.json && serve -l 3000

Slide 37

Slide 37 text

3ճઓͦͷଞ

Slide 38

Slide 38 text

ͦͷଞͰ͸ΞϐʔϧͰ͖Δ͜ͱΛ όγόγ্͛ͯಠஅͱภݟͰՃ఺͍͖ͯ͠·͢ɻ

Slide 39

Slide 39 text

No1.python -m SimpleHTTPServer w ੈͷதͰҰ൪࢖ΘΕ͍ͯΔϩʔΧϧαʔόʔͰ͢ʂʂ w ͦ͏ͩͶ w 1఺Ճ఺

Slide 40

Slide 40 text

No2.light-server w http2ʹରԠͰ͖Δ͜ͱΛചΓʹ͍ͯ͠Δʢ͍͢͝Ͷʣ w ػೳ໢ཏੑ΋ͳ͔ͳ͔͍͢͝ w IUUQTHJUIVCDPNUYDIFOMJHIUTFSWFS w 2఺Ճ఺

Slide 41

Slide 41 text

No3.budo w GitHub Star 1400௒͑Ͱ͢ʂʂʢͦ͏ͩͶʣ w ػೳ໢ཏੑ͕͍͢͝Ͱ͢ʂʂʢ͔ͨ͠ʹ͍͢͝ʣ w IUUQTHJUIVCDPNNBUUEFTMCVEP w 2఺Ճ఺

Slide 42

Slide 42 text

No4.Terve w GitHub Star 3400௒͑Ͱ͢ʂʂʢ͍͢͝Ͷʣ w 1఺Ճ఺

Slide 43

Slide 43 text

݁Ռൃද

Slide 44

Slide 44 text

ճઓ ճઓ ճઓ ߹ܭ QZUIPO ఺ ఺ ఺ ఺ MJHIUTFSWFS ఺ ఺ ఺ ఺ CVEP ఺ ఺ ఺ ఺ TFSWF ఺ ఺ ఺ ఺

Slide 45

Slide 45 text

ͱ͍͏Θ͚Ͱ

Slide 46

Slide 46 text

dev server

Slide 47

Slide 47 text

budo

Slide 48

Slide 48 text

·ͱΊ w ࠓճͷ༏উ͸ɺ৮Γ΍͢͞ɾػೳ໢ཏੑͷ໘͔Βbudoʹ ܾఆ w http2Λ࢖༻͍ͨ͠ͱ͖͸light-serverΛ࢖͏ͱྑͦ͞͏ w ΋ͬͱଞʹྑͦ͞͏ͳͷ͋ΔͰʂΈ͍ͨͳͷ͋Ε͹࣍ճҎ߱ ͷϑϩΧϯͰୈೋճdev server෢ಓձ΍͍ͬͯͩ͘͞

Slide 49

Slide 49 text

ऴΘΓ