転職初っ端終了しました

Transcript

1. స৬ॳͬ୺ ऴྃ͠·ͨ͠ 3/5 FrontEnd Test Night - Fukuoka

2. ࣗݾ঺հ • νϟϯΧπ(@tyankatsu5) • ϕΨίʔϙϨʔγϣϯ • LaigͷϑϩϯτΤϯυΤϯδχΞ • Gridsome maintainer

   • ӳޠษڧத • ࠷ۙδϜߦ͖ͩ͠·ͨ͠
3. None
4. None

5. ஫ҙ • ͋͘·Ͱ๻ͷߟ͑Δςετʹ͍ͭͯͷ࿩ͳͷͰɺؒ ҧͬͯΔͱ͜Ζ͕͋Δ͔΋஌Εͳ͍Ͱ͢ɻ • ؒҧͬͯͨΒTwitterͰࢦఠͯ͠΄͍͠Ͱ͢ɻ • ࣗ෼͸͜͏ࢥ͏ͬͯײ૝΋͍ͩ͘͞

6. https://discord.gg/XSQ6c3X

7. ࠓ೔࿩͢͜ͱ • ςετͱͷग़ձ͍ • ςετͷΘ͔Βͳ͍Λղܾ͍ͯ͘͠աఔ

8. ςετͱͷ ࠷ॳͷग़ձ͍

9. ձࣾ

10. ձࣾ • JestΛ࢖༻ͨ͠Ϣχοτςετ • Vueͷίϯϙʔωϯτͱstoreͷςετ • ςετ͕௨Βͳ͔ͬͨΒTravisʹౖΒΕͯϓϧϦΫ͕ ҰੜϚʔδͰ͖ͳ͍

11. Ұੜ ϚʔδͰ͖ͳ͍

12. ౰࣌ͷ๻ͷεϖοΫ • WebσβΠφʔ͔ΒϑϩϯτΤϯυΤϯδχΞ΁ • CIʁ • ςετʁ • ΧόϨοδʁ •

    Ϛονϟʔʁ • ελϒʁ • ϞοΫʁ

13. ͓ɹΘɹΓ

14. ϦʔμʔʹఏҊ

15. ʮ͠͹Β͘ςετ͚ͩॻ͔ͤͯʯ

16. ʮ͏͍ʯ

17. ʮͪΐΖ͍ʯ

18. Θ͔Βͳ͍͜ͱΛ ϦετΞοϓ

19. େ͖͘෼͚Δͱ3ͭ • ͳͥςετΛॻ͘ͷ͔ • Ͳ͏΍ͬͯςετ͢Δͷ͔ • ԿΛςετ͢Δͷ͔

20. ͳͥςετΛॻ͘ͷ͔

21. ;ͱࢥ͏

22. ςετ͍ΒΜ͘ͳ͍ʁ

23. ςετͳͯ͘΋ಈ͘Α

24. ෼͔Δ

25. None

26. ςετίʔυʹ͸What Λॻ͜͏

27. ͜ͷίʔυ͸ԿʁΛઆ໌

28. ͿͬͪΌ͚

29. ͳͯ͘΋ಈ͘

30. ͚Ͳ

31. ͳ͍ͱίʔυʹແ੹೚

32. ͡Ό͋ඞཁͰ͢Ͷ☺

33. ͍Ζ͍Ζௐ΂ͨ • RSpecͷ࢖͍ํʢΑ͘ฉ͘ςετ͔ͩͬͨΒʣ • ςετͷख๏ʢTDDͱ͔BDDͱ͔ʣ • ςετͷछྨʢϢχοτςετͱ͔E2Eͱ͔ʣ

34. ͳͥςετΛॻ͘ͷ͔ • ػೳͷઆ໌ • मਖ਼Λ༰қʹ͢Δ

35. ػೳͷઆ໌

36. ػೳͷઆ໌ • ͦͷػೳ͸ԿΛظ଴ͯ͠ԿΛظ଴͍ͯ͠ͳ͍ͷ͔ • ػೳͷ࣮૷ऀ͸ͦͷػೳΛӬԕʹઆ໌Ͱ͖Δ͔ • ࣮૷ऀ͸ͦ΋ͦ΋ଆʹ͍Δͷ͔

37. मਖ਼Λ༰қʹ͢Δ

38. मਖ਼Λ༰қʹ͢Δ • ػೳΛมߋɺमਖ਼͢Δ৔߹ʹɺظ଴͢Δ݁Ռ͕ಘΒ ΕΔͷ͔อো͢Δ • ාͯ͘खΛՃ͑ΒΕͳ͍ͱ͍͏͜ͱ͔ΒಀΕΔ

39. Ͳ͏΍ͬͯςετ͢Δͷ͔

40. None

41. Jest • Facebook༷؅׋ • ͳΜͰ΋ཉுΓϋοϐʔηοτ • ͜Ε͑͞ೖΕΕ͹ςετ͕Ұ௨Γग़དྷΔʂ⚙ • snapshot΋ࡱΕͯDOMͷมߋ΋ݕ஌ʂ •

    ݱঢ়͜ΕҰ୒ • εϐʔυ͸஗͍͚Ͳ'ɹ˞ମײ

42. JestͰ΍ͬͨ͜ͱ • υΩϡϝϯτΛશ෦ಡΉʢΘ͔Βͳ͍͜ͱ͸దٓά άΔʣ • ϚονϟʔΛશ෦ࢼ͢ • खݩͰ؆୯ͳؔ਺࡞ͬͯςετͯ͠ΈΔ • LaigͷίʔυΛಡΉ

43. JestͰ΍ͬͨ͜ͱ • υΩϡϝϯτΛશ෦ಡΉʢΘ͔Βͳ͍͜ͱ͸దٓά άΔʣ • ϚονϟʔΛશ෦ࢼ͢ • खݩͰ؆୯ͳؔ਺࡞ͬͯςετͯ͠ΈΔ • LaigͷίʔυΛಡΉɹˡ͜Ε

44. ಡΜͰΈͯ • vue-test-utilsͱJest૊Έ߹ΘͤͯΔΜͩͳ • stateͱ͔propsͱ͔dataͱ͔ͷ஋ΛԾʹ࡞ΔΜͩͳ • ςετ͠ͳ͍ؔ਺͸ϞοΫʹ͓͚ͯ͠͹͍͍ͷ͔ • Wallaby.jsͬͯϑΝΠϧ͋Δ͚ͲͳΜͩ͜Εʁ

45. ಡΜͰΈͯ • vue-test-utilsͱJest૊Έ߹ΘͤͯΔΜͩͳ • stateͱ͔propsͱ͔dataͱ͔ͷ஋ΛԾʹ࡞ΔΜͩͳ • ςετ͠ͳ͍ؔ਺͸ϞοΫʹ͓͚ͯ͠͹͍͍ͷ͔ • Wallaby.jsͬͯϑΝΠϧ͋Δ͚ͲͳΜͩ͜Εʁ

46. ʮ͜Ε͋͛Δʯ

47. Wallaby.jsͷϥΠηϯε

48. ʮ͋ɺ͸͍ʯ

49. 3 days later ...

50. ʮWallaby࠷ˍߴʯ

51. ʮWallaby࠷ˍߴʯ

52. Wallaby.jsͷੌ͍ͱ͜Ζ • શϑΝΠϧ୳ࡧͯ͠ςετͯ͠ͳ͍ͱ͜Ζݟ͚ͭΔ • ϑΝΠϧ͝ͱͷΧόϨοδग़ͯ͘͠ΕΔ • Τϥʔग़ͯΔͱ͜Ζڭ͑ͯ͘ΕΔ • ΤϥʔՕॴͷৄࡉΛϩάʹग़ྗͯ͘͠ΕΔ •

    ϩά݁Ռ͕͙͢ӈʹग़Δ • ରԠ͕ૣ͍ • ϑϦʔϓϥϯ͸࠷ѱʢߪೖ࠵ଅˍ࠵ଅˍ࠵ଅʣ

53. ϩά݁Ռ͕͙͢ӈʹग़Δ

54. ϗόʔ͢Ε͹ৄࡉ֬ೝՄೳ

55. ςετ͕௨Ε͹྘৭

56. ςετ͕௨Βͳ͚Ε͹੺৭

57. None

58. ͦͷؒ ࣮ʹ30ඵͷग़དྷࣄ

59. Jest + Wallaby.js ͭΑͭΑͰ͋Δɻ ৄࡉ͸ͪ͜Β https://wallabyjs.com/

60. ԿΛςετ͢Δͷ͔

61. ςετ͕ॻ͚Δ؀ڥ

62. Ͱ͖ͨͱͯ͠

63. ͳʹΛςετ͢Δͷʁ

64. Jestͷ υΩϡϝϯτΛݟͯΔͱ ײͮ͘

65. ஋͕༧ظ͢Δ΋ͷ ஋͕༧ظ͠ͳ͍΋ͷ ΛϚονϟʔͰςετ

66. ͭ·Γ

67. ظ଴͢Δ஋ɺঢ়ଶ ظ଴͠ͳ͍஋ɺঢ়ଶ

68. ۩ମྫ • ؔ਺͸ظ଴ͨ͠ฦΓ஋Λฦͯ͘͠ΕΔͷ͔ • props΍state΍dataͷ஋ʹΑΔDOM͸༧ظͨ͠΋ͷ ͔ • storeͷstate͕actionͰมΘΔͷ͔ • mutation͢Δͱ͖ʹaction͸ݺ͹Ε͍ͯΔͷ͔

    payload΋ಉ࣌ʹ౉ͯ͠Δͷ͔ • ϦϯΫΛԡͨ͠ΒͲͷϖʔδʹߦ͘ͷ͔

69. ۩ମྫ • Ҿ਺ʹ2Λ͔͚ͯ஋Λฦؔ͢਺࡞ͬͨΑ • Ҿ਺ʹ5ΛೖΕͨΒ10͕ฦΔͷ͔ • Ҿ਺ʹ-5ΛೖΕͨΒ-10͕ฦΔͷ͔ • Ҿ਺ʹ0ΛೖΕͨΒ0͕ฦΔͷ͔ •

    Ҿ਺͕਺ࣈҎ֎ͩͬͨΒError͕ฦΔͷ͔

70. ۩ମྫ • ϑΥʔϜͰsubmitͨ͠Β/completeʹඈͿΑ • submitͨ͠ΒURL͸/completeͳͷ͔ • /completeʹ͸τοϓʹ໭ΔϘλϯ͕͋Δ͔ • /completeͷτοϓʹ໭ΔϘλϯΛԡͨ͠ΒURL͸ /ʹͳ͍ͬͯΔͷ͔

71. ͜͏ͯ͠ ςετʹ͏Δ͍͞Ϛϯʹ ๻͸ͳ͍ͬͯͬͨ ʢ஌ࣝ͸·ͩઙ͍ͱࢥ͏ʣ

72. ۦ͚଍ʹͳ͚ͬͨͲ ·ͱΊ

73. ·ͱΊ • ͳͥςετΛ͢Δͷ͔ • ࣮૷ͷػೳΛอো͢Δ • Ͳ͏΍ͬͯςετΛ͢Δͷ͔ • JestͱWallaby࠷&ߴ •

    ԿΛςετ͢Δͷ͔ • ظ଴͢Δ஋ɺঢ়ଶ • ظ଴͠ͳ͍஋ɺঢ়ଶ

74. ͓ΘΓ