フロントエンドの秩序は保たれているか？

Hatena Engineer Seminar #8
https://connpass.com/event/60276/

Transcript

1. IS THE

   ORDER

   MAINTAINED?
   ϑϩϯτΤϯυͷடং͸
   อͨΕ͍ͯΔ͔ʁ
   @masawada
   

   View Slide

2. id:masawada
   

   View Slide

3. View Slide

4. ࠓ͙͢ొ࿥ʂ
   IUUQCMPHIBUFOBOFKQSFHJTUFS
   !!!!!!!!!!!!!!
   !!!!!!!!!!!!!!
   !!!!!!!!!!!!!!!
   !!!!!!!!!!!!!!
   !!!!!!!!!!!!!!!!
   !!!!!!!!!!!!!!!!
   !!!!!!!!!!!!!!!
   !!!!!!!!!!!!!!!
   

   View Slide

5. View Slide

6. ͸ͯͳϒϩά
   प೥
   
   

   View Slide

7. ख़੒͞Εͨ
   +4ίʔυ܈
   

   View Slide

8. /PEFֶԂࡇͰͷൃද
   

   View Slide

9. ,ZPUPKTͰͷൃද
   

   View Slide

10. ࠓ೔͸͜ΕҎ߱

    ͷ͜ͱΛ࿩͠·
    ͢ʂʂʂʂʂʂ
    ʂʂʂʂʂʂʂ
    

    View Slide

11. ͷલʹ
    

    View Slide

12. લճ·Ͱͷ

    ͋Β͢͡
    

    View Slide

13. +4ͷ෼ׂ
    w ݹ͖ྑ͖DPODBU͔ΒCSPXTFSJGZʹ
    w Ұ෦ͷϑΝΠϧ͸ߦ͘Β͍͋ͬͨʜ
    w ˠߦʹ
    

    View Slide

14. View Slide

15. $*ͰςετΛճ͢
    w ͪΌΜͱϏϧυͰ͖Δ͔
    w &4-JOUͰνΣοΫ
    w Ϣχοτςετ
    

    View Slide

16. $*ͰςετΛճ͢
    +4ςετͷ࣮ߦ݁Ռ
    

    View Slide

17. OQNΞοϓσʔτσʔͷಋೖ
    w ຖ݄ୈҰ݄༵೔Λ

    OQNΞοϓσʔτσʔʹ
    w ಉ࣌ʹ/PEFKTͷΞοϓσʔτ΋

    ߦͳ͏
    

    View Slide

18. OQNΞοϓσʔτσʔͷಋೖ
    

    View Slide

19. ΦϨΦϨ'MVYΛ3FEVYʹدͤΔ
    w ͜Ε·Ͱ͸ಠࣗܰྔϥΠϒϥϦͰ

    'MVY
    w 3FBDU'MVYք۾ͷ஌͕ࣝඞཁ
    w νʔϜͷΤϯδχΞʹ

    ϑϩϯτΤϯυઐ໳͸ډͳ͍
    

    View Slide

20. ΦϨΦϨ'MVYΛ3FEVYʹدͤΔ
    w ಠࣗ'MVY࣮૷ΛϦϑΝΫλϦϯά
    w 3FEVYΞʔΩςΫνϟʹ͚ۙͮΔ
    w 3FEVY͸࢖Θͳ͍
    

    View Slide

21. ·ͩ·ͩ
    ൃల్্
    

    View Slide

22. ࠓޙͷվળʹඞཁͳ΋ͷ
    w νʔϜϝϯόʔͱͷ૬ஊ
    w ࣮૷ํ๏ͷυΩϡϝϯτԽ
    w ޻਺
    

    View Slide

23. ྑ͍αʔϏεΛ
    ࡞͍ͬͯͧ͘ʂ

    ʂʂʂʂʂʂʂ
    ʂʂʂʂʂʂʂ
    

    View Slide

24. ͱ͜Ζ͕
    

    View Slide

25. View Slide

26. View Slide

27. ࠓ೔࿩͢͜ͱ
    

    View Slide

28. ೥݄·Ͱʹ΍ͬͨ͜ͱ
    w ࠷৽৘ใΛΩϟονΞοϓ͢Δ

    ମ੍Λ੔͑Δ
    w ςετվળ
    w OQNΞοϓσʔτσʔͷഇࢭ
    w 3FBDUͷར༻ൣғΛ޿͛Δ
    

    View Slide

29. Mission 1:
    INPUT &
    OUTPUT
    

    View Slide

30. +4൪௕ෆࡏ
    

    View Slide

31. ࠷৽৘ใͷऩूͱڞ༗
    w ऩू
    w ϑϩϯτΤϯυϥϯν
    w ࣾ֎ަྲྀ
    w ڞ༗
    w υΩϡϝϯτͷ੔උ
    w '8(ͷ։࠵ ݱࡏ͸ഇࢭ
    
    

    View Slide

32. υΩϡϝϯτͷ੔උ
    Ҿ͖ܧ͗
    
    

    View Slide

33. υΩϡϝϯτͷ੔උ Ҿ͖ܧ͗
    
    w ٧·ΓͲ͜ΖΛͳ͘͢
    w ࢦ਑ͷڞ༗
    w ελΠϧͷࢦఠͳͲ͸&4-JOUʹ೚ͤΔ
    
    

    View Slide

34. υΩϡϝϯτͷ੔උ Ҿ͖ܧ͗
    
    

    View Slide

35. '8(ͷ։࠵
    

    View Slide

36. '8(ͱ͸
    w ϑϩϯτΤϯυϫʔΩϯάάϧʔϓ
    w ϑϩϯτΤϯυʹؔ͢Δ

    Α͠ͳ͠͝ͱΛ࿩͠߹͏
    w 18(ͱซ࠵
    

    View Slide

37. 18(ͱ͸
    w ύϑΥʔϚϯεϫʔΩϯάάϧʔϓ
    w ΠϯϑϥपΓͷ༷ࢠΛఆظతʹ؍࡯
    w ରԠ͕ඞཁͰ͋Ε͹

    *TTVFͷ༏ઌ౓Λ্͛ΒΕΔ
    

    View Slide

38. 18(ͱ͸
    

    View Slide

39. View Slide

40. 1BHF4QFFE*OTJHIUT
    

    View Slide

41. '8(
    w Ұϲ݄͝ͱ։࠵
    w ৽ͨʹಋೖٕͨ͠ज़Λࣗຫ
    w ࠔΓ͝ͱΛڞ༗
    w ΋ͷʹΑͬͯ͸༏ઌ౓Λ্͛Δ
    

    View Slide

42. '8(
    

    View Slide

43. '8(
    w ࠷ۙ͸ഇࢭ͞Ε·ͨ͠
    w ͋Δఔ౓ҙࣝͷڞ༗͕Ͱ͖ͨ
    w ৘ใڞ༗͸ࣾ಺άϧʔϓ PSJTTVF
    Ͱ
    

    View Slide

44. IMPROVE THE

    TEST

    ENVIRONMENT
    Mission 2:
    

    View Slide

45. ςετ؀ڥͷվળ
    w 'MPXಋೖ
    w QPXFSBTTFSUಋೖ
    w &O[ZNFಋೖ
    

    View Slide

46. QPXFSBTTFSU
    CBCFMQMVHJOFNQPXFSBTTFSU
    

    View Slide

47. QPXFSBTTFSU
    require(‘assert’);
    ↓
    require(‘power-assert’);
    উखʹஔ͖׵͑ͯ͘ΕΔ
    

    View Slide

48. &O[ZNF
    3FBDU$PNQPOFOUͷ

    ςετ͍͍ײ͡ʹ

    ॻ͚ΔΑ͏ʹ͢Δ΍ͭ
    

    View Slide

49. View Slide

50. ςετ؀ڥͷվળ
    w ςετΛॻ͖΍͍͢؀ڥΛ࡞Δ
    w ϨϏϡʔΑΓલʹؒҧ͍ʹ

    ؾ෇͚Δ؀ڥΛ࡞Δ
    w ࡉ͔͘ೖΕͯ࢖͍ํΛνʔϜʹڞ༗
    

    View Slide

51. Mission 3:
    MODULE

    UPDATING

    STRATEGY
    

    View Slide

52. OQNΞοϓσʔτσʔͷಋೖ
    

    View Slide

53. OQNΞοϓσʔτσʔͭΒ͍໰୊
    w $)"/(&-0(Λ୳͢ͷʹ͕͔͔࣌ؒΔ
    w ࡞ۀऀʹ΋ϨϏϡΞʔʹ΋ෛ୲͕͔͔Δ
    w ϨϏϡʔࣗମʹख͕͔͔ؒΔ
    w ຊ౰ʹҰϲ݄͝ͱʹ΍Δ΋ͷͳͷ͔
    w ͲΕ͘Β͍ͷϖʔεͰݹͼ͍ͯ͘ͷ͔஌Γ͍ͨ
    

    View Slide

54. ZBSOPVUEBUFEGPSNBUUFS
    

    View Slide

55. $ yarn outdated --json
    

    View Slide

56. ZBSOPVUEBUFEGPSNBUUFS
    w $)"/(&-0(Λ.BSLEPXOʹؚΊͯग़ྗ
    w ύοέʔδͱ$)"/(&-0(ͷରΛ

    :".-ʹอଘ
    w .BDLFSFMʹݹ͍ύοέʔδ਺Λ౤ߘͰ͖Δ
    w ແࢹ͢ΔϑΝΠϧΛࢦఆͰ͖Δ
    w K2VFSZͷΞοϓσʔτͳͲ͸෼͚͍ͨ
    

    View Slide

57. View Slide

58. View Slide

59. IUUQEFWFMPQFSIBUFOBTUB⒎DPNFOUSZ
    

    View Slide

60. '"2
    2(SFFOLFFQFS͸ݕ౼ͨ͠
    

    View Slide

61. '"2
    "ͯ͠·ͤΜ
    

    View Slide

62. (SFFOLFFQFS
    w ͢Έ·ͤΜ஌Βͳ͔ͬͨ
    w ݕ౼ͯ͠΋࢖Θͳ͔͔ͬͨͳɺɺ
    w ϒϩάͰ͸(JU)VC&OUFSQSJTFΛ࢖͍ͬͯͯ

    ؾܰʹ͓ࢼ͠Ͱ͖ͳͦ͞͏
    w ZBSOPVUEBUFEGPSNBUUFS͘Β͍ͳΒ

    ޻਺ ίετ
    গͳͯ͘΋Ͱ͖Δ
    

    View Slide

63. Mission 4:
    REACTIZE

    VIEW
    

    View Slide

64. कΓ
    

    View Slide

65. ߈Ί
    

    View Slide

66. 3FBDUBTB5FNQMBUF&OHJOF
    

    View Slide

67. 3FBDUBTB5FNQMBUF&OHJOF
    w 9TMBUFͷ55FSTFΛ࢖͍ͬͯΔ
    w 1FSMͷςϯϓϨʔτΤϯδϯ
    w ૉ๿
    

    View Slide

68. [% IF element.selected %]

    class=“active”
    [% END %]
    3FBDUBTB5FNQMBUF&OHJOF
    

    View Slide

69. 3FBDUBTB5FNQMBUF&OHJOF
    3FBDUʹدͤΔ
    

    View Slide

70. 3FBDUBTB5FNQMBUF&OHJOF
    w 1FSM
    • $r->embed_state(‘pro’, $json)
    w +BWB4DSJQU
    • const state = InitialState.get(‘pro’)
    

    View Slide

71. View Slide

72. View Slide

73. View Slide

74. View Slide

75. 3FBDUBTB5FNQMBUF&OHJOF
    2443͠ͳ͍ͷ
    

    View Slide

76. 3FBDUBTB5FNQMBUF&OHJOF
    "ݱঢ়Ͱ͸443ʹ͢Δ

    ϝϦοτΛݟੵ΋͍ͬͯͳ͍
    

    View Slide

77. 1FSMPO3FBDUPO443
    w ·ͩେʑతʹਐΊ͍ͯΔΘ͚Ͱ͸ͳ͍
    w ͦ΋ͦ΋1FSMͰ443ͷ࣮੷͕গͳ͍
    w ఫୀՄೳͳܗͰਐΊ͍ͯΔ
    

    View Slide

78. IS THE

    ORDER

    MAINTAINED?
    ϑϩϯτΤϯυͷடং͸
    อͨΕ͍ͯΔ͔ʁ
    @masawada
    

    View Slide

79. ࠓ೔࿩ͨ͜͠ͱ
    w +4൪௕͕͍ͳͯ͘΋΍͍͚ͬͯΔ

    νʔϜͮ͘Γ
    w ςετ͕ॻ͖΍͍͢ྑ͘ͳ͍఺͕
    ෼͔Γ΍͍͢؀ڥͮ͘Γ
    w ৽ͨͳ͜ͱΛ͢Δͱ͖͸ఫୀ͠΍͘͢
    

    View Slide

80. ౰ͨΓલͷ͜ͱ
    Λॗʑͱ΍ͬͯ
    ͍͘εϐϦοτ
    

    View Slide

81. ·ͩ·ͩ
    ࢒Δ՝୊
    

    View Slide

82. ࠓޙ΍Γ͍ͨ
    w ͞ΒͳΔςετվળ
    w 1IBOUPN+4୤ग़
    w &&ςετ΋$*Ͱճ͢
    w υΩϡϝϯτͷߋ৽
    

    View Slide

83. ஍ಓʹվળΛଓ
    ͚͍ͯͧ͘ʂʂ

    ʂʂʂʂʂʂʂ
    ʂʂʂʂʂʂʂ
    

    View Slide

84. ྑ͍αʔϏεΛ
    ࡞͍ͬͯͧ͘ʂ

    ʂʂʂʂʂʂʂ
    ʂʂʂʂʂʂʂ
    

    View Slide

85. ͋Γ͕ͱ͏͍͟͝·ͨ͠
    

    View Slide