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
JSConf jp 2021 kaonavi front-end development in the monolithic service
Search
South
March 25, 2022
Programming
1
170
JSConf jp 2021 kaonavi front-end development in the monolithic service
South
March 25, 2022
Tweet
Share
More Decks by South
See All by South
JSConf JP 2022 introduce React Query
maminami373
2
6.8k
Front-end rearchitect SPA
maminami373
0
360
単体テストゼロからテスト文化を醸成させた話 / Fostering the testing culture
maminami373
0
1.8k
Other Decks in Programming
See All in Programming
APIのない大学ログインWebサービスをWKWebViewとJavaScriptでアプリ化した話
akidon0000
1
330
Google's Recipe for Scaling (Web) Security – LocoMocoSec 2024
lweichselbaum
0
170
最近追加した型の紹介とその振り返り
aki19035vc
0
170
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
140
CSC307 Lecture 13
javiergs
PRO
0
150
リハビリmruby
kishima
1
160
Mastering Developer Experience: A Roadmap for Success 【開発生産性Conference 2024】
findyinc
1
380
Cloudflare Workers x AWS Lambdaの組み合わせユースケース / Cloudflare Workers x AWS Lambda Combination Use Case
seike460
PRO
2
310
【Go言語】ジェネリクス
tomo1227
0
170
ぼっちを避けて楽しむためのアノテコノテ / Various Tips and Tricks to Avoid Loneliness and Have Fun
nrslib
3
1.7k
みんなのオブザーバビリティプラットフォームを作ってるんだがパフォーマンスがやばい #mackerelio #srenext
ne_sachirou
0
370
大規模マルチテナントを解決するYugabyteDBという選択肢
nnaka2992
1
250
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
28
2.2k
How to Ace a Technical Interview
jacobian
274
23k
Building Your Own Lightsaber
phodgson
101
5.9k
The Cost Of JavaScript in 2023
addyosmani
31
4.7k
Typedesign – Prime Four
hannesfritz
37
2.2k
A Philosophy of Restraint
colly
200
16k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
44
4.7k
[RailsConf 2023] Rails as a piece of cake
palkan
35
4.4k
Building a Modern Day E-commerce SEO Strategy
aleyda
25
6.7k
YesSQL, Process and Tooling at Scale
rocio
166
14k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
248
20k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.4k
Transcript
ؒ͠ଓ͚͖ͯͨ ϞϊϦγοΫαʔϏεʹ͓͚Δ ϑϩϯτΤϯυ։ൃ +4$POG+1 גࣜձࣾΧΦφϏ:VVLJ.JOBNJ
w :VVLJ.JOBNJ w ݄ΧΦφϏೖࣾ w ϑϩϯτΤϯυࢧԉνʔϜ !"#"$%#"$&"$%#"$
͢͜ͱ ͷ։ൃʹΑΓ େྔͷίʔυ͕ੵ͞ΕͨαʔϏεʹ͓͚Δ ϑϩϯτΤϯυ։ൃͷऔΓΈ
ΧΦφϏʹ͍ͭͯ
None
ٕज़ελοΫ 'SPOUFOE #BDLFOE *OGSBTUSVDUVSF 0UIFST
ωοτϫʔΫߏ ˞େ෯ʹ؆ུԽ͍ͯ͠Δ
3FBDUϨϯμϦϯάͷϑϩʔ ϦΫΤετ ϧʔςΟϯά $POUSPMMFS"DUJPO͕7JFXΛ443ͯ͠ฦ٫ ΫϥΠΞϯταΠυͰόϯυϧΛϩʔυ 3FBDU%0.SFOEFS -BSBWFM
'JSTUDPNNJU αʔϏεࣗମ͜ͷίϛοτҎલΑΓఏڙ͓ͯ͠Γ ݱߦͷϦϙδτϦόʔδϣϯܥͱݺΕΔͷ લ
ΤϯδχΞ ໊ Ұिؒ͋ͨΓͷ Ϛʔδίϛοτ ίϛοτ ίʔυྔ ສߦ ˞ςετίʔυΛআ͘
1)1ສߦ K2VFSZສߦ 3FBDUສߦ ίʔυྔ ສߦ ༁
K2VFSZͱ3FBDU
3FBDUͷಋೖ w 3FBDUಋೖҎલK2VFSZ -BSBWFMͷςϯϓϨʔτΤϯδϯʢ#MBEFʣ w dʹ͔͚ͯ3FBDUΛಋೖ w ಋೖҎ߱৽ػೳʢ৽نϖʔδʣΛ3FBDUº5ZQF4DSJQU w ঢ়ଶཧ3FEVY
5PPMLJU w $44JO+4TUZMFEDPNQPOFOUT
K2VFSZͱ3FBDUͷڞଘ ಛఆͷ݅ԼͷΈͰڐ༰ ͦΕͧΕ͕6*ͱͯ͠ಠཱ͍ͯ͠Δ ͦΕͧΕͷؒͰσʔλঢ়ଶͷड͚͕͠ۃྗͳ͍
6*ͱͯ͠ಠཱ͍ͯ͠Δ w Ϟʔμϧ φϏήʔγϣϯͳͲ w K2VFSZଆͷάϩʔόϧͳ$44ͷӨڹΛड͚͕ͪ w K2VFSZͷ໋ྩతͳ%0.ͷมߋɾഁغͷӨڹΛड͚ΔՄೳੑ
σʔλঢ়ଶͷड͚͕͠ۃྗͳ͍ w K2VFSZͱͷ࿈ܞʹ໋ྩతͳهड़͕ඞཁͰ͋Γɺએݴత6*ʹԊ͍ͬͯͳ ͍͠อकͭΒ͍ w 3FBDUͷॳճϨϯμʔͷͨΊʹඞཁͳσʔλٴͼɺ3FBDUͷ6*ͰϢʔ βʔ͕ߦͬͨॲཧ͔ΒಘͨσʔλΛ࠷ऴతʹฦ͢ࡍ͜ΕʹݶΒͳ͍
݅ʹͯ·Βͳ͍߹ɾɾɾ K2VFSZͱ3FBDU྆ऀͷίʔυΛ͏͜ͱʹͳΓ ։ൃऀମݧɾอकੑΛଛͳ͍͔Ͷͳ͍
ΧελϜΠϕϯτΛఆٛ PO ͷҾͱͯ͠σʔλΛ ड͚औΓ1SPQTͱͯ͢͠ K2VFSZଆͰϨϯμϦϯά͠ ͍ͨλΠϛϯάͰύϥϝʔ λͱڞʹUSJHHFS
ൃՐ ڞଘͷ࣮ྫ K2VFSZͷ࣮͔Β3FBDUͷϞʔμϧΛల։ K2VFSZΛར༻ͤͣωΠςΟϒͳ+4ͰΧελϜΠϕϯτΛఆٛͯ͠Α͍
طଘͷK2VFSZ࣮ϖʔδ w 3FBDUͷϦϓϨΠεʢϦχϡʔΞϧʣରԠத w ϦχϡʔΞϧ w K2VFSZͦͷ··ͷ6*Λ3FBDUʹஔ͖͑ΔͷͭΒ͔ͬͨɾɾɾ w 69্ɾσβΠϯ৽ಉ࣌ʹ💪
औΓΈɾΈ
σΟϨΫτϦߏ 'FBUVSFT1BUUFSO w 3FEVY͕ਪ͍ͯ͠Δύλʔϯ w ݩʑ%VDLTύλʔϯΛ࠾༻͍ͯͨ͠ w େنͳΞϓϦͩͱɺTSDԼʹΧςΰϦ ͚͞ΕͨσΟϨΫτߏϑΝΠϧؒͷҠಈ ͕ਏ͔͕ͬͨɺָʹʂ
w 'FBUVSFຖʹ͋Δఔͷࣗ༝Λ࣋ͨͤɺ ػೳνʔϜʹదͨ͠ܗͰॊೈʹӡ༻Մೳ
,BPOBWJ%FTJHO4ZTUFN ,%4 w ڞ௨3FBDUίϯϙʔωϯτͱ6*ͷҰ؏ੑΛఏڙ w छྨҎ্ͷίϯϙʔωϯτ w 'JHNBͱͷ߹ੑΛॏࢹ͠ɺσβΠφʔͱΤϯδχΞͷίϛϡχέʔγϣϯίε τݮ w
ެ։ࣾʹରͯ͠ͷΈʢύϒϦοΫʹ͍͖͍ͯͨ͠ɾɾɾʂʣ
σβΠϯγεςϜͷٕज़ w ΧΦφϏຊମͱผϦϙδτϦ w (JU-BCͷ1BDLBHF3FHJTUSZΛར༻͠ ϓϥΠϕʔτͳ/1.ύοέʔδͱͯ͠ఏڙ w 4UPSZCPPLͰཧ w 5FTUJOH
w 3&(46*5 w +FTU 3FBDU5FTUJOH-JCSBSZ
3&(46*5 4UPSZCPPL͔Β6*ࠩΛݕ
σβΠϯγεςϜߏஙͷഎܠ w ݩʑΧΦφϏຊମͷϦϙδτϦͰ"UPNJD%FTJHOʹ४ڌͨ͠ίϯϙʔωϯτ ӡ༻ͷߏ w σβΠφʔͱΤϯδχΞͷڞ௨ݴޠͱͳΔΑ͏ͳج൫ʹ αʔϏεͷಛੑ͔Βɺػೳຖʹࣗ༝ͷߴ͍σβΠϯ͕ٻΊΒΕ "UPNJD%FTJHOʹ४ڌ͢ΔͭΒΈ͕ੜ͡ɺഇࢭ ڞ௨ݴޠʹͰ͖ͳ͔ͬͨ
σβΠϯγεςϜߏஙͷഎܠ w ݱߦͷσβΠϯγεςϜͱͯ͠ϦχϡʔΞϧ w ࠷ݶͷڞ௨ίϯϙʔωϯτͷΈΛཧ͢ΔΑ͏ʹ
ϓϩμΫτͷϦϙδτϦͱ͚ͨϝϦοτ w ΞδϦςΟͷ্ w ϦϦʔεɾ$*͕Γ͞ΕΔ w ٕज़બఆͷ෯͕͕Δ ݱࡏσβΠϯγεςϜΛར༻͍ͯ͠Δͷ ຊମϦϙδτϦ͚͕ͩͩɺԸܙΛेʹ࣮ײ
$VTUPN)PPLTͱ୯ମςετ w $VTUPN)PPLTΛੵۃతʹ࡞ w ίϯϙʔωϯτͷݟ௨͕͠Α͘ͳΔ w $VTUPN)PPLT୯ҐͰϩδοΫͷ65 w SFBDUVTFͳͲ͕ࢀߟʹͳΔ w
3FBDU)PPLT5FTUJOH-JCSBSZΛར༻
3FBDU)PPLT5FTUJOH-JCSBSZ
υΩϡϝϯτ w Ұൠతͳ3FBDUʹؔ͢Δઆ໌͚ͩͰͳ͘ɺΧΦφϏͰར༻͢ΔϥΠϒϥϦͷར༻ํ๏ ͱ߹Θͤͯղઆ w ීஈόοΫΤϯυΛϝΠϯʹ͍ͬͯΔϝϯόʔΦϯϘʔσΟϯάͰల։ 3FBDU։ൃνϡʔτϦΞϧ 3FBDU։ൃΞϧςΟϚ˔Ξ w ΧΦφϏʹ͓͚Δ۩ମతͳ࣮ํ๏ɾํͳͲΛղઆ͢Δ߈ུຊతͳཱͪҐஔ
w "1*௨৴ॲཧͷ࣮ 'PSN࣮ 7BMJEBUJPO࣮ͳͲ
։ൃࢧԉπʔϧ
&4-JOU$VTUPN3VMF w σβΠϯγεςϜͱಉ༷ʹผϦϙδτϦɾϓϥ Πϕʔτͳ/1.ύοέʔδ w σβΠϯγεςϜͰఆٛ͞ΕΔΧϥʔίʔυఆ ͷར༻Λڧ੍͠ɾஔ w !UZQFTDSJQUFTMJOUFTMJOUQMVHJOΛࢀߟ w
!UZQFTDSJQUFTMJOUFYQFSJNFOUBMVUJMT w &4-JOU1MVHJO࡞࣌ͷϢʔςΟϦςΟ
ϒϥϯνࣗಈϚʔδπʔϧ w نͷେ͖ͳ։ൃͰτϐοΫϒϥϯνͱͯ͠ GFBUVSFϒϥϯνΛΔ w NBTUFSϒϥϯνͱͷࠩΛఆظతʹऔΓࠐΉඞཁ ͕͋Γɺ͜ΕΛࣗಈԽ w $*ύΠϥϓϥΠϯޭ࣌ͷΈϚʔδ w
(PPHMF͕ެ։͓ͯ͠Γɺ+BWB4DSJQUͰγΣϧ͕ॻ ͚Δ[YΛར༻ NBTUFS GFBUVSFGPP औΓࠐΈର
ͦͷଞπʔϧ w 1)1Ͱఆٛ͞Εͨ&OVNΛ5ZQF4DSJQUͷఆʹม͢Δπʔϧ w .Z42-ͷεΩʔϚ͔Β5ZQF4DSJQUͷܕΛੜ͢Δπʔϧ
ݱঢ়ͷ՝ͱࠓޙͷల
՝ w K2VFSZͷػೳ͕·ͩ·ͩ͋Δ w -BSBWFM 1)1 ʹґଘ࣮ͨ͠ w .VMUJQMFQBHF"QQMJDBUJPO
ࠓޙ w σβΠϯγεςϜ w BZվળ w && w -BSBWFMґଘ͔Βͷ٫ w
4JOHMFQBHF"QQMJDBUJPO w ϑϩϯτΤϯυΞʔΩςΫνϟ৽
ϑϩϯτΤϯυΞʔΩςΫνϟ৽ "1* "1* ґଘͷղফ Ωϟογϡઓུ
՝ଟ͍͕ ٕज़ෛ࠴ͷฦࡁΞʔΩςΫνϟ৽ ֶͼɾΓ͕͍͕͋Δʂ
5IBOLT 8FBSFIJSJOH '(()*+,,-./)01#.%#2$03),/4-/5$(,6$*(, ϑϩϯτΤϯυͷϞμφΠζ %9ɾ69ͷ࠷େԽ ҰॹʹऔΓΈ·͠ΐ͏ʂ