survival-strategy-of-the-frontend

Survival Strategy of the ϑϩϯτΤϯυ 2016/10/15 @sakunyo

$ 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αʔϏε΁స޲ɺ"#ςετͳͲʜ

ϑϩϯτΤϯυͷऔΓ·͘؀ڥ &OWJSPONFOU 69ɺϢʔβϏϦςΟɺΞΫηγϏϦςΟɺ࣮ߦ؀ڥʢFMFDUSPO ϒϥ΢βʣ 6*ʢσβΠϯʣτϨϯυͷҠΓมΘΓ 5FDIOJDBM 41"
ٕज़ͷग़ݱϖʔε͕ૣ͍ʁʢशಘಋೖίετʣ

Կ΋͠ͳͯ͘΋ʢ؀ڥ͕ʣมԽ͢Δʂ ӡ༻ઓུ͕ඞཁʂ

҆શͰมԽʹڧ͍ϓϩμΫτͱ͸ʁ ϑϩϯτΤϯυͷӡ༻ʹ଱͑Δ ϦϑΝΫλϦϯά͠΍͍͢ ίʔυʢαʔϏεʣͷ҆શੑΛߴΊΔ ίʔυͷ඼࣭ͱํ޲ੑʢΞʔΩςΫνϟʣ͕ఆ·͍ͬͯΔ
࣮ݱ͢ΔͨΊʹϨΨγʔίʔυվળΨΠυΛࢀߟʹɺ ͔͠͠ɺϨΨγʔίʔυվળΨΠυͷ୊ࡐͰ͋Δओཁݴޠ͕+BWB +BWB4DSJQUͱ͸؀ڥ͕ҧ͏ʂ ͔͠͠ࢀߟʹͳΔ෦෼͕͖ͬͱ͋Δ͸ͣʜ

legacy code photo by sorarium

ϨΨγʔίʔυ ϨΨγʔίʔυͷѱ॥؀ w ίʔυͷ୅ँ͕ѱ͘ͳΔͱ  ৭ʑͳࢪࡦ͕ଧͯͳ͍ w αʔϏεྗͷ௿Լ ػೳͷ௥Ճͱվम
όά 6*ͷվળ "#ςετ ࣮૷ ίʔυͷཧղ Ձ஋wϓϥΠΦϦςΟ ඇޓ׵ͳػೳ ෛ࠴ ෳࡶͳίʔυɾύον ௿͍ϓϥΠΦϦςΟ ςετίʔυ͕ͳ͍

)5.-ͭΒ͍ )5.-ͱ+BWB4DSJQUͷґଘ͕ϖʔδશମʹ͓ΑͿ JavaScript HTML Element Function Element Element Element
Function )5.-ͷߏ଄ʹରͯ͠+BWB4DSJQUͱͷ݁߹Օॴ͕ ଟ͘ͳΔ΄ͲϦεΫ͕ߴ͘ͳΔ )5.-ͷߏ଄͕มΘΔͱಈ࡞͕มΘΔ +BWB4DSJQUͷݺͼग़͠ॱͰ6*ͷಈ࡞͕มΘΔ ҙਤ͍ͯ͠ͳ͍ಈ࡞Ͱม਺͕มߋ͞ΕΔ

Өڹൣғ͕ෳࡶԽ͢ΔࣄͰϦϑΝΫλϦϯά͕Ͱ͖ͳ͍ )5.-Λมߋͨ͠Β+BWB4DSJQU͕ΤϥʔΛు͘ ⁶+BWB4DSJQUΛมߋͨ͠Β6*͕յΕΔ ΤϥʔʹͳΒͣʹ࣮ߦ͞ΕΔίʔυ Өڹ͍ͯ͠ͳ͍ͱࢥΘΕͨՕॴ͕࣮͸ଞͷػೳʹӨڹ͍ͯ͠Δ ෳࡶԽͨ͠001ͷܧঝΑΓ΋ͭΒͦ͏ͩʜ
க໋త

ϓϨθϯςʔγϣϯͱσʔλͷ෼཭ΛؤுΔ )5.-ͱ+4ͷ݁߹ํ޲ʢ݁߹ՕॴʣΛ੔ཧ͢Δʢ'MVYMJLFʣ 7JFXʹϩδοΫΛ٧Ίࠐ·ͳ͍ )5.-ଆʹσʔλΛ࣋ͭ৔߹ʹ͸ Read Only ͰΞΫηε͢ΔʢEBUBଐੑʣ
3FBDU 7VF "OHVMBSͳͲίϯϙʔωϯτԽʹಛԽͨ͠ϥΠϒϥϦΛ࢖͏ )5.-ۃྗॻ͖ͨ͘ͳ͍͞ΜνʔϜ খ͞ͳίϯϙʔωϯτ͔Βಋೖ͢Δ Dispatcher Store View Action Flux

σʔλϑϩʔΛݟ௚͚ͩ͢Ͱ΋ େ෯ʹվળ

+BWB4DSJQUͷείʔϓ ແܭըͳΫϩʔδϟཚ༻͕ͭΒ͍ ςετ͍ͨؔ͠਺͕ؔ਺είʔϓͷதʹ͋Δ ςετɺϦϑΝΫλϦϯάͭΒ͍ ϨΨγʔίʔυվળΨΠυͰ͸ ݕग़༻ม਺Λ༻ҙ͢Δʢςετͷ֬ೝ༻ʹҰ࣌తʹಋೖ͢Δม਺ʣ
ߜΓࠐΈ఺Λݟ͚ͭΔʢػೳΛςετ͢ΔͨΊͷཧ૝తͳ৔ॴʣ είʔϓ֎΁ͷνϥݟͤม਺΍ؔ਺Λ༻ҙ͢ΔࣄͰطଘͷಈ࡞͸ͦͷ··Ͱςετ Ͱ͖ͦ͏ ίʔυΛϞδϡʔϧԽͯ͠SFRVJSFΛੵۃతʹ࢖͏ #SPXTFSJGZ 8FCQBDL͋Γ͕͍ͨ

ϦϑΝΫλϦϯά ϦϑΝΫλϦϯά͸ػೳΛมߋͤͣʹίʔυͷ඼࣭ΛߴΊΔ ςετίʔυͷͳ͍ϦϑΝΫλ͸ଘࡏ͠ͳ͍ ςετલఏͰϦϑΝΫλϦϯάΛ͢ΔࣄΛపఈ͢Δ ػೳΛมߋ͍ͨ͠ཉٻʹෛ͚ͳ͍ڧ͍৺͕ඞཁ ϦϑΝΫλϦϯά΍ςετ௥Ճʹదͨ͠ύλʔϯΛ༻͍Δ
ϥοϓϝιουɺεϓϥ΢τϝιουɺγάωνϟͷҡ࣋ ػೳΛۃྗมߋͤͣʹςετՄೳͳঢ়ଶʹ͢Δखॱ

+BWB4DSJQUͷ࣮ߦ࣌Τϥʔ Τϥʔݕग़͍ͨ͠ ΤϥʔΛग़͢ίʔυWTΤϥʔ͕ग़ͳ͍ίʔυ Τϥʔ͕ൃੜ͠ͳ͍ίʔυ͸໰୊ʹؾ෇͖ʹ͍͘ +BWB4DSJQU͸ίϯύΠϧෆཁͳͷͰɺ࣮ߦ࣌·ͰΤϥʔʹؾ෇͔ͳ͍ K2VFSZΛ࢖͍ͬͯͯ΋ಉ͘͡ΤϥʔʹؾΛ͚ͭΔ
ྫ֎Λ౤͛ΔࣄΛڪΕͯ͸͍͚ͳ͍ ΤϥʔΛѲΓͭͿ͞ͳ͍ ద੾ͳྫ֎Λͳ͛Α͏

.VUBCMFͭΒ͍ ͏͔ͬΓ஋Λมߋͯ͠͠·͍σʔλʹෆ੔߹͕ʜ +BWB4DSJQUͰ*NNVUBCMFʢෆมʣͱ.VUBCMFʢมߋՄೳʣΛ࢖͍෼͚Δ PCKFDUͰঢ়ଶΛ؅ཧ͢ΔͷͳΒ4UPSFʢ.PEFMʣΛؤுΔɻFH3FEVY FTMJOU *NNVUBCMFKT
QVSFGVODUJPO TUBUFMFTT 6*ͷ৔߹ʹ͸ཁૉΛมߋ͢Δ͜ͱ͕ଟ͍ͷͰTUBUFMFTTʹ͸ݶ౓͕͋Δ Ұൠతʹม਺͸গͳ͍ํ͕޷·͍͠ͱ͞Ε͍ͯΔ WBSEBUBGPPHFU%BUB UIJTEBUB EBUBqHUSVF0CKFDU͕ࢀরͳͷΛ๨Ε্ͯॻ͖

ίʔυͷঢ়ଶʹݟ߹ͬͨύλʔϯΛ ༻͍ΔࣄͰԼ஍͕Ͱ͖Δ

testing photo by d_jan

ςετ͕͋Ε͹҆৺ʁ ϓϩμΫτͷՁ஋͕͓͓͸͹ʹԼ͕Δ ػೳ͠ͳ͍ϑΥʔϜɺػೳ͠ͳ͍6* ಛఆͷϒϥ΢β͕εϙΠϧ͞ΕΔ6* ςετͷछྨʹΑͬͯ͸๷͛ͳ͍ࣄ΋͋Δ
5FTUͷಛੑʹΑΓΧόʔ͢Δൣғ͕ҧ͏ͷͰͲΕ͔ҰͭͰे෼Ͱ͸ͳ͍ ςετʹ͸ίετ͕͔͔Δ ςετ͕͋ΔࣄͰ ίʔυͷมߋ͕͜Θ͘ͳ͍ ϓϩμΫτͷՁ஋͕ߴ͘ͳΔ Ϣʔβʔʹ༏͍͠

ςετίʔυͷ੒௕ઓུ ςετίʔυ͕গͳ͍ʢ΋͘͠͸ςετ͕ͳ͍ʣ ӡ༻͞Ε͍ͯΔίʔυʹରͯ͠ςετΛ௥Ճ͢Δͷ͸େม ϨΨγʔίʔυ΁ͷରॲύλʔϯͰෛ͚ͳ͍ ςετΛे෼ʹ༻ҙ͢Δ͕࣌ؒͳ͍ Ϣχοτςετ ςετҎ֎ͷखஈΛ࢖͏ʢػցతʹςετΛ͢Δʣ
FTMJOU qPXUZQF

ඞཁͳςετ͔Β௥Ճ͢Δ ࢓༷Խςετ ࣮ࡍͷৼΔ෣͍Λ໌Β͔ʹ͢ΔͨΊͷςετ όά΍ෆे෼ͳػೳ͕ݟ͔ͭͬͯ΋खΛೖΕͳ͍ Ϣʔβʔૢ࡞ʹ߹ΘͤͯςετΛ௥Ճ͢ΔʢGFBUVSF #%%ʣ
ػೳ͠ͳ͍6*͸Ϣʔβʔʹͱͬͯ࠷ѱͷܦݧ 4FMFOJVN #SPXTFS4UBDLͳͲͰࣗಈԽ͢Δ ࢓༷Խςετ ৼΔ෣͍ςετ  #%% ςετ͕ͳ͍ ςετεΠʔτͷ੒௕

5ZQF ੩తղੳ͕͸͔ͲΔ ίϯύΠϥ·͔ͤ ςετ௥ՃͷϦϑΝΫλϦϯά࣌ʹ  ίϯύΠϧΤϥʔΛࢀߟʹϦϑΝΫλΛਐΊΔख๏ *OUFSGBDF
5ZQFΛ׆༻ͯ͠ΤϥʔΛݕग़͠΍͘͢͢Δ !qPX UZQF5OVNCFS WBSY5 Y5l)FMMPzFSSPS

ྫ֎ॲཧܥͷςετ ςετͰݕग़Ͱ͖ͳ͍Τϥʔ͸ऩू͢Δ ΤϥʔϩάΛऩू͢Δ XJOEPXPOFSSPS ϩάऩूαʔόʔ TFOUSZ SPMMCBS
"#ςετ͸ςετ͢Δ΂͖ʁ "#ςετͰϩδοΫ͕มߋ͞ΕΔ৔߹ͭΒ͍ʜ ϕλʔͳํ๏͕ཉ͍͠ "#ςετͷ+BWB4DSJQUΛ֎෦αʔϏεʹஔ͔ͳ͍

·ͱΊ ϨΨγʔίʔυվળΨΠυΛಡΜͰֶΜͩ͜ͱ ϨΨγʔίʔυ͕͜Θ͘ͳ͘ͳͬͨ ܧঝɺϝιου ؔ਺ ͷਫ਼౓͕ߴ͘ͳͬͨ ύλʔϯɾΞʔΩςΫνϟେࣄ
K2VFSZ͸ѱ͘ͳ͔ͬͨ ѱ͍ͷ͸ґଘʢӨڹʣΛແࢹͨ͠ίʔυͩͬͨ

ϨΨγʔίʔυʹཱͪ޲͔͏ज़Λֶͼ ΈΜͳ͕ϋοϐʔʹͳΔ

ࢀߟ ϨΨγʔίʔυվળΨΠυ  .JDIBFM$'FBUIFST  ೔ຊޠIUUQXXXTIPFJTIBDPKQCPPLEFUBJM

survival-strategy-of-the-frontend

survival-strategy-of-the-frontend

sakunyo

Other Decks in Technology

Featured

Transcript

Survival Strategy of the ϑϩϯτΤϯυ 2016/10/15 @sakunyo

$ npm start twitter : @sakunyo job:ϑϦʔϥϯε fun: Sci-Fi, Comedy

ϑϩϯτΤϯυͷऔΓ·͘؀ڥ &OWJSPONFOU 69ɺϢʔβϏϦςΟɺΞΫηγϏϦςΟɺ࣮ߦ؀ڥʢFMFDUSPO ϒϥ΢βʣ 6*ʢσβΠϯʣτϨϯυͷҠΓมΘΓ 5FDIOJDBM 41"

Կ΋͠ͳͯ͘΋ʢ؀ڥ͕ʣมԽ͢Δʂ ӡ༻ઓུ͕ඞཁʂ

҆શͰมԽʹڧ͍ϓϩμΫτͱ͸ʁ ϑϩϯτΤϯυͷӡ༻ʹ଱͑Δ ϦϑΝΫλϦϯά͠΍͍͢ ίʔυʢαʔϏεʣͷ҆શੑΛߴΊΔ ίʔυͷ඼࣭ͱํ޲ੑʢΞʔΩςΫνϟʣ͕ఆ·͍ͬͯΔ

legacy code photo by sorarium

ϨΨγʔίʔυ ϨΨγʔίʔυͷѱ॥؀ w ίʔυͷ୅ँ͕ѱ͘ͳΔͱ  ৭ʑͳࢪࡦ͕ଧͯͳ͍ w αʔϏεྗͷ௿Լ ػೳͷ௥Ճͱվम

)5.-ͭΒ͍ )5.-ͱ+BWB4DSJQUͷґଘ͕ϖʔδશମʹ͓ΑͿ JavaScript HTML Element Function Element Element Element

Өڹൣғ͕ෳࡶԽ͢ΔࣄͰϦϑΝΫλϦϯά͕Ͱ͖ͳ͍ )5.-Λมߋͨ͠Β+BWB4DSJQU͕ΤϥʔΛు͘ ⁶+BWB4DSJQUΛมߋͨ͠Β6*͕յΕΔ ΤϥʔʹͳΒͣʹ࣮ߦ͞ΕΔίʔυ Өڹ͍ͯ͠ͳ͍ͱࢥΘΕͨՕॴ͕࣮͸ଞͷػೳʹӨڹ͍ͯ͠Δ ෳࡶԽͨ͠001ͷܧঝΑΓ΋ͭΒͦ͏ͩʜ

ϓϨθϯςʔγϣϯͱσʔλͷ෼཭ΛؤுΔ )5.-ͱ+4ͷ݁߹ํ޲ʢ݁߹ՕॴʣΛ੔ཧ͢Δʢ'MVYMJLFʣ 7JFXʹϩδοΫΛ٧Ίࠐ·ͳ͍ )5.-ଆʹσʔλΛ࣋ͭ৔߹ʹ͸ Read Only ͰΞΫηε͢ΔʢEBUBଐੑʣ

σʔλϑϩʔΛݟ௚͚ͩ͢Ͱ΋ େ෯ʹվળ

+BWB4DSJQUͷείʔϓ ແܭըͳΫϩʔδϟཚ༻͕ͭΒ͍ ςετ͍ͨؔ͠਺͕ؔ਺είʔϓͷதʹ͋Δ ςετɺϦϑΝΫλϦϯάͭΒ͍ ϨΨγʔίʔυվળΨΠυͰ͸ ݕग़༻ม਺Λ༻ҙ͢Δʢςετͷ֬ೝ༻ʹҰ࣌తʹಋೖ͢Δม਺ʣ

ϦϑΝΫλϦϯά ϦϑΝΫλϦϯά͸ػೳΛมߋͤͣʹίʔυͷ඼࣭ΛߴΊΔ ςετίʔυͷͳ͍ϦϑΝΫλ͸ଘࡏ͠ͳ͍ ςετલఏͰϦϑΝΫλϦϯάΛ͢ΔࣄΛపఈ͢Δ ػೳΛมߋ͍ͨ͠ཉٻʹෛ͚ͳ͍ڧ͍৺͕ඞཁ ϦϑΝΫλϦϯά΍ςετ௥Ճʹదͨ͠ύλʔϯΛ༻͍Δ

+BWB4DSJQUͷ࣮ߦ࣌Τϥʔ Τϥʔݕग़͍ͨ͠ ΤϥʔΛग़͢ίʔυWTΤϥʔ͕ग़ͳ͍ίʔυ Τϥʔ͕ൃੜ͠ͳ͍ίʔυ͸໰୊ʹؾ෇͖ʹ͍͘ +BWB4DSJQU͸ίϯύΠϧෆཁͳͷͰɺ࣮ߦ࣌·ͰΤϥʔʹؾ෇͔ͳ͍ K2VFSZΛ࢖͍ͬͯͯ΋ಉ͘͡ΤϥʔʹؾΛ͚ͭΔ

.VUBCMFͭΒ͍ ͏͔ͬΓ஋Λมߋͯ͠͠·͍σʔλʹෆ੔߹͕ʜ +BWB4DSJQUͰNNVUBCMFʢෆมʣͱ.VUBCMFʢมߋՄೳʣΛ࢖͍෼͚Δ PCKFDUͰঢ়ଶΛ؅ཧ͢ΔͷͳΒ4UPSFʢ.PEFMʣΛؤுΔɻFH3FEVY FTMJOU NNVUBCMFKT

ίʔυͷঢ়ଶʹݟ߹ͬͨύλʔϯΛ ༻͍ΔࣄͰԼ஍͕Ͱ͖Δ

testing photo by d_jan

ςετ͕͋Ε͹҆৺ʁ ϓϩμΫτͷՁ஋͕͓͓͸͹ʹԼ͕Δ ػೳ͠ͳ͍ϑΥʔϜɺػೳ͠ͳ͍6* ಛఆͷϒϥ΢β͕εϙΠϧ͞ΕΔ6* ςετͷछྨʹΑͬͯ͸๷͛ͳ͍ࣄ΋͋Δ

ςετίʔυͷ੒௕ઓུ ςετίʔυ͕গͳ͍ʢ΋͘͠͸ςετ͕ͳ͍ʣ ӡ༻͞Ε͍ͯΔίʔυʹରͯ͠ςετΛ௥Ճ͢Δͷ͸େม ϨΨγʔίʔυ΁ͷରॲύλʔϯͰෛ͚ͳ͍ ςετΛे෼ʹ༻ҙ͢Δ͕࣌ؒͳ͍ Ϣχοτςετ ςετҎ֎ͷखஈΛ࢖͏ʢػցతʹςετΛ͢Δʣ

ඞཁͳςετ͔Β௥Ճ͢Δ ࢓༷Խςετ ࣮ࡍͷৼΔ෣͍Λ໌Β͔ʹ͢ΔͨΊͷςετ όά΍ෆे෼ͳػೳ͕ݟ͔ͭͬͯ΋खΛೖΕͳ͍ Ϣʔβʔૢ࡞ʹ߹ΘͤͯςετΛ௥Ճ͢ΔʢGFBUVSF #%%ʣ

5ZQF ੩తղੳ͕͸͔ͲΔ ίϯύΠϥ·͔ͤ ςετ௥ՃͷϦϑΝΫλϦϯά࣌ʹ  ίϯύΠϧΤϥʔΛࢀߟʹϦϑΝΫλΛਐΊΔख๏ *OUFSGBDF

ྫ֎ॲཧܥͷςετ ςετͰݕग़Ͱ͖ͳ͍Τϥʔ͸ऩू͢Δ ΤϥʔϩάΛऩू͢Δ XJOEPXPOFSSPS ϩάऩूαʔόʔ TFOUSZ SPMMCBS

·ͱΊ ϨΨγʔίʔυվળΨΠυΛಡΜͰֶΜͩ͜ͱ ϨΨγʔίʔυ͕͜Θ͘ͳ͘ͳͬͨ ܧঝɺϝιου ؔ਺ ͷਫ਼౓͕ߴ͘ͳͬͨ ύλʔϯɾΞʔΩςΫνϟେࣄ

ϨΨγʔίʔυʹཱͪ޲͔͏ज़Λֶͼ ΈΜͳ͕ϋοϐʔʹͳΔ

ࢀߟ ϨΨγʔίʔυվળΨΠυ  .JDIBFM$'FBUIFST  ೔ຊޠIUUQXXXTIPFJTIBDPKQCPPLEFUBJM

fin.