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

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

Transcript

1. IS THE
 ORDER
 MAINTAINED? ϑϩϯτΤϯυͷடং͸ อͨΕ͍ͯΔ͔ʁ @masawada
2. id:masawada
4. ࠓ͙͢ొ࿥ʂ IUUQCMPHIBUFOBOFKQSFHJTUFS !!!!!!!!!!!!!! !!!!!!!!!!!!!! !!!!!!!!!!!!!!! !!!!!!!!!!!!!! !!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!! !!!!!!!!!!!!!!! !!!!!!!!!!!!!!!
6. ͸ͯͳϒϩά
   प೥ 
7. ख़੒͞Εͨ
   +4ίʔυ܈
8. /PEFֶԂࡇͰͷൃද
9. ,ZPUPKT
   Ͱͷൃද
10. ࠓ೔͸͜ΕҎ߱
 ͷ͜ͱΛ࿩͠· ͢ʂʂʂʂʂʂ
    ʂʂʂʂʂʂʂ
11. ͷલʹ
12. લճ·Ͱͷ
 ͋Β͢͡
13. +4ͷ෼ׂ w ݹ͖ྑ͖DPODBU͔ΒCSPXTFSJGZʹ
    w Ұ෦ͷϑΝΠϧ͸ߦ͘Β͍͋ͬͨʜ
    w ˠ
    ߦʹ
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. ͱ͜Ζ͕
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(ͱ͸
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ͷ
 ςετ͍͍ײ͡ʹ
 ॻ͚ΔΑ͏ʹ͢Δ΍ͭ
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ͷΞοϓσʔτͳͲ͸෼͚͍ͨ
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’)
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. ͋Γ͕ͱ͏͍͟͝·ͨ͠