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

Transcript

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

2. id:masawada

3. None

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

5. None

6. ͸ͯͳϒϩά
   प೥ 

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

8. /PEFֶԂࡇͰͷൃද

9. ,ZPUPKT
   Ͱͷൃද

10. ࠓ೔͸͜ΕҎ߱
 ͷ͜ͱΛ࿩͠· ͢ʂʂʂʂʂʂ
    ʂʂʂʂʂʂʂ

11. ͷલʹ

12. લճ·Ͱͷ
 ͋Β͢͡

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

14. None

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

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

17. OQNΞοϓσʔτσʔͷಋೖ w ຖ݄ୈҰ݄༵೔Λ
 OQNΞοϓσʔτσʔʹ
    w ಉ࣌ʹ/PEFKTͷΞοϓσʔτ΋
 ߦͳ͏

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

19. ΦϨΦϨ'MVYΛ3FEVYʹدͤΔ w ͜Ε·Ͱ͸ಠࣗܰྔϥΠϒϥϦͰ
 'MVY
    w 3FBDU'MVYք۾ͷ஌͕ࣝඞཁ
    w νʔϜͷΤϯδχΞʹ
 ϑϩϯτΤϯυઐ໳͸ډͳ͍

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

21. ·ͩ·ͩ
    ൃల్্

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

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

24. ͱ͜Ζ͕

25. None
26. None

27. ࠓ೔࿩͢͜ͱ

28. ೥݄·Ͱʹ΍ͬͨ͜ͱ w ࠷৽৘ใΛΩϟονΞοϓ͢Δ
 ମ੍Λ੔͑Δ
    w ςετվળ
    w OQNΞοϓσʔτσʔͷഇࢭ
    w 3FBDUͷར༻ൣғΛ޿͛Δ

29. Mission 1: INPUT & OUTPUT

30. +4൪௕ෆࡏ

31. ࠷৽৘ใͷऩूͱڞ༗ w ऩू
    w ϑϩϯτΤϯυϥϯν
    w ࣾ֎ަྲྀ
    w ڞ༗
    w

    υΩϡϝϯτͷ੔උ
    w '8(ͷ։࠵ ݱࡏ͸ഇࢭ

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

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

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

35. '8(ͷ։࠵

36. '8(ͱ͸ w ϑϩϯτΤϯυϫʔΩϯάάϧʔϓ
    w ϑϩϯτΤϯυʹؔ͢Δ
 Α͠ͳ͠͝ͱΛ࿩͠߹͏
    w 18(ͱซ࠵

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

38. 18(ͱ͸

39. None

40. 1BHF4QFFE
    *OTJHIUT

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

42. '8(

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

44. IMPROVE THE
 TEST
 ENVIRONMENT Mission 2:

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

46. QPXFSBTTFSU CBCFMQMVHJOFNQPXFSBTTFSU

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

48. &O[ZNF 3FBDU
    $PNQPOFOUͷ
 ςετ͍͍ײ͡ʹ
 ॻ͚ΔΑ͏ʹ͢Δ΍ͭ

49. None

50. ςετ؀ڥͷվળ w ςετΛॻ͖΍͍͢؀ڥΛ࡞Δ
    w ϨϏϡʔΑΓલʹؒҧ͍ʹ
 ؾ෇͚Δ؀ڥΛ࡞Δ
    w ࡉ͔͘ೖΕͯ࢖͍ํΛνʔϜʹڞ༗

51. Mission 3: MODULE
 UPDATING
 STRATEGY

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

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

    w ͲΕ͘Β͍ͷϖʔεͰݹͼ͍ͯ͘ͷ͔஌Γ͍ͨ

54. ZBSOPVUEBUFEGPSNBUUFS

55. $ yarn outdated --json

56. ZBSOPVUEBUFEGPSNBUUFS w $)"/(&-0(Λ.BSLEPXOʹؚΊͯग़ྗ
    w ύοέʔδͱ$)"/(&-0(ͷରΛ
 :".-ʹอଘ
    w .BDLFSFMʹݹ͍ύοέʔδ਺Λ౤ߘͰ͖Δ
    w ແࢹ͢ΔϑΝΠϧΛࢦఆͰ͖Δ
    

    w K2VFSZͷΞοϓσʔτͳͲ͸෼͚͍ͨ
57. None
58. None

59. IUUQEFWFMPQFSIBUFOBTUB⒎DPNFOUSZ

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

61. '"2 "
    ͯ͠·ͤΜ

62. (SFFOLFFQFS w ͢Έ·ͤΜ஌Βͳ͔ͬͨ
    w ݕ౼ͯ͠΋࢖Θͳ͔͔ͬͨͳɺɺ
    w ϒϩάͰ͸(JU)VC
    &OUFSQSJTFΛ࢖͍ͬͯͯ
 ؾܰʹ͓ࢼ͠Ͱ͖ͳͦ͞͏
    w ZBSOPVUEBUFEGPSNBUUFS͘Β͍ͳΒ


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

63. Mission 4: REACTIZE
 VIEW

64. कΓ

65. ߈Ί

66. 3FBDU
    BT
    B
    5FNQMBUF
    &OHJOF

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

68. [% IF element.selected %]
 class=“active” [% END %] 3FBDU
    BT
    B
    5FNQMBUF
    &OHJOF

69. 3FBDU
    BT
    B
    5FNQMBUF
    &OHJOF 3FBDUʹدͤΔ

70. 3FBDU
    BT
    B
    5FNQMBUF
    &OHJOF w 1FSM
    • $r->embed_state(‘pro’, $json) w +BWB4DSJQU
    • const

    state = InitialState.get(‘pro’)
71. None
72. None
73. None
74. None

75. 3FBDU
    BT
    B
    5FNQMBUF
    &OHJOF 2
    443͠ͳ͍ͷ

76. 3FBDU
    BT
    B
    5FNQMBUF
    &OHJOF "
    ݱঢ়Ͱ͸443ʹ͢Δ
 ϝϦοτΛݟੵ΋͍ͬͯͳ͍

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

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

79. ࠓ೔࿩ͨ͜͠ͱ w +4൪௕͕͍ͳͯ͘΋΍͍͚ͬͯΔ
 νʔϜͮ͘Γ
    w ςετ͕ॻ͖΍͍͢
    
    ྑ͘ͳ͍఺͕ ෼͔Γ΍͍͢؀ڥͮ͘Γ
    w ৽ͨͳ͜ͱΛ͢Δͱ͖͸ఫୀ͠΍͘͢

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

81. ·ͩ·ͩ
    ࢒Δ՝୊

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

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

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

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