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

Transcript

1. 1.

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

2. 2.

   id:masawada

3. 3.

   None
4. 4.

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

5. 5.

   None
6. 6.

   ͸ͯͳϒϩά
   प೥ 

7. 7.

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

8. 8.

   /PEFֶԂࡇͰͷൃද

9. 9.

   ,ZPUPKT
   Ͱͷൃද

10. 10.

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

11. 11.

    ͷલʹ

12. 12.

    લճ·Ͱͷ
 ͋Β͢͡

13. 13.

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

14. 14.

    None
15. 15.

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

16. 16.

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

17. 17.

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

18. 18.

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

19. 19.

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

20. 20.

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

21. 21.

    ·ͩ·ͩ
    ൃల్্

22. 22.

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

23. 23.

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

24. 24.

    ͱ͜Ζ͕

25. 25.

    None
26. 26.

    None
27. 27.

    ࠓ೔࿩͢͜ͱ

28. 28.

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

29. 29.

    Mission 1: INPUT & OUTPUT

30. 30.

    +4൪௕ෆࡏ

31. 31.

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

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

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

33. 33.

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

34. 34.

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

35. 35.

    '8(ͷ։࠵

36. 36.

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

37. 37.

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

38. 38.

    18(ͱ͸

39. 39.

    None
40. 40.

    1BHF4QFFE
    *OTJHIUT

41. 41.

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

42. 42.

    '8(

43. 43.

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

44. 44.

    IMPROVE THE
 TEST
 ENVIRONMENT Mission 2:

45. 45.

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

46. 46.

    QPXFSBTTFSU CBCFMQMVHJOFNQPXFSBTTFSU

47. 47.

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

48. 48.

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

49. 49.

    None
50. 50.

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

51. 51.

    Mission 3: MODULE
 UPDATING
 STRATEGY

52. 52.

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

53. 53.

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

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

    ZBSOPVUEBUFEGPSNBUUFS

55. 55.

    $ yarn outdated --json

56. 56.

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

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

    None
58. 58.

    None
59. 59.

    IUUQEFWFMPQFSIBUFOBTUB⒎DPNFOUSZ

60. 60.

    '"2 2
    (SFFOLFFQFS͸ݕ౼ͨ͠

61. 61.

    '"2 "
    ͯ͠·ͤΜ

62. 62.

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


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

    Mission 4: REACTIZE
 VIEW

64. 64.

    कΓ

65. 65.

    ߈Ί

66. 66.

    3FBDU
    BT
    B
    5FNQMBUF
    &OHJOF

67. 67.

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

68. 68.

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

69. 69.

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

70. 70.

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

    state = InitialState.get(‘pro’)
71. 71.

    None
72. 72.

    None
73. 73.

    None
74. 74.

    None
75. 75.

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

76. 76.

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

77. 77.

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

78. 78.

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

79. 79.

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

80. 80.

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

81. 81.

    ·ͩ·ͩ
    ࢒Δ՝୊

82. 82.

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

83. 83.

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

84. 84.

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

85. 85.

    ͋Γ͕ͱ͏͍͟͝·ͨ͠