Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
survival-strategy-of-the-frontend
Search
sakunyo
October 15, 2016
Technology
4
280
survival-strategy-of-the-frontend
sakunyo
October 15, 2016
Tweet
Share
Other Decks in Technology
See All in Technology
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
26k
「良さそう」と「とても良い」の間には 「良さそうだがホンマか」がたくさんある / 2025.07.01 LLM品質Night
smiyawaki0820
1
410
米国国防総省のDevSecOpsライフサイクルをAWSのセキュリティサービスとOSSで実現
syoshie
2
1.2k
SpringBoot x TestContainerで実現するポータブル自動結合テスト
demaecan
0
110
生成AI時代の開発組織・技術・プロセス 〜 ログラスの挑戦と考察 〜
itohiro73
1
350
Liquid Glass革新とSwiftUI/UIKit進化
fumiyasac0921
0
290
2025-06-26_Lightning_Talk_for_Lightning_Talks
_hashimo2
2
110
無意味な開発生産性の議論から抜け出すための予兆検知とお金とAI
i35_267
0
210
LangSmith×Webhook連携で実現するプロンプトドリブンCI/CD
sergicalsix
1
140
開発生産性を組織全体の「生産性」へ! 部門間連携の壁を越える実践的ステップ
sudo5in5k
0
110
Understanding_Thread_Tuning_for_Inference_Servers_of_Deep_Models.pdf
lycorptech_jp
PRO
0
140
モバイル界のMCPを考える
naoto33
0
160
Featured
See All Featured
Gamification - CAS2011
davidbonilla
81
5.3k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
The Cult of Friendly URLs
andyhume
79
6.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Unsuck your backbone
ammeep
671
58k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
710
Designing for humans not robots
tammielis
253
25k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Transcript
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
fin.