JSConf jp 2021 kaonavi front-end development in the monolithic service

Slide 1

Slide 1 text

೥ؒ੒௕͠ଓ͚͖ͯͨ ϞϊϦγοΫαʔϏεʹ͓͚Δ ϑϩϯτΤϯυ։ൃ +4$POG+1 גࣜձࣾΧΦφϏ:VVLJ.JOBNJ

Slide 2

Slide 2 text

w :VVLJ.JOBNJ w ೥݄ΧΦφϏೖࣾ w ϑϩϯτΤϯυࢧԉνʔϜ !"#"$%#"$&"$%#"$

Slide 3

Slide 3 text

࿩͢͜ͱ ௕೥ͷ։ൃʹΑΓ େྔͷίʔυ͕஝ੵ͞ΕͨαʔϏεʹ͓͚Δ ϑϩϯτΤϯυ։ൃͷऔΓ૊Έ

Slide 4

Slide 4 text

ΧΦφϏʹ͍ͭͯ

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

ٕज़ελοΫ 'SPOUFOE #BDLFOE *OGSBTUSVDUVSF 0UIFST

Slide 7

Slide 7 text

ωοτϫʔΫߏ੒ ˞େ෯ʹ؆ུԽ͍ͯ͠Δ

Slide 8

Slide 8 text

3FBDUϨϯμϦϯάͷϑϩʔ ϦΫΤετ ϧʔςΟϯά $POUSPMMFS"DUJPO͕7JFXΛ443ͯ͠ฦ٫ ΫϥΠΞϯταΠυͰόϯυϧΛϩʔυ 3FBDU%0.SFOEFS -BSBWFM

Slide 9

Slide 9 text

'JSTUDPNNJU αʔϏεࣗମ͸͜ͷίϛοτҎલΑΓఏڙ͓ͯ͠Γ ݱߦͷϦϙδτϦ͸όʔδϣϯܥͱݺ͹ΕΔ΋ͷ ೥લ

Slide 10

Slide 10 text

ΤϯδχΞ਺ ໿໊ Ұिؒ͋ͨΓͷ Ϛʔδίϛοτ਺ ίϛοτ ίʔυྔ ໿ສߦ ˞ςετίʔυΛআ͘

Slide 11

Slide 11 text

1)1໿ສߦ K2VFSZ໿ສߦ 3FBDU໿ສߦ ίʔυྔ ໿ສߦ ಺༁

Slide 12

Slide 12 text

K2VFSZͱ3FBDU

Slide 13

Slide 13 text

3FBDUͷಋೖ w 3FBDUಋೖҎલ͸K2VFSZ-BSBWFMͷςϯϓϨʔτΤϯδϯʢ#MBEFʣ w ೥d೥ʹ͔͚ͯ3FBDUΛಋೖ w ಋೖҎ߱͸৽ػೳʢ৽نϖʔδʣΛ3FBDUº5ZQF4DSJQU w ঢ়ଶ؅ཧ3FEVY 5PPMLJU w $44JO+4TUZMFEDPNQPOFOUT

Slide 14

Slide 14 text

K2VFSZͱ3FBDUͷڞଘ ಛఆͷ৚݅ԼͷΈͰڐ༰ ͦΕͧΕ͕6*ͱͯ͠ಠཱ͍ͯ͠Δ ͦΕͧΕͷؒͰσʔλ΍ঢ়ଶͷड͚౉͕͠ۃྗͳ͍

Slide 15

Slide 15 text

6*ͱͯ͠ಠཱ͍ͯ͠Δ w Ϟʔμϧ φϏήʔγϣϯͳͲ w K2VFSZଆͷάϩʔόϧͳ$44ͷӨڹΛड͚͕ͪ w K2VFSZͷ໋ྩతͳ%0.ͷมߋɾഁغͷӨڹΛड͚ΔՄೳੑ

Slide 16

Slide 16 text

σʔλ΍ঢ়ଶͷड͚౉͕͠ۃྗͳ͍ w K2VFSZͱͷ࿈ܞʹ͸໋ྩతͳهड़͕ඞཁͰ͋Γɺએݴత6*ʹԊ͍ͬͯͳ ͍͠อक΋ͭΒ͍ w 3FBDUͷॳճϨϯμʔͷͨΊʹඞཁͳσʔλٴͼɺ3FBDUͷ6*಺ͰϢʔ βʔ͕ߦͬͨॲཧ͔ΒಘͨσʔλΛ࠷ऴతʹฦ͢ࡍ͸͜ΕʹݶΒͳ͍

Slide 17

Slide 17 text

৚݅ʹ౰ͯ͸·Βͳ͍৔߹ɾɾɾ K2VFSZͱ3FBDU྆ऀͷίʔυΛ௥͏͜ͱʹ΋ͳΓ ։ൃऀମݧɾอकੑΛଛͳ͍͔Ͷͳ͍

Slide 18

Slide 18 text

ΧελϜΠϕϯτΛఆٛ PO ͷҾ਺ͱͯ͠σʔλΛ ड͚औΓ1SPQTͱͯ͠౉͢ K2VFSZଆͰϨϯμϦϯά͠ ͍ͨλΠϛϯάͰύϥϝʔ λͱڞʹUSJHHFS ൃՐ ڞଘͷ࣮૷ྫ K2VFSZͷ࣮૷͔Β3FBDUͷϞʔμϧΛల։ K2VFSZΛར༻ͤͣωΠςΟϒͳ+4ͰΧελϜΠϕϯτΛఆٛͯ͠΋Α͍

Slide 19

Slide 19 text

طଘͷK2VFSZ࣮૷ϖʔδ w 3FBDU΁ͷϦϓϨΠεʢϦχϡʔΞϧʣରԠத w ϦχϡʔΞϧ w K2VFSZͦͷ··ͷ6*Λ3FBDUʹஔ͖׵͑Δͷ͸ͭΒ͔ͬͨɾɾɾ w 69޲্ɾσβΠϯ࡮৽΋ಉ࣌ʹ💪

Slide 20

Slide 20 text

औΓ૊Έɾ࢓૊Έ

Slide 21

Slide 21 text

σΟϨΫτϦߏ੒ 'FBUVSFT1BUUFSO w 3FEVY͕ਪ঑͍ͯ͠Δύλʔϯ w ݩʑ͸%VDLTύλʔϯΛ࠾༻͍ͯͨ͠ w େن໛ͳΞϓϦͩͱɺTSD௚ԼʹΧςΰϦ෼ ͚͞ΕͨσΟϨΫτߏ੒͸ϑΝΠϧؒͷҠಈ ͕ਏ͔͕ͬͨɺָʹʂ w 'FBUVSFຖʹ͋Δఔ౓ͷࣗ༝౓Λ࣋ͨͤɺ ػೳ΍νʔϜʹదͨ͠ܗͰॊೈʹӡ༻Մೳ

Slide 22

Slide 22 text

,BPOBWJ%FTJHO4ZTUFN ,%4 w ڞ௨3FBDUίϯϙʔωϯτͱ6*ͷҰ؏ੑΛఏڙ w छྨҎ্ͷίϯϙʔωϯτ w 'JHNBͱͷ੔߹ੑΛॏࢹ͠ɺσβΠφʔͱΤϯδχΞͷίϛϡχέʔγϣϯίε τ࡟ݮ w ެ։͸ࣾ಺ʹରͯ͠ͷΈʢύϒϦοΫʹ͍͖͍ͯͨ͠ɾɾɾʂʣ

Slide 23

Slide 23 text

σβΠϯγεςϜͷٕज़ w ΧΦφϏຊମͱ͸ผϦϙδτϦ w (JU-BCͷ1BDLBHF3FHJTUSZΛར༻͠ ϓϥΠϕʔτͳ/1.ύοέʔδͱͯ͠ఏڙ w 4UPSZCPPLͰ؅ཧ w 5FTUJOH w 3&(46*5 w +FTU3FBDU5FTUJOH-JCSBSZ

Slide 24

Slide 24 text

3&(46*5 4UPSZCPPL͔Β6*ࠩ෼Λݕ஌

Slide 25

Slide 25 text

σβΠϯγεςϜߏஙͷഎܠ w ݩʑ͸ΧΦφϏຊମͷϦϙδτϦͰ"UPNJD%FTJHOʹ४ڌͨ͠ίϯϙʔωϯτ ӡ༻ͷߏ૝ w σβΠφʔͱΤϯδχΞͷڞ௨ݴޠͱͳΔΑ͏ͳج൫ʹ αʔϏεͷಛੑ͔Βɺػೳຖʹࣗ༝౓ͷߴ͍σβΠϯ͕ٻΊΒΕ "UPNJD%FTJHOʹ४ڌ͢ΔͭΒΈ͕ੜ͡ɺഇࢭ ڞ௨ݴޠʹ͸Ͱ͖ͳ͔ͬͨ

Slide 26

Slide 26 text

σβΠϯγεςϜߏஙͷഎܠ w ݱߦͷσβΠϯγεςϜͱͯ͠ϦχϡʔΞϧ w ࠷௿ݶͷڞ௨ίϯϙʔωϯτͷΈΛ؅ཧ͢ΔΑ͏ʹ

Slide 27

Slide 27 text

ϓϩμΫτͷϦϙδτϦͱ෼͚ͨϝϦοτ w ΞδϦςΟͷ޲্ w ϦϦʔεɾ$*͕੾Γ཭͞ΕΔ w ٕज़બఆͷ෯͕޿͕Δ ݱࡏσβΠϯγεςϜΛར༻͍ͯ͠Δͷ͸ ຊମϦϙδτϦ͚͕ͩͩɺԸܙΛे෼ʹ࣮ײ

Slide 28

Slide 28 text

$VTUPN)PPLTͱ୯ମςετ w $VTUPN)PPLTΛੵۃతʹ࡞੒ w ίϯϙʔωϯτͷݟ௨͕͠Α͘ͳΔ w $VTUPN)PPLT୯ҐͰϩδοΫͷ65 w SFBDUVTFͳͲ͕ࢀߟʹͳΔ w 3FBDU)PPLT5FTUJOH-JCSBSZΛར༻

Slide 29

Slide 29 text

3FBDU)PPLT5FTUJOH-JCSBSZ

Slide 30

Slide 30 text

υΩϡϝϯτ w Ұൠతͳ3FBDUʹؔ͢Δઆ໌͚ͩͰ͸ͳ͘ɺΧΦφϏͰར༻͢ΔϥΠϒϥϦͷར༻ํ๏ ͱ߹Θͤͯղઆ w ීஈόοΫΤϯυΛϝΠϯʹ΍͍ͬͯΔϝϯόʔ΍ΦϯϘʔσΟϯάͰల։ 3FBDU։ൃνϡʔτϦΞϧ 3FBDU։ൃΞϧςΟϚ˔Ξ w ΧΦφϏʹ͓͚Δ۩ମతͳ࣮૷ํ๏ɾํ਑ͳͲΛղઆ͢Δ߈ུຊతͳཱͪҐஔ w "1*௨৴ॲཧͷ࣮૷ 'PSN࣮૷ 7BMJEBUJPO࣮૷ͳͲ

Slide 31

Slide 31 text

։ൃࢧԉπʔϧ

Slide 32

Slide 32 text

&4-JOU$VTUPN3VMF w σβΠϯγεςϜͱಉ༷ʹผϦϙδτϦɾϓϥ Πϕʔτͳ/1.ύοέʔδ w σβΠϯγεςϜͰఆٛ͞ΕΔΧϥʔίʔυఆ ਺ͷར༻Λڧ੍͠ɾஔ׵ w !UZQFTDSJQUFTMJOUFTMJOUQMVHJOΛࢀߟ w !UZQFTDSJQUFTMJOUFYQFSJNFOUBMVUJMT w &4-JOU1MVHJO࡞੒࣌ͷϢʔςΟϦςΟ

Slide 33

Slide 33 text

ϒϥϯνࣗಈϚʔδπʔϧ w ن໛ͷେ͖ͳ։ൃͰ͸τϐοΫϒϥϯνͱͯ͠ GFBUVSFϒϥϯνΛ੾Δ w NBTUFSϒϥϯνͱͷࠩ෼ΛఆظతʹऔΓࠐΉඞཁ ͕͋Γɺ͜ΕΛࣗಈԽ w $*ύΠϥϓϥΠϯ੒ޭ࣌ͷΈϚʔδ w (PPHMF͕ެ։͓ͯ͠Γɺ+BWB4DSJQUͰγΣϧ͕ॻ ͚Δ[YΛར༻ NBTUFS GFBUVSFGPP औΓࠐΈର৅

Slide 34

Slide 34 text

ͦͷଞπʔϧ w 1)1Ͱఆٛ͞Εͨ&OVNΛ5ZQF4DSJQUͷఆ਺ʹม׵͢Δπʔϧ w .Z42-ͷεΩʔϚ͔Β5ZQF4DSJQUͷܕΛੜ੒͢Δπʔϧ

Slide 35

Slide 35 text

ݱঢ়ͷ՝୊ͱࠓޙͷల๬

Slide 36

Slide 36 text

՝୊ w K2VFSZͷػೳ͕·ͩ·ͩ͋Δ w -BSBWFM 1)1 ʹґଘ࣮ͨ͠૷ w .VMUJQMFQBHF"QQMJDBUJPO

Slide 37

Slide 37 text

ࠓޙ w σβΠϯγεςϜ w BZվળ w && w -BSBWFMґଘ͔Βͷ୤٫ w 4JOHMFQBHF"QQMJDBUJPO w ϑϩϯτΤϯυΞʔΩςΫνϟ࡮৽

Slide 38

Slide 38 text

ϑϩϯτΤϯυΞʔΩςΫνϟ࡮৽ "1* "1* ґଘͷղফ Ωϟογϡઓུ

Slide 39

Slide 39 text

՝୊΋ଟ͍͕ ٕज़ෛ࠴ͷฦࡁ΍ΞʔΩςΫνϟ࡮৽͸ ֶͼɾ΍Γ͕͍͕͋Δʂ

Slide 40

Slide 40 text

5IBOLT 8FBSFIJSJOH '(()*+,,-./)01#.%#2$03),/4-/5$(,6$*(, ϑϩϯτΤϯυͷϞμφΠζ %9ɾ69ͷ࠷େԽ ҰॹʹऔΓ૊Έ·͠ΐ͏ʂ