$30 off During Our Annual Pro Sale. View Details »

Yahoo! JAPANトップページにおけるマイクロフロントエンド - 大規模組織におけるFE...

Yahoo! JAPANトップページにおけるマイクロフロントエンド - 大規模組織におけるFE開発を加速させるには

JSConf JP 2024にて発表した資料です。
https://jsconf.jp/2024/talk/lycorp/

More Decks by LINEヤフーTech (LY Corporation Tech)

Other Decks in Technology

Transcript

  1. ˜-:$PSQPSBUJPO দా ࿨ً ·ͭͩ ͔͖ͣ -*/&Ϡϑʔגࣜձࣾ ϑϩϯτΤϯυΤϯδχΞ  • ೥ʹ৽ଔೖࣾ

    • ۀ຿Ͱ͸:BIPP+"1"/τοϓϖʔδͷ εϚʔτϑΥϯ8FC൛ͳͲͷ։ൃ • ϑϩϯτΤϯυΤϯδχΞ • 9(JU)VC!NLJ[LB • #MVFTLZ!NLJ[LBEFW
  2. ˜-:$PSQPSBUJPO ‒ ೔ຊ࠷େڃͷϙʔλϧαΠτ ‒ ݄ؒΞΫςΟϒϢʔβʔ਺ ໿ສਓ ˞ ‒ 1$ɺεϚʔτϑΥϯ ΞϓϦ8FC

    ޲͚ʹ αʔϏεΛఏڙ ‒ ຊࢿྉͰ͸ओʹεϚʔτϑΥϯ8FC൛Λ ѻ͍·͢ ˞ :BIPP+"1"/ τοϓϖʔδʹ͍ͭͯ  ˞ʮχʔϧηϯσδλϧίϯςϯπࢹௌ཰ʯʢ೥݄ʙ݄ͷ݄ฏۉʣ ʦ:BIPP+"1"/ʢϒϥϯυϨϕϧʣͰूܭɺࡀҎ্ͷஉঁɻεϚʔτϑΥϯͱ ύιίϯͷϢʔβʔͷॏෳΛؚ·ͳ͍ɻʧ˞্ܻ໨ͷ਺஋Λ࢛ࣺޒೖ ˞ࢿྉʹܝࡌ͍ͯ͠Δը૾͸೥݄࣌఺ͷ΋ͷͰ͢
  3. ˜-:$PSQPSBUJPO ϚΠΫϩϑϩϯτΤϯυ .JDSP'SPOUFOET .'& ͱ͸ɺϑϩϯτΤϯυΛػೳ͝ͱʹ෼ׂͯ͠ ։ൃɾϦϦʔεΛߦ͏࣮૷ํ๏ τοϓϖʔδͷ৔߹͸ӈͷΑ͏ʹ෼ׂͰ͖Δ ਌ࢠؔ܎ʹͳͬͨػೳΛͦΕͧΕ ΞϓϦέʔγϣϯγΣϧ "QQ4IFMM

    ɺ ϑϥάϝϯτ 'SBHNFOU ͱ։ൃத͸ݺশ  ϚΠΫϩϑϩϯτΤϯυͷݕ౼Λ։࢝ ΞϓϦέʔγϣϯ ຊମ λϒϑϥάϝϯτ πʔϧϑϥάϝϯτ ݕࡧϑϥάϝϯτ 'SBHNFOU T "QQ4IFMM
  4. ˜-:$PSQPSBUJPO ϚΠΫϩϑϩϯτΤϯυʹΑ֤ͬͯ૊৫͝ͱʹػೳΛ෼ׂ͢Δ  ϚΠΫϩϑϩϯτΤϯυͷݕ౼Λ։࢝ τοϓϖʔδ "QQ4IFMM ਌ Λ։ൃ ֤૊৫͕ࣗ཯తʹػೳվળͰ͖Δঢ়ଶΛ໨ࢦ͢ :BIPPχϡʔε

    χϡʔελϒ ϑϥάϝϯτ ࢠ Λ։ൃ :BIPPζότΫ ͓τΫλϒ ϑϥάϝϯτ ࢠ Λ։ൃ :BIPPϦΞϧλΠϜݕࡧ 4/4ͷ࿩୊λϒ ϑϥάϝϯτ ࢠ Λ։ൃ
  5. ˜-:$PSQPSBUJPO ݕ౼ͨ͠ओͳ࣮ݱํ๏ • .PEVMF'FEFSBUJPO • 8FC$PNQPOFOUT • JGSBNF • ಠࣗʹ࣮૷

    ࣮ݱํ๏ʹٻΊͨཁ݅ • ߴ଎ʹϦϦʔεɾϩʔϧόοΫՄೳ • ௕ظతͳ࢖༻͕ظ଴Ͱ͖Δ͜ͱ • "QQ4IFMM'SBHNFOUؒͷ෼཭ੑ͕ߴ͍͜ͱ • දࣔ଎౓΍ૢ࡞࣌ͷߴ͍ύϑΥʔϚϯε • /FYUKT 3FBDU Ͱ࢖༻Ͱ͖Δ͜ͱ  .'&ͷ࣮ݱํ๏ͷݕ౼
  6. ˜-:$PSQPSBUJPO • Ϟδϡʔϧ୯ҐͰ෼ׂ͞ΕͨKTϑΝΠϧΛ࣮ߦ࣌ʹऔಘ͢Δ • Ϟδϡʔϧόϯυϥʔ ओʹ8FCQBDL ͕ఏڙ͢Δػೳ  .'&ͷ࣮ݱํ๏ɿ.PEVMF'FEFSBUJPO BKT

    CKT "QQ4IFMM 'SBHNFOU ٻΊΔཁ݅ ཁ݅Λຬ͍ͨͯ͠Δ͔ ߴ଎ʹϦϦʔεՄೳ ❌ Ϗϧυޙ͸ݻఆ63-ͰϑΝΠϧΛߋ৽͢ΔͨΊɺ $%/ͷΩϟογϡ࣌ؒͷ੍ݶΛड͚Δ ௐࠪ౰࣌ ௕ظతͳ࢖༻ ⚠ 8FCQBDL΁ͷґଘ͕ߴ·Δ ਌ࢠؒͷ෼཭ੑ ⚠ ಉ͡؀ڥͰಈ࡞͢Δ ύϑΥʔϚϯε ✅ ॏෳϥΠϒϥϦΛڞ༗Ͱ͖Δ /FYUKTͰ࢖༻Մೳ ⚠ 8FCQBDL͚ͩͰ͸ෆՄ
  7. ˜-:$PSQPSBUJPO • ࠶ར༻Մೳͳ)5.-λάΛ࣮૷ͯ͠TDSJQUλά͔ΒಡΈࠐΉ • ϒϥ΢β͕ఏڙ͢Δػೳ  .'&ͷ࣮ݱํ๏ɿ8FC$PNQPOFOUT KT "QQ4IFMM 'SBHNFOU

    ٻΊΔཁ݅ ཁ݅Λຬ͍ͨͯ͠Δ͔ ߴ଎ʹϦϦʔεՄೳ ✅ औಘ͢Δ+4ͷ63-Λมߋ͢Δ͚ͩ ௕ظతͳ࢖༻ ✅ ϒϥ΢βඪ४ͷػೳ ਌ࢠؒͷ෼཭ੑ ⚠ 4IBEPX%0.ʹΑΔ෦෼తͳ෼཭ ύϑΥʔϚϯε ⚠ ॏෳϥΠϒϥϦ΋શͯόϯυϧ͞ΕΔ /FYUKTͰ࢖༻Մೳ ❌ 3FBDUͰͷαϙʔτ͕׬શͰͳ͍ ͦͷଞͷݒ೦఺ • 4IBEPX%0.Λར༻͢Δ৔߹ɺ಺෦ͷཁૉʹ௚઀ΞΫηεͰ͖ͳ͍ͨΊ ޿ࠂ࣮૷ʹमਖ਼͕ඞཁ
  8. ˜-:$PSQPSBUJPO • )5.-ϖʔδ಺ʹผͷ)5.-Λදࣔ͢Δ • ϒϥ΢β͕ఏڙ͢Δػೳ  .'&ͷ࣮ݱํ๏ɿJGSBNF IUNM "QQ4IFMM 'SBHNFOU

    ٻΊΔཁ݅ ཁ݅Λຬ͍ͨͯ͠Δ͔ ߴ଎ʹϦϦʔεՄೳ ✅ औಘ͢Δ)5.-ͷ63-Λมߋ͢Δ͚ͩ ௕ظతͳ࢖༻ ✅ ϒϥ΢βඪ४ͷػೳ ਌ࢠؒͷ෼཭ੑ ✅ JGSBNFʹΑΔڧ͍෼཭ ύϑΥʔϚϯε ❌ )5.-શମΛಡΈࠐΉඞཁ͕͋Δ /FYUKTͰ࢖༻Մೳ ✅ ಛʹ੍ݶͳ͠ ͦͷଞͷݒ೦఺ • εΫϩʔϧͱԣεϫΠϓΛ਌ࢠؒͰ࿈ܞͤ͞Δඞཁ͕͋Γ࣮૷͕ෳࡶԽ • εΫϩʔϧ੍ޚͷͨΊʹ಺֎ͷॎ෯Λಉظ͢Δඞཁ͕͋Γද͕ࣔΨλͭ͘
  9. ˜-:$PSQPSBUJPO ಛఆͷϥΠϒϥϦ΍ϒϥ΢βػೳʹґଘ͠ͳ͍࣮૷ํ๏ʹ͍ͭͯ΋ݕ౼  .'&ͷ࣮ݱํ๏ɿಠ࣮ࣗ૷ "QQ4IFMMଆͷॲཧ FYQPSUDPOTU'SBHNFOU-PBEFS \ VTF&GGFDU \ TDSJQUλάͰKTϑΝΠϧΛಡΈࠐΈ

    EPDVNFOUIFBEBQQFOE$IJME GSBHNFOU ^ <>  SFUVSOEJWJEFYBNQMF ^ KT ˞ߏ੒͸8FC$PNQPOFOUTͱಉ͡ 'SBHNFOU "QQ4IFMM ࢦఆͨ͠JEͷEJWཁૉʹ දࣔ͢ΔΑ͏࣮૷͢Δ͚ͩ 'SBHNFOUଆͷॲཧ DPOTUDPOUBJOFSEPDVNFOUHFU&MFNFOU#Z*E FYBNQMF DPOTUSPPUDSFBUF3PPU DPOUBJOFS SPPUSFOEFS "QQ
  10. ˜-:$PSQPSBUJPO • ࢦఆͨ͠JEཁૉʹදࣔ͢Δ࣮૷ΛTDSJQUλάͰಡΈࠐΉ  .'&ͷ࣮ݱํ๏ɿಠ࣮ࣗ૷ KT ˞ߏ੒͸8FC$PNQPOFOUTͱಉ͡ 'SBHNFOU "QQ4IFMM ٻΊΔཁ݅

    ཁ݅Λຬ͍ͨͯ͠Δ͔ ߴ଎ʹϦϦʔεՄೳ ✅ औಘ͢Δ+4ͷ63-Λมߋ͢Δ͚ͩ ௕ظతͳ࢖༻ ✅ ಛʹݒ೦ͳ͠ ਌ࢠؒͷ෼཭ੑ ⚠ ಉ͡؀ڥͰಈ࡞͢Δ ύϑΥʔϚϯε ⚠ ॏෳϥΠϒϥϦ΋શͯόϯυϧ͞ΕΔ /FYUKTͰ࢖༻Մೳ ✅ ಛʹ੍ݶͳ͠
  11. ˜-:$PSQPSBUJPO • ֤ػೳ͕ࣗ཯తʹػೳվળͰ͖Δঢ়ଶʹ͢Δ • ᶃ "QQ4IFMMͷमਖ਼ͳ͘'SBHNFOUΛ୯ಠͰϦϦʔεɾϩʔϧόοΫՄೳʹ͢Δ • ᶄ 'SBHNFOUΛ8FC͚ͩͰͳ͘ΞϓϦͰ΋࢖͑ΔΑ͏ʹ͢Δ •

    ಠ࣮ࣗ૷ͷ՝୊Λղܾ͢Δ • ᶅ "QQ4IFMMͱ'SBHNFOUͷؒͰͷӨڹΛग़དྷΔ͚ͩݮΒ͢ • ᶆ 'SBHNFOUͷ௨৴ྔ૿ՃΛग़དྷΔ͚ͩݮΒ͢  ࢒Γͷඞཁͳݕ౼ ٻΊΔཁ݅ ཁ݅Λຬ͍ͨͯ͠Δ͔ ਌ࢠؒͷ෼཭ੑ ⚠ ಉ͡؀ڥͰಈ࡞͢Δ ύϑΥʔϚϯε ⚠ ॏෳϥΠϒϥϦ΋શͯόϯυϧ͞ΕΔ
  12. ˜-:$PSQPSBUJPO ύοέʔδϚωʔδϟʔΛ໛ͨ͠γεςϜΛ४උ ᶃ 'SBHNFOUͷόʔδϣϯҰཡΛࣄલ഑৴ ᶄ όʔδϣϯҰཡΛఆظతʹऔಘ͠ɺ ར༻όʔδϣϯΛΩϟογϡ ᶅ τοϓϖʔδΛදࣔ ᶆ

    ᶄͷόʔδϣϯΛ࢖༻ͯ͠ ϑϥάϝϯτΛऔಘ ˠ ᶃͷόʔδϣϯҰཡΛमਖ਼͢Δ ͚ͩͰϦϦʔεɾϩʔϧόοΫͰ͖Δ  ᶃ 'SBHNFOUΛ୯ಠͰϦϦʔεՄೳʹ "QQ4IFMM \GSBHNFOU?^ <    > KTPO KT ᶄ ఆظऔಘ  GSBHNFOUKT ᶅ ᶃ WFSTJPOTKTPO ϒϥ΢β IUUQTNZBIPPDPKQ ᶆ Λ Ωϟογϡ
  13. ˜-:$PSQPSBUJPO "QQ4IFMMͱ'SBHNFOU͸ಉ͡8FCϖʔδ্Ͱಈ࡞͢Δ ˠ 'SBHNFOUͷಈ࡞ͱ"QQ4IFMMͷಈ࡞͕িಥ͢ΔϦεΫ͕͋Δ -PDBM4UPSBHFͷಉ໊ΩʔͳͲ ˠ 4%,Λ։ൃͯ͠ӨڹΛग़དྷΔ͚ͩݮΒ͢  ᶅ 'SBHNFOU಺֎ͷӨڹΛग़དྷΔ͚ͩݮΒ͢

    • -PDBM4UPSBHFΛૢ࡞͢ΔͨΊͷϥούʔؔ਺ • σϓϩΠํ๏Λ౷Ұ͢ΔͨΊͷςϯϓϨʔτ • τοϓϖʔδͷཁ݅Λຬͨͨ͢Ίͷ ϢʔςΟϦςΟ΍ίϯϙʔωϯτ 4%,
  14. ˜-:$PSQPSBUJPO .'&ԽલޙͰը໘දࣔ͸ҎԼͷΑ͏ʹมΘ͍ͬͯΔ  ᶆ 'SBHNFOUͷ௨৴ྔΛग़དྷΔ͚ͩݮΒ͢ ϖʔδͷ )5.- +4$44ͳͲ .'&Խલ දࣔ

    ϖʔδͷ )5.- +4$44ͳͲ 'SBHNFOUͷ +4$44ͳͲ .'&Խޙ 'SBHNFOU͔Βͷ "1*ݺͼग़͠ දࣔ ͜͜͸খ͘͞Ͱ͖ͦ͏
  15. ˜-:$PSQPSBUJPO "QQ4IFMM͕͢ͰʹಡΈࠐΜͰ͍ΔϥΠϒϥϦͷҰ෦Λάϩʔόϧม਺ʹੜ΍͢ ˠ 'SBHNFOUͷόϯυϧαΠζΛগ͠࡟ݮ  ᶆ 'SBHNFOUͷ௨৴ྔΛग़དྷΔ͚ͩݮΒ͢ "QQ4IFMMଆͷॲཧ 1SPNJTFBMM <

    JNQPSU SFBDU UIFO MJCSBSZ \ XJOEPX3FBDUMJCSBSZEFGBVMU ^ JNQPSU SFBDUEPN UIFO MJCSBSZ \ XJOEPX3FBDU%0.MJCSBSZEFGBVMU ^ > 'SBHNFOUͷXFCQBDLDPOGJHKT NPEVMFFYQPSUT\  FYUFSOBMT\ SFBDU3FBDU SFBDUEPN3FBDU%0. ^ ^ KT 'SBHNFOU "QQ4IFMM ϥΠϒϥϦશମΛڞ༗͢ΔͨΊɺ5SFF4IBLJOHΛଟ͘ޮ͔͍ͤͨϥΠϒϥϦʹ͸޲͔ͳ͍
  16. ˜-:$PSQPSBUJPO ͓τΫλϒͷྫ • ։ൃΛτοϓϖʔδ͔Β:BIPPζότΫʹҠ؅ • $*্ͰͷϏϧυ࣌ؒ͸෼ τοϓϖʔδશମ ˠ ෼ 'SBHNFOUͷΈ

    ʹ • Ҡ؅ʹ͋ͨͬͯτοϓϖʔδͷطଘ࣮૷ΛҰ෦࡟ݮ ߦ਺͸εφοϓγϣοτςετΛؚΈ·͢  .'&ಋೖͰಘΒΕͨ੒Ռ
  17. ˜-:$PSQPSBUJPO • ֤αʔϏε͔ΒτοϓϖʔδΛ௨ͯ͠ػೳ։ൃ • τοϓϖʔδશମΛϏϧυ͢ΔͷͰ͕͔͔࣌ؒΔ • ΞϓϦ8FC͸ผʑʹ։ൃ #FGPSF  .'&ಋೖͰಘΒΕͨ੒Ռ

    "GUFS • ֤αʔϏε͕؅׋͍ͯ͠ΔػೳΛ௚઀։ൃ • 'SBHNFOU୯ମͳͷͰ୹࣌ؒͰϏϧυ • ΞϓϦ8FCʹಉ͡ιʔείʔυ͔Βಉ࣌ʹϦϦʔε
  18. ˜-:$PSQPSBUJPO • ଞλϒ΁ͷల։ • 4%,ͰΧόʔग़དྷ͍ͯͳ͍ϦεΫͷݟ௚͠ • ϦιʔεͷઌಡΈʹΑΔύϑΥʔϚϯεͷվળ  ࠓޙͷల๬ ϖʔδͷ

    )5.- +4$44ͳͲ 'SBHNFOUͷ +4$44ͳͲ 'SBHNFOU͔Βͷ "1*ݺͼग़͠ දࣔ "1*ݺͼग़͠ 'SBHNFOUʹඞཁͳ σʔλΛࣄલʹऔಘ