Pro Yearly is on sale from $80 to $50! »

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

E35ded9f4d9da564ecf85ad527f11639?s=47 masawada
July 12, 2017

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

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

E35ded9f4d9da564ecf85ad527f11639?s=128

masawada

July 12, 2017
Tweet

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 ৘ใڞ༗͸ࣾ಺άϧʔϓ PSJTTVF Ͱ

  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. 3FBDUBTB5FNQMBUF&OHJOF

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

  68. [% IF element.selected %]
 class=“active” [% END %] 3FBDUBTB5FNQMBUF&OHJOF

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

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

    state = InitialState.get(‘pro’)
  71. None
  72. None
  73. None
  74. None
  75. 3FBDUBTB5FNQMBUF&OHJOF 2443͠ͳ͍ͷ

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

  77. 1FSMPO3FBDUPO443 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. ͋Γ͕ͱ͏͍͟͝·ͨ͠