© LY Corporation Yahoo! ζότΫʹ͓͚Δ ϑϩϯτΤϯυ։ൃ ౉෦ ஐ࢙

© LY Corporation 2 ౉෦ ஐ࢙ LINEϠϑʔגࣜձࣾ ϑϩϯτΤϯυΤϯδχΞ 2016೥ʹϠϑʔגࣜձࣾʹ৽ଔೖࣾ ಉ೥͔ΒݱࡏʹࢸΔ·Ͱू٬αʔϏεʢओʹζότΫʣ ͷ։ൃʹैࣄ ݱࡏ͸ζότΫͷ։ൃνʔϜʹͯϦʔμʔΛ຿ΊΔ © LY Corporation

© LY Corporation Yahoo! ζότΫʹ͍ͭͯ “ຖ೔ϫΫϫΫʂ͓τΫ͕౰ͨΔˍ΋Β͑Δ” ͘͡΍ΩϟϯϖʔϯΛܝࡌ͢ΔͨΊͷϓϥοτϑΥʔϜ • நબ΍ΤϯτϦʔɺελϯϓͳͲ༷ʑͳػೳΛఏڙ • ଟ༷ͳछྨͷΩϟϯϖʔϯͷ։࠵͕Մೳ • ࣾ಺αʔϏεɺࣾ֎ͷاۀ༷ͱ࿈ܞ 3

© LY Corporation Yahoo! ζότΫʹ͍ͭͯ ζότΫҎ֎ʹ΋ʮ͓τΫλϒʯ΍ʮLYPϚΠϨʔδʯαʔϏε΋։ൃɾӡ༻ 4 • ͓τΫλϒ • Yahoo! JAPAN τοϓϖʔδͷίϯςϯπ ͷ1ͭ • ͓ಘͳ৘ใ΍ΫʔϙϯɺΩϟϯϖʔϯͳͲ Λൃ৴ • εϚϗWEBɺΞϓϦʢiOS/Androidʣͷσ όΠεͰఏڙ • LYPϚΠϨʔδ • Yahoo! γϣοϐϯάͷର৅ళฮ΍֗ͷ͓ ళͰPayPayܾࡁͰ঎඼Λߪೖ͠৚݅Λୡ ੒͢Δ͜ͱͰɺPayPayϙΠϯτͳͲͷಛ య͕֫ಘͰ͖ΔαʔϏε

© LY Corporation ٕज़ελοΫ ू٬αʔϏεΛࢧ͑Δٕज़ 5 ϑϩϯτΤϯυ • TypeScript • Next.js • React • CSS Modules • jest • Cypress • MFEʢMicro Frontendʣ • ͓τΫλϒͰ׆༻͞Ε͍ͯΔ ΞʔΩςΫνϟ • Yahoo! JAPANτοϓϖʔδ͕ App ShellͱͳΓɺ͓τΫλϒ͸ Fragmentͱͯ͠Քಇ͍ͯ͠Δ όοΫΤϯυ • Java • SpringBoot • Docker • Kubernetes

© LY Corporation MFEʢMicro Frontendʣ ू٬αʔϏεΛࢧ͑Δٕज़ 6 Ҿ༻ Yahoo! JAPANτοϓϖʔδʹ͓͚ΔϚΠΫϩϑϩϯτΤϯυ - େن໛૊৫ʹ͓͚ΔFE։ൃΛՃ଎ͤ͞Δʹ͸ • MFEʢMicro Frontendʣ • Yahoo! JAPANͷτοϓϖʔδνʔϜ͕։ൃͨ͠MFEͷ࢓૊ΈʢSDKʣΛ༻͍͓ͯτΫλϒ ʢFragmentʣΛ։ൃ • ΞϓϦέʔγϣϯΛػೳຖʹ෼ׂ • ෼ׂ͞Εͨখ͞ͳγεςϜΛ૊Έ߹ΘͤΔ͜ͱͰେ͖ͳγεςϜΛߏ੒͢Δ • App Shellʢ਌ʣͱͳΔτοϓϖʔδγεςϜ͕֤FragmentʢλϒʣΛݺͼग़͢ߏ੒ͱͳͬ ͍ͯΔ • զʑू٬αʔϏε͸͓τΫλϒΛ։ൃ͠ɺτοϓϖʔδͷҰίϯςϯπͱͯ͠Ϣʔβʔʹఏڙ

© LY Corporation • νʔϜA/B͕ओʹϏδωεҊ݅ͷ։ൃΛߦ͏ • ϏδωεҊ݅ͷଞʹόοΫΦϑΟεܥͷπʔϧͷ։ൃ΋୲౰͢Δ • SREνʔϜ͸ԣஅతͳٕज़՝୊ͷղܾ΍ΠϯϑϥɾϑϨʔϜϫʔΫͷ࠷৽ԽʢݕূʣΛߦ͏ ૊৫ɾνʔϜ 7 ू٬αʔϏεͷ։ൃମ੍ νʔϜA νʔϜB SREνʔ Ϝ

© LY Corporation ΞδϟΠϧ։ൃ • εΫϥϜʹΑΔ։ൃͰ1िؒ1εϓϦϯτͰӡӦ • εΫϥϜνʔϜ͸։ൃϝϯόʔ͚ͩͰͳ͘σβΠφʔ΍اը৬ͷϝϯόʔ΋͍Δ • ֤৬छ͕͍ۙڑ཭ͰϫϯνʔϜͰ։ൃ͕ਐߦͰ͖Δ όοΫΤϯυ͔ΒϑϩϯτΤϯυ·Ͱ޿͍ྖҬͷܦݧ • όοΫ/ϑϩϯτͦΕͧΕͷΞϓϦέʔγϣϯ։ൃɾӡ༻͕ܦݧͰ͖Δ ٕज़՝୊ͷఏҊɾվળ࣮ࢪ • ௨ৗͷۀ຿ͱ͸ҟͳΔٕज़తͳ՝୊ΛఏҊɾվળΛߦ͏ • ex. ύϑΥʔϚϯεվળɺϦϑΝΫλϦϯάɺӡ༻ޮ཰ԽͳͲ • ݱঢ়ʹຬ଍ͤͣΑΓྑ͍؀ڥͮ͘Γ΍ΞϓϦέʔγϣϯ࡞ΓΛ໨ࢦ͢ • ௨ৗͷۀ຿ͷத͚ͩͰ͸ಘΒΕͳ͍ܦݧ΍εΩϧͷ֫ಘ͕Մೳ ಛ௃ 8 ू٬αʔϏεͷ։ൃମ੍

© LY Corporation 9 ΩϟϦΞ • ೖࣾҎདྷ௕Β͘όοΫΤϯυͷྖҬΛ୲౰ • 2021೥ԼظʹPayPayϛχΞϓϦͷ։ൃҊ݅Λ୲౰ • ͔͜͜ΒϑϩϯτΤϯυͷྖҬΛॳΊͯ୲౰ • TypeScript / React / Next.js ͲΕ΋ະܦݧͷঢ়ଶ • ࣾ಺ͷϑϩϯτΤϯυ༗ࣝऀͷॿྗ΋͋ͬͯϛχΞϓϦͷϩʔ ϯνʹ੒ޭ • ॳΊͯͷྖҬֶ͕ͩͬͨͿָ͠͞ͱͦΕ͕Ξ΢τϓοτͱ ͯ͠αʔϏεʹؐݩ͞ΕΔָ͠͞ͷ྆ํ͕Ϟνϕʔγϣϯ ʹͳ͍ͬͯͨ • PayPayϛχΞϓϦͷ্ཱͪ͛Ҏ߱ݱࡏʹࢸΔ·Ͱ͓τΫλϒͷ։ ൃ౳ؚΊϑϩϯτΤϯυྖҬʹ΋ؔΘΔػձ΋૿͍͑ͯΔঢ়گ

© LY Corporation 10 ΩϟϦΞ • ϑϩϯτΤϯυͷྖҬʹؔΘΕͨ͜ͱͰReact΍Next.jsͱ͍ͬͨࣾ಺֎ͱଟ͘ར༻͞Ε͍ͯΔϥΠϒϥ Ϧ΍ϑϨʔϜϫʔΫΛֶͿػձΛಘΒΕͨͷ͸ඇৗʹྑ͍ܦݧͱͳͬͨ • αʔϏεΛ࡞Γ্͍͔͛ͯͳ͚Ε͹ͳΒͳ͍ϓϨογϟʔ͸͕͋ͬͨɺͦͷ෼࣮༻తͳֶͼ͕Ͱ ͖ͨ • JavaScriptͷݴޠಛੑͱͯ͠೉͘͠ײ͡Δ৔໘͸͋ͬͨʢγϯάϧεϨουϞσϧʣ͕ɺόοΫΤϯυ Ͱ΋ͦΕͳΓʹίʔσΟϯάྺ͸௕͔ͬͨ͜ͱ͔Βݴޠͷน͸ײͮ͡Β͔ͬͨ • όοΫΤϯυͷσβΠϯઃܭ΍ΞʔΩςΫνϟʹ৮ΕΔػձ͕ଟ͔ͬͨͨΊɺMFE΍Atomic Designͷ Α͏ͳϑϩϯτΤϯυͷσβΠϯύλʔϯΛ஌Δ͜ͱ͕Ͱ͖ઃܭͷ෯Λ޿͛Δ͜ͱ͕Ͱ͖ͨ • όοΫΤϯυͷҊ݅Ҏ֎ʹ΋ϑϩϯτΤϯυͷҊ݅ʹؔΘΔػձ΋૿͑ɺΩϟϦΞͷ෯΋޿͕ΓϞν ϕʔγϣϯΞοϓʹ΋ܨ͕ͬͨ • όοΫΤϯυʹൺ΂Δͱ • ·ͩ·ͩ஌Βͳ͍͜ͱ͕ଟ͍ྖҬ͕ͩɺͦͷ෼஌Δָ͕͋͠͞Δ • ؀ڥͷมԽ͕໨·͙Δ͘͠ɺมԽʹ௥ै͢Δ͚ͩͷεΩϧ͕ඞཁͩͱ௧ײ

© LY Corporation ٕज़ʹରͯ͠લ޲͖ʹऔΓ૊ΊΔ ༩͑ΒΕͨۀ຿͚ͩͰͳ͘ɺࣗ਎Ͱ՝୊ΛൃݟɾఏҊ͠ղܾ͍ͨ͠ ϑϩϯτΤϯυ͸΋ͪΖΜɺͦͷଞ޿͍ྖҬʹ΋νϟϨϯδͯ͠Έ͍ͨ 11 ͜Μͳํʹདྷͯ΄͍͠

© LY Corporation ΤϯτϦʔΛ͓଴͍ͪͯ͠·͢ʂ 12

© LY Corporation