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
260
survival-strategy-of-the-frontend
sakunyo
October 15, 2016
Tweet
Share
Other Decks in Technology
See All in Technology
反実仮想機械学習とは何か
usaito
PRO
6
1.3k
Aurora MySQL v3(MySQL8.0互換)の オンラインDDLの罠挙動を全バージョンで検証した
yutakikai
0
150
Tebiki株式会社 エンジニア採用資料
tebiki
0
4k
Data and AI Governance: Existing Challenges and Emerging Trends
scotthsieh825
0
140
社内勉強会運営のコツ
senoo
6
1.1k
Autonomous Database Cloud 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
13
35k
Databricks におけるデータエンジニアリング
databricksjapan
0
370
OpenTelemetry を使ったトレースエグザンプラーの活用 / otel-trace-exemplar
k6s4i53rx
2
630
Delivering Millions of Messages within seconds @ Duolingo
pelelgrino
0
320
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
inesmontani
PRO
1
630
Postman v10リリース後を振り返る
nagix
0
120
レガシーをぶっ壊せ。AEONで始めるDevRelの話 / Qiita Night 2024-2-22
aeonpeople
3
110
Featured
See All Featured
Design by the Numbers
sachag
274
18k
Six Lessons from altMBA
skipperchong
19
3k
Documentation Writing (for coders)
carmenintech
59
3.9k
StorybookのUI Testing Handbookを読んだ
zakiyama
10
4.5k
Product Roadmaps are Hard
iamctodd
43
9.7k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
10 Git Anti Patterns You Should be Aware of
lemiorhan
645
57k
Designing the Hi-DPI Web
ddemaree
276
33k
What's new in Ruby 2.0
geeforr
336
31k
RailsConf 2023
tenderlove
1
530
Into the Great Unknown - MozCon
thekraken
10
980
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
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.