Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

masawada
July 12, 2017

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

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

masawada

July 12, 2017
Tweet

More Decks by masawada

Other Decks in Technology

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