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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

4. ΧΦφϏʹ͍ͭͯ
   

   View Slide

5. View Slide

6. ٕज़ελοΫ
   'SPOUFOE #BDLFOE
   *OGSBTUSVDUVSF
   0UIFST
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

12. K2VFSZͱ3FBDU
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

20. औΓ૊Έɾ࢓૊Έ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

29. 3FBDU)PPLT5FTUJOH-JCSBSZ
    

    View Slide

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

    View Slide

31. ։ൃࢧԉπʔϧ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

35. ݱঢ়ͷ՝୊ͱࠓޙͷల๬
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide