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...
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
South
March 25, 2022
Programming
260
1
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
JSConf jp 2021 kaonavi front-end development in the monolithic service
South
March 25, 2022
More Decks by South
See All by South
Automating Web Accessibility Testing with AI Agents
maminami373
1
2k
TSConfig Solution Style & subpath imports to switch types on a per-file basis
maminami373
2
330
JSConf JP 2022 introduce React Query
maminami373
2
7.4k
Front-end rearchitect SPA
maminami373
0
550
単体テストゼロからテスト文化を醸成させた話 / Fostering the testing culture
maminami373
0
2.5k
Other Decks in Programming
See All in Programming
Dataformのリポジトリを立ち上げるときにまずやること / dataform-day0-2026
snhryt
0
190
TSKaigi Night Talks 2026_TypeScriptでサプライチェーンの整合性を型に閉じ込める
geekplus_tech
0
410
はてなアカウント基盤 State of the Union
cockscomb
1
860
エンジニアと一緒にテストコードの設計と実装を改善した話
mototakatsu
0
220
Strategic Design in the Frontend: Moduliths & Micro Frontends @DDDEurope
manfredsteyer
PRO
0
130
ECSアプリログをFireLensでコスト削減しようとしたけど諦めた話 in Fargate×Node.js
akihisaikeda
2
4.2k
Vite+ Unified Toolchain for the Web
naokihaba
0
360
IBM Bobを活用したレガシーアプリの最新化
oniak3ibm
PRO
1
220
ローカルLLMでどこまでコードが書けるか -拡張版 / How much code can be written on a local LLM Extended
kishida
12
4.4k
どこまでゆるくて許されるのか
tk3fftk
0
250
Javaの型とAI時代に型が大事な理由 / java types and type in AI era
kishida
2
150
JavaDoc 再入門
nagise
1
420
Featured
See All Featured
Amusing Abliteration
ianozsvald
1
210
Leo the Paperboy
mayatellez
7
1.9k
Practical Orchestrator
shlominoach
191
11k
Marketing to machines
jonoalderson
1
5.5k
Six Lessons from altMBA
skipperchong
29
4.3k
Faster Mobile Websites
deanohume
310
32k
Ten Tips & Tricks for a 🌱 transition
stuffmc
0
140
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
signer
PRO
0
3.6k
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
apolaine
1
360
Accessibility Awareness
sabderemane
1
140
Building AI with AI
inesmontani
PRO
1
1.1k
Into the Great Unknown - MozCon
thekraken
41
2.6k
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ͷ࠷େԽ ҰॹʹऔΓΈ·͠ΐ͏ʂ