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 full-size slide

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

    View full-size slide

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

    View full-size slide

  4. ΧΦφϏʹ͍ͭͯ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    -BSBWFM

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  11. K2VFSZͱ3FBDU

    View full-size slide

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

    w $44JO+4TUZMFEDPNQPOFOUT

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  19. औΓ૊Έɾ࢓૊Έ

    View full-size slide

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

    View full-size slide

  21. ,BPOBWJ%FTJHO4ZTUFN ,%4

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  28. 3FBDU)PPLT5FTUJOH-JCSBSZ

    View full-size slide

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

    View full-size slide

  30. ։ൃࢧԉπʔϧ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide