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
An introduction to Claude Code SDK
choplin
3
3.3k
自分がLinc’wellで提供しているプロダクトを理解するためにやったこと
murabayashi
1
160
地図と生成AI
nakasho
0
690
ML Pipelineの開発と運用を OpenTelemetryで繋ぐ @ OpenTelemetry Meetup 2025-07
getty708
0
230
「手を動かした者だけが世界を変える」ソフトウェア開発だけではない開発者人生
onishi
7
2.7k
Microsoft Defender XDRで疲弊しないためのインシデント対応
sophiakunii
3
400
Snowflake のアーキテクチャは本当に筋がよかったのか / Data Engineering Study #30
indigo13love
0
250
Power Automate のパフォーマンス改善レシピ / Power Automate Performance Improvement Recipes
karamem0
0
110
生成AIによる情報システムへのインパクト
taka_aki
0
100
AI駆動開発 with MixLeap Study【大阪支部 #3】
lycorptech_jp
PRO
0
200
DATA+AI SummitとSnowflake Summit: ユーザから見た共通点と相違点 / DATA+AI Summit and Snowflake Summit
nttcom
0
210
激動の時代、新卒エンジニアはAIツールにどう向き合うか。 [LayerX Bet AI Day Countdown LT Day1 ツールの選択]
tak848
0
540
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Code Review Best Practice
trishagee
69
19k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Agile that works and the tools we love
rasmusluckow
329
21k
Balancing Empowerment & Direction
lara
1
490
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.5k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
530
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
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.