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

Transcript

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

   View Slide

2. ͜Μʹͪ͸
   

   View Slide

3. PͪΌΜͰ͢
   @p1ch_jp
   

   View Slide

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

   View Slide

5. ࣗݾ঺հ͸·͍͍͋΍
   

   View Slide

6. ࠓ೥͓ੈ࿩ʹͳͬͨ΋ͷͰ͢Ͷʂ
   

   View Slide

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

   View Slide

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

   View Slide

9. ͱࢥͬͨͷͰ͕͢
   

   View Slide

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

    View Slide

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

    View Slide

12. ࠓճ͸
    

    View Slide

13. OVYUHFOFSBUFͨ͋͠ͱʹग़ͯ͘Δ
    EJTUΛԿ͔͠ΒͷϩʔΧϧαʔόʔͰ
    ֬ೝ͢Δͱࢥ͏ͷͰ͕͢
    

    View Slide

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

    View Slide

15. ͱ͍͏Θ͚ͰվΊ·ͯ͠
    

    View Slide

16. ఱԼҰDev Server෢ಓձ
    

    View Slide

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

    View Slide

18. બखೖ৔
    

    View Slide

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

    View Slide

20. No2.
    light-server
    (from npm)
    

    View Slide

21. No3.
    budo
    (from npm)
    

    View Slide

22. No4.
    serve
    (from npm)
    

    View Slide

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

    View Slide

24. 1ճઓ֮͑΍͢͞
    

    View Slide

25. 1ճઓ͸୯७ʹͦͷίϚϯυΛ
    ԿจࣈͰݺͼग़ͤΔ͔Ͱ͢
    

    View Slide

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

    View Slide

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

    View Slide

28. 2ճઓ৮Γ΍͢͞
    

    View Slide

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

    View Slide

30. ࠓճ͸
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

37. 3ճઓͦͷଞ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

43. ݁Ռൃද
    

    View Slide

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

    View Slide

45. ͱ͍͏Θ͚Ͱ
    

    View Slide

46. dev server
    

    View Slide

47. budo
    

    View Slide

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

    View Slide

49. ऴΘΓ
    

    View Slide