Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

South
March 25, 2022

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

South

March 25, 2022
Tweet

More Decks by South

Other Decks in Programming

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