survival-strategy-of-the-frontend

Transcript

1. Survival Strategy of the ϑϩϯτΤϯυ 2016/10/15 @sakunyo 
2. $ npm start twitter : @sakunyo job:ϑϦʔϥϯε
   fun: Sci-Fi, Comedy (The Big Bang Theory) like: Vim, Sass, express, npm, Docker, jetBrains, BrowserStack, Bash, Proxy * * * Web੍࡞डୗ͔ΒWebαʔϏε΁స޲ɺ"#ςετͳͲʜ 
3. ϑϩϯτΤϯυͷऔΓ·͘؀ڥ
   &OWJSPONFOU
    69ɺϢʔβϏϦςΟɺΞΫηγϏϦςΟɺ࣮ߦ؀ڥʢFMFDUSPO
   ϒϥ΢βʣ
    6*ʢσβΠϯʣτϨϯυͷҠΓมΘΓ
   5FDIOJDBM
    41"
    ٕज़ͷग़ݱϖʔε͕ૣ͍ʁʢशಘಋೖίετʣ 
4.  Կ΋͠ͳͯ͘΋ʢ؀ڥ͕ʣมԽ͢Δʂ
   ӡ༻ઓུ͕ඞཁʂ
5.  ҆શͰมԽʹڧ͍ϓϩμΫτͱ͸ʁ
    ϑϩϯτΤϯυͷӡ༻ʹ଱͑Δ
    ϦϑΝΫλϦϯά͠΍͍͢
    ίʔυʢαʔϏεʣͷ҆શੑΛߴΊΔ
    ίʔυͷ඼࣭ͱํ޲ੑʢΞʔΩςΫνϟʣ͕ఆ·͍ͬͯΔ
   ࣮ݱ͢ΔͨΊʹ
   ϨΨγʔίʔυվળΨΠυ
   Λࢀߟʹɺ
   ͔͠͠ɺϨΨγʔίʔυվળΨΠυͷ୊ࡐͰ͋Δओཁݴޠ͕
   +BWB
   +BWB4DSJQU
   ͱ͸؀ڥ͕ҧ͏ʂ
   ͔͠͠ࢀߟʹͳΔ෦෼͕͖ͬͱ͋Δ͸ͣʜ
6. legacy code  photo by sorarium
7. ϨΨγʔίʔυ
   ϨΨγʔίʔυͷѱ॥؀
   w ίʔυͷ୅ँ͕ѱ͘ͳΔͱ
 ৭ʑͳࢪࡦ͕ଧͯͳ͍
   w αʔϏεྗͷ௿Լ  ػೳͷ௥Ճͱվम  όά
    6*ͷվળ
    "#ςετ ࣮૷  ίʔυͷཧղ
    Ձ஋wϓϥΠΦϦςΟ
    ඇޓ׵ͳػೳ ෛ࠴  ෳࡶͳίʔυɾύον
    ௿͍ϓϥΠΦϦςΟ
    ςετίʔυ͕ͳ͍
8. )5.-ͭΒ͍
   )5.-ͱ+BWB4DSJQUͷґଘ͕ϖʔδશମʹ͓ΑͿ  JavaScript HTML Element Function Element Element Element Function )5.-ͷߏ଄ʹରͯ͠+BWB4DSJQUͱͷ݁߹Օॴ͕
   ଟ͘ͳΔ΄ͲϦεΫ͕ߴ͘ͳΔ
    )5.-ͷߏ଄͕มΘΔͱಈ࡞͕มΘΔ
    +BWB4DSJQUͷݺͼग़͠ॱͰ6*ͷಈ࡞͕มΘΔ
    ҙਤ͍ͯ͠ͳ͍ಈ࡞Ͱม਺͕มߋ͞ΕΔ
9. Өڹൣғ͕ෳࡶԽ͢ΔࣄͰϦϑΝΫλϦϯά͕Ͱ͖ͳ͍
    )5.-Λมߋͨ͠Β+BWB4DSJQU͕ΤϥʔΛు͘
    ⁶
   +BWB4DSJQUΛมߋͨ͠Β6*͕յΕΔ
    ΤϥʔʹͳΒͣʹ࣮ߦ͞ΕΔίʔυ
    Өڹ͍ͯ͠ͳ͍ͱࢥΘΕͨՕॴ͕࣮͸ଞͷػೳʹӨڹ͍ͯ͠Δ
   ෳࡶԽͨ͠001ͷܧঝΑΓ΋ͭΒͦ͏ͩʜ  க໋త
10. ϓϨθϯςʔγϣϯͱσʔλͷ෼཭ΛؤுΔ
     )5.-ͱ+4ͷ݁߹ํ޲ʢ݁߹ՕॴʣΛ੔ཧ͢Δʢ'MVY
    MJLFʣ
     7JFXʹϩδοΫΛ٧Ίࠐ·ͳ͍
     )5.-ଆʹσʔλΛ࣋ͭ৔߹ʹ͸ Read Only ͰΞΫηε͢ΔʢEBUBଐੑʣ
     3FBDU
    7VF
    "OHVMBS
    ͳͲίϯϙʔωϯτԽʹಛԽͨ͠ϥΠϒϥϦΛ࢖͏
     )5.-ۃྗॻ͖ͨ͘ͳ͍͞ΜνʔϜ
     খ͞ͳίϯϙʔωϯτ͔Βಋೖ͢Δ  Dispatcher Store View Action Flux
11.  σʔλϑϩʔΛݟ௚͚ͩ͢Ͱ΋
    େ෯ʹվળ
12. +BWB4DSJQUͷείʔϓ
    ແܭըͳΫϩʔδϟཚ༻͕ͭΒ͍
     ςετ͍ͨؔ͠਺͕ؔ਺είʔϓͷதʹ͋Δ
     ςετɺϦϑΝΫλϦϯάͭΒ͍
     ϨΨγʔίʔυվળΨΠυͰ͸
     ݕग़༻ม਺Λ༻ҙ͢Δʢςετͷ֬ೝ༻ʹҰ࣌తʹಋೖ͢Δม਺ʣ
     ߜΓࠐΈ఺Λݟ͚ͭΔʢػೳΛςετ͢ΔͨΊͷཧ૝తͳ৔ॴʣ
     είʔϓ֎΁ͷνϥݟͤม਺΍ؔ਺Λ༻ҙ͢ΔࣄͰطଘͷಈ࡞͸ͦͷ··Ͱςετ Ͱ͖ͦ͏
     ίʔυΛϞδϡʔϧԽͯ͠
    SFRVJSF
    Λੵۃతʹ࢖͏
     #SPXTFSJGZ
    8FCQBDL
    ͋Γ͕͍ͨ 
13. ϦϑΝΫλϦϯά
    ϦϑΝΫλϦϯά͸ػೳΛมߋͤͣʹίʔυͷ඼࣭ΛߴΊΔ
     ςετίʔυͷͳ͍ϦϑΝΫλ͸ଘࡏ͠ͳ͍
     ςετલఏͰϦϑΝΫλϦϯάΛ͢ΔࣄΛపఈ͢Δ
     ػೳΛมߋ͍ͨ͠ཉٻʹෛ͚ͳ͍ڧ͍৺͕ඞཁ
    ϦϑΝΫλϦϯά΍ςετ௥Ճʹదͨ͠ύλʔϯΛ༻͍Δ
     ϥοϓϝιουɺεϓϥ΢τϝιουɺγάωνϟͷҡ࣋
     ػೳΛۃྗมߋͤͣʹςετՄೳͳঢ়ଶʹ͢Δखॱ 
14. +BWB4DSJQUͷ࣮ߦ࣌Τϥʔ
    Τϥʔݕग़͍ͨ͠
     ΤϥʔΛग़͢ίʔυ
    WT
    Τϥʔ͕ग़ͳ͍ίʔυ
     Τϥʔ͕ൃੜ͠ͳ͍ίʔυ͸໰୊ʹؾ෇͖ʹ͍͘
     +BWB4DSJQU͸ίϯύΠϧෆཁͳͷͰɺ࣮ߦ࣌·ͰΤϥʔʹؾ෇͔ͳ͍
     K2VFSZΛ࢖͍ͬͯͯ΋ಉ͘͡ΤϥʔʹؾΛ͚ͭΔ
     ྫ֎Λ౤͛ΔࣄΛڪΕͯ͸͍͚ͳ͍
     ΤϥʔΛѲΓͭͿ͞ͳ͍
    ద੾ͳྫ֎Λͳ͛Α͏ 
15. .VUBCMFͭΒ͍
    ͏͔ͬΓ஋Λมߋͯ͠͠·͍σʔλʹෆ੔߹͕ʜ
    +BWB4DSJQUͰ
    *NNVUBCMFʢෆมʣͱ.VUBCMFʢมߋՄೳʣΛ࢖͍෼͚Δ
     PCKFDU
    Ͱঢ়ଶΛ؅ཧ͢ΔͷͳΒ
    4UPSFʢ.PEFMʣΛؤுΔɻFH
    3FEVY
     FTMJOU
     *NNVUBCMFKT
     QVSF
    GVODUJPO
     TUBUFMFTT
     6*ͷ৔߹ʹ͸ཁૉΛมߋ͢Δ͜ͱ͕ଟ͍ͷͰ
    TUBUFMFTT
    ʹ͸ݶ౓͕͋Δ
     Ұൠతʹม਺͸গͳ͍ํ͕޷·͍͠ͱ͞Ε͍ͯΔ  WBS
    EBUB
    
    GPPHFU%BUB 
    
    UIJTEBUB
    EBUBqH
    
    USVF
    
    0CKFDU͕ࢀরͳͷΛ๨Ε্ͯॻ͖
16.  ίʔυͷঢ়ଶʹݟ߹ͬͨύλʔϯΛ
    ༻͍ΔࣄͰԼ஍͕Ͱ͖Δ
17. testing  photo by d_jan
18. ςετ͕͋Ε͹҆৺ʁ
     ϓϩμΫτͷՁ஋͕͓͓͸͹ʹԼ͕Δ
     ػೳ͠ͳ͍ϑΥʔϜɺػೳ͠ͳ͍6*
     ಛఆͷϒϥ΢β͕εϙΠϧ͞ΕΔ6*
     ςετͷछྨʹΑͬͯ͸๷͛ͳ͍ࣄ΋͋Δ
     5FTU
    ͷಛੑʹΑΓΧόʔ͢Δൣғ͕ҧ͏ͷͰͲΕ͔ҰͭͰे෼Ͱ͸ͳ͍
     ςετʹ͸ίετ͕͔͔Δ
    ςετ͕͋ΔࣄͰ
     ίʔυͷมߋ͕͜Θ͘ͳ͍
     ϓϩμΫτͷՁ஋͕ߴ͘ͳΔ
     Ϣʔβʔʹ༏͍͠ 
19. ςετίʔυͷ੒௕ઓུ
    ςετίʔυ͕গͳ͍ʢ΋͘͠͸ςετ͕ͳ͍ʣ
     ӡ༻͞Ε͍ͯΔίʔυʹରͯ͠ςετΛ௥Ճ͢Δͷ͸େม
    ϨΨγʔίʔυ΁ͷରॲύλʔϯͰෛ͚ͳ͍
    ςετΛे෼ʹ༻ҙ͢Δ͕࣌ؒͳ͍
     Ϣχοτςετ
     ςετҎ֎ͷखஈΛ࢖͏ʢػցతʹςετΛ͢Δʣ
     FTMJOU
     qPXUZQF 
20. ඞཁͳςετ͔Β௥Ճ͢Δ
     ࢓༷Խςετ
     ࣮ࡍͷৼΔ෣͍Λ໌Β͔ʹ͢ΔͨΊͷςετ
     όά΍ෆे෼ͳػೳ͕ݟ͔ͭͬͯ΋खΛೖΕͳ͍
     Ϣʔβʔૢ࡞ʹ߹ΘͤͯςετΛ௥Ճ͢ΔʢGFBUVSF
    #%%ʣ
     ػೳ͠ͳ͍6*͸Ϣʔβʔʹͱͬͯ࠷ѱͷܦݧ
     4FMFOJVN
    #SPXTFS4UBDL
    ͳͲͰࣗಈԽ͢Δ  ࢓༷Խςετ ৼΔ෣͍ςετ
 #%% ςετ͕ͳ͍ ςετεΠʔτͷ੒௕
21. 5ZQF
     ੩తղੳ͕͸͔ͲΔ
     ίϯύΠϥ·͔ͤ
     ςετ௥ՃͷϦϑΝΫλϦϯά࣌ʹ
 ίϯύΠϧΤϥʔΛࢀߟʹϦϑΝΫλΛਐΊΔख๏
     *OUFSGBDF
    5ZQF
    Λ׆༻ͯ͠ΤϥʔΛݕग़͠΍͘͢͢Δ  
    !qPX
    
    UZQF
    5
    
    OVNCFS
    WBS
    Y
    5
    
    
    
    Y
    5
    
    l)FMMPz
    
    
    FSSPS
22. ྫ֎ॲཧܥͷςετ
    ςετͰݕग़Ͱ͖ͳ͍Τϥʔ͸ऩू͢Δ
     ΤϥʔϩάΛऩू͢Δ
     XJOEPXPOFSSPS
    
    ϩάऩूαʔόʔ
     TFOUSZ
    SPMMCBS
    "#ςετ͸ςετ͢Δ΂͖ʁ
     "#ςετͰϩδοΫ͕มߋ͞ΕΔ৔߹ͭΒ͍ʜ
     ϕλʔͳํ๏͕ཉ͍͠
     "#ςετͷ+BWB4DSJQU
    Λ֎෦αʔϏεʹஔ͔ͳ͍ 
23. ·ͱΊ
    ϨΨγʔίʔυվળΨΠυΛಡΜͰֶΜͩ͜ͱ
     ϨΨγʔίʔυ͕͜Θ͘ͳ͘ͳͬͨ
     ܧঝɺϝιου ؔ਺ ͷਫ਼౓͕ߴ͘ͳͬͨ
     ύλʔϯɾΞʔΩςΫνϟେࣄ
     K2VFSZ͸ѱ͘ͳ͔ͬͨ
     ѱ͍ͷ͸ґଘʢӨڹʣΛແࢹͨ͠ίʔυͩͬͨ 
24.  ϨΨγʔίʔυʹཱͪ޲͔͏ज़Λֶͼ
    ΈΜͳ͕ϋοϐʔʹͳΔ
25. ࢀߟ
     ϨΨγʔίʔυվળΨΠυ
 .JDIBFM
    $
    'FBUIFST
 ೔ຊޠ
    IUUQXXXTIPFJTIBDPKQCPPLEFUBJM 
26. fin.