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 full-size slide

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

    View full-size slide

  3. ͸ͯͳϒϩά
    प೥

    View full-size slide

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

    View full-size slide

  5. /PEFֶԂࡇͰͷൃද

    View full-size slide

  6. ,ZPUPKTͰͷൃද

    View full-size slide

  7. ࠓ೔͸͜ΕҎ߱

    ͷ͜ͱΛ࿩͠·
    ͢ʂʂʂʂʂʂ
    ʂʂʂʂʂʂʂ

    View full-size slide

  8. લճ·Ͱͷ

    ͋Β͢͡

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. OQNΞοϓσʔτσʔͷಋೖ
    w ຖ݄ୈҰ݄༵೔Λ

    OQNΞοϓσʔτσʔʹ
    w ಉ࣌ʹ/PEFKTͷΞοϓσʔτ΋

    ߦͳ͏

    View full-size slide

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

    View full-size slide

  14. ΦϨΦϨ'MVYΛ3FEVYʹدͤΔ
    w ͜Ε·Ͱ͸ಠࣗܰྔϥΠϒϥϦͰ

    'MVY
    w 3FBDU'MVYք۾ͷ஌͕ࣝඞཁ
    w νʔϜͷΤϯδχΞʹ

    ϑϩϯτΤϯυઐ໳͸ډͳ͍

    View full-size slide

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

    View full-size slide

  16. ·ͩ·ͩ
    ൃల్্

    View full-size slide

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

    View full-size slide

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

    ʂʂʂʂʂʂʂ
    ʂʂʂʂʂʂʂ

    View full-size slide

  19. ࠓ೔࿩͢͜ͱ

    View full-size slide

  20. ೥݄·Ͱʹ΍ͬͨ͜ͱ
    w ࠷৽৘ใΛΩϟονΞοϓ͢Δ

    ମ੍Λ੔͑Δ
    w ςετվળ
    w OQNΞοϓσʔτσʔͷഇࢭ
    w 3FBDUͷར༻ൣғΛ޿͛Δ

    View full-size slide

  21. Mission 1:
    INPUT &
    OUTPUT

    View full-size slide

  22. +4൪௕ෆࡏ

    View full-size slide

  23. ࠷৽৘ใͷऩूͱڞ༗
    w ऩू
    w ϑϩϯτΤϯυϥϯν
    w ࣾ֎ަྲྀ
    w ڞ༗
    w υΩϡϝϯτͷ੔උ
    w '8(ͷ։࠵ ݱࡏ͸ഇࢭ

    View full-size slide

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

    View full-size slide

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

    w ٧·ΓͲ͜ΖΛͳ͘͢
    w ࢦ਑ͷڞ༗
    w ελΠϧͷࢦఠͳͲ͸&4-JOUʹ೚ͤΔ

    View full-size slide

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

    View full-size slide

  27. '8(ͱ͸
    w ϑϩϯτΤϯυϫʔΩϯάάϧʔϓ
    w ϑϩϯτΤϯυʹؔ͢Δ

    Α͠ͳ͠͝ͱΛ࿩͠߹͏
    w 18(ͱซ࠵

    View full-size slide

  28. 18(ͱ͸
    w ύϑΥʔϚϯεϫʔΩϯάάϧʔϓ
    w ΠϯϑϥपΓͷ༷ࢠΛఆظతʹ؍࡯
    w ରԠ͕ඞཁͰ͋Ε͹

    *TTVFͷ༏ઌ౓Λ্͛ΒΕΔ

    View full-size slide

  29. 1BHF4QFFE*OTJHIUT

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  32. IMPROVE THE

    TEST

    ENVIRONMENT
    Mission 2:

    View full-size slide

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

    View full-size slide

  34. QPXFSBTTFSU
    CBCFMQMVHJOFNQPXFSBTTFSU

    View full-size slide

  35. QPXFSBTTFSU
    require(‘assert’);

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

    View full-size slide

  36. &O[ZNF
    3FBDU$PNQPOFOUͷ

    ςετ͍͍ײ͡ʹ

    ॻ͚ΔΑ͏ʹ͢Δ΍ͭ

    View full-size slide

  37. ςετ؀ڥͷվળ
    w ςετΛॻ͖΍͍͢؀ڥΛ࡞Δ
    w ϨϏϡʔΑΓલʹؒҧ͍ʹ

    ؾ෇͚Δ؀ڥΛ࡞Δ
    w ࡉ͔͘ೖΕͯ࢖͍ํΛνʔϜʹڞ༗

    View full-size slide

  38. Mission 3:
    MODULE

    UPDATING

    STRATEGY

    View full-size slide

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

    View full-size slide

  40. OQNΞοϓσʔτσʔͭΒ͍໰୊
    w $)"/(&-0(Λ୳͢ͷʹ͕͔͔࣌ؒΔ
    w ࡞ۀऀʹ΋ϨϏϡΞʔʹ΋ෛ୲͕͔͔Δ
    w ϨϏϡʔࣗମʹख͕͔͔ؒΔ
    w ຊ౰ʹҰϲ݄͝ͱʹ΍Δ΋ͷͳͷ͔
    w ͲΕ͘Β͍ͷϖʔεͰݹͼ͍ͯ͘ͷ͔஌Γ͍ͨ

    View full-size slide

  41. ZBSOPVUEBUFEGPSNBUUFS

    View full-size slide

  42. $ yarn outdated --json

    View full-size slide

  43. ZBSOPVUEBUFEGPSNBUUFS
    w $)"/(&-0(Λ.BSLEPXOʹؚΊͯग़ྗ
    w ύοέʔδͱ$)"/(&-0(ͷରΛ

    :".-ʹอଘ
    w .BDLFSFMʹݹ͍ύοέʔδ਺Λ౤ߘͰ͖Δ
    w ແࢹ͢ΔϑΝΠϧΛࢦఆͰ͖Δ
    w K2VFSZͷΞοϓσʔτͳͲ͸෼͚͍ͨ

    View full-size slide

  44. IUUQEFWFMPQFSIBUFOBTUB⒎DPNFOUSZ

    View full-size slide

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

    View full-size slide

  46. '"2
    "ͯ͠·ͤΜ

    View full-size slide

  47. (SFFOLFFQFS
    w ͢Έ·ͤΜ஌Βͳ͔ͬͨ
    w ݕ౼ͯ͠΋࢖Θͳ͔͔ͬͨͳɺɺ
    w ϒϩάͰ͸(JU)VC&OUFSQSJTFΛ࢖͍ͬͯͯ

    ؾܰʹ͓ࢼ͠Ͱ͖ͳͦ͞͏
    w ZBSOPVUEBUFEGPSNBUUFS͘Β͍ͳΒ

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

    View full-size slide

  48. Mission 4:
    REACTIZE

    VIEW

    View full-size slide

  49. 3FBDUBTB5FNQMBUF&OHJOF

    View full-size slide

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

    View full-size slide

  51. [% IF element.selected %]

    class=“active”
    [% END %]
    3FBDUBTB5FNQMBUF&OHJOF

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  54. 3FBDUBTB5FNQMBUF&OHJOF
    2443͠ͳ͍ͷ

    View full-size slide

  55. 3FBDUBTB5FNQMBUF&OHJOF
    "ݱঢ়Ͱ͸443ʹ͢Δ

    ϝϦοτΛݟੵ΋͍ͬͯͳ͍

    View full-size slide

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

    View full-size slide

  57. IS THE

    ORDER

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

    View full-size slide

  58. ࠓ೔࿩ͨ͜͠ͱ
    w +4൪௕͕͍ͳͯ͘΋΍͍͚ͬͯΔ

    νʔϜͮ͘Γ
    w ςετ͕ॻ͖΍͍͢ྑ͘ͳ͍఺͕
    ෼͔Γ΍͍͢؀ڥͮ͘Γ
    w ৽ͨͳ͜ͱΛ͢Δͱ͖͸ఫୀ͠΍͘͢

    View full-size slide

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

    View full-size slide

  60. ·ͩ·ͩ
    ࢒Δ՝୊

    View full-size slide

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

    View full-size slide

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

    ʂʂʂʂʂʂʂ
    ʂʂʂʂʂʂʂ

    View full-size slide

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

    ʂʂʂʂʂʂʂ
    ʂʂʂʂʂʂʂ

    View full-size slide

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

    View full-size slide