Yahoo! ズバトクにおけるフロントエンド開発

2024年12月11日に開催された中途採用向けフロントエンドエンジニア採用説明会で投影したYahoo! ズバトクにおけるフロントエンド開発の紹介スライドです。

Transcript

1. © LY Corporation Yahoo! ζότΫʹ͓͚Δ ϑϩϯτΤϯυ։ൃ ౉෦ ஐ࢙
2. © LY Corporation 2 ౉෦ ஐ࢙ LINEϠϑʔגࣜձࣾ ϑϩϯτΤϯυΤϯδχΞ 2016೥ʹϠϑʔגࣜձࣾʹ৽ଔೖࣾ ಉ೥͔ΒݱࡏʹࢸΔ·Ͱू٬αʔϏεʢओʹζότΫʣ ͷ։ൃʹैࣄ ݱࡏ͸ζότΫͷ։ൃνʔϜʹͯϦʔμʔΛ຿ΊΔ © LY Corporation
3. © LY Corporation Yahoo! ζότΫʹ͍ͭͯ “ຖ೔ϫΫϫΫʂ͓τΫ͕౰ͨΔˍ΋Β͑Δ” ͘͡΍ΩϟϯϖʔϯΛܝࡌ͢ΔͨΊͷϓϥοτϑΥʔϜ • நબ΍ΤϯτϦʔɺελϯϓͳͲ༷ʑͳػೳΛఏڙ • ଟ༷ͳछྨͷΩϟϯϖʔϯͷ։࠵͕Մೳ • ࣾ಺αʔϏεɺࣾ֎ͷاۀ༷ͱ࿈ܞ 3
4. © LY Corporation Yahoo! ζότΫʹ͍ͭͯ ζότΫҎ֎ʹ΋ʮ͓τΫλϒʯ΍ʮLYPϚΠϨʔδʯαʔϏε΋։ൃɾӡ༻ 4 • ͓τΫλϒ • Yahoo! JAPAN τοϓϖʔδͷίϯςϯπ ͷ1ͭ • ͓ಘͳ৘ใ΍ΫʔϙϯɺΩϟϯϖʔϯͳͲ Λൃ৴ • εϚϗWEBɺΞϓϦʢiOS/Androidʣͷσ όΠεͰఏڙ • LYPϚΠϨʔδ • Yahoo! γϣοϐϯάͷର৅ళฮ΍֗ͷ͓ ళͰPayPayܾࡁͰ঎඼Λߪೖ͠৚݅Λୡ ੒͢Δ͜ͱͰɺPayPayϙΠϯτͳͲͷಛ య͕֫ಘͰ͖ΔαʔϏε
5. © LY Corporation ٕज़ελοΫ ू٬αʔϏεΛࢧ͑Δٕज़ 5 ϑϩϯτΤϯυ • TypeScript • Next.js • React • CSS Modules • jest • Cypress • MFEʢMicro Frontendʣ • ͓τΫλϒͰ׆༻͞Ε͍ͯΔ ΞʔΩςΫνϟ • Yahoo! JAPANτοϓϖʔδ͕ App ShellͱͳΓɺ͓τΫλϒ͸ Fragmentͱͯ͠Քಇ͍ͯ͠Δ όοΫΤϯυ • Java • SpringBoot • Docker • Kubernetes
6. © LY Corporation MFEʢMicro Frontendʣ ू٬αʔϏεΛࢧ͑Δٕज़ 6 Ҿ༻ Yahoo! JAPANτοϓϖʔδʹ͓͚ΔϚΠΫϩϑϩϯτΤϯυ - େن໛૊৫ʹ͓͚ΔFE։ൃΛՃ଎ͤ͞Δʹ͸ • MFEʢMicro Frontendʣ • Yahoo! JAPANͷτοϓϖʔδνʔϜ͕։ൃͨ͠MFEͷ࢓૊ΈʢSDKʣΛ༻͍͓ͯτΫλϒ ʢFragmentʣΛ։ൃ • ΞϓϦέʔγϣϯΛػೳຖʹ෼ׂ • ෼ׂ͞Εͨখ͞ͳγεςϜΛ૊Έ߹ΘͤΔ͜ͱͰେ͖ͳγεςϜΛߏ੒͢Δ • App Shellʢ਌ʣͱͳΔτοϓϖʔδγεςϜ͕֤FragmentʢλϒʣΛݺͼग़͢ߏ੒ͱͳͬ ͍ͯΔ • զʑू٬αʔϏε͸͓τΫλϒΛ։ൃ͠ɺτοϓϖʔδͷҰίϯςϯπͱͯ͠Ϣʔβʔʹఏڙ
7. © LY Corporation • νʔϜA/B͕ओʹϏδωεҊ݅ͷ։ൃΛߦ͏ • ϏδωεҊ݅ͷଞʹόοΫΦϑΟεܥͷπʔϧͷ։ൃ΋୲౰͢Δ • SREνʔϜ͸ԣஅతͳٕज़՝୊ͷղܾ΍ΠϯϑϥɾϑϨʔϜϫʔΫͷ࠷৽ԽʢݕূʣΛߦ͏ ૊৫ɾνʔϜ 7 ू٬αʔϏεͷ։ൃମ੍ νʔϜA νʔϜB SREνʔ Ϝ
8. © LY Corporation ΞδϟΠϧ։ൃ • εΫϥϜʹΑΔ։ൃͰ1िؒ1εϓϦϯτͰӡӦ • εΫϥϜνʔϜ͸։ൃϝϯόʔ͚ͩͰͳ͘σβΠφʔ΍اը৬ͷϝϯόʔ΋͍Δ • ֤৬छ͕͍ۙڑ཭ͰϫϯνʔϜͰ։ൃ͕ਐߦͰ͖Δ όοΫΤϯυ͔ΒϑϩϯτΤϯυ·Ͱ޿͍ྖҬͷܦݧ • όοΫ/ϑϩϯτͦΕͧΕͷΞϓϦέʔγϣϯ։ൃɾӡ༻͕ܦݧͰ͖Δ ٕज़՝୊ͷఏҊɾվળ࣮ࢪ • ௨ৗͷۀ຿ͱ͸ҟͳΔٕज़తͳ՝୊ΛఏҊɾվળΛߦ͏ • ex. ύϑΥʔϚϯεվળɺϦϑΝΫλϦϯάɺӡ༻ޮ཰ԽͳͲ • ݱঢ়ʹຬ଍ͤͣΑΓྑ͍؀ڥͮ͘Γ΍ΞϓϦέʔγϣϯ࡞ΓΛ໨ࢦ͢ • ௨ৗͷۀ຿ͷத͚ͩͰ͸ಘΒΕͳ͍ܦݧ΍εΩϧͷ֫ಘ͕Մೳ ಛ௃ 8 ू٬αʔϏεͷ։ൃମ੍
9. © LY Corporation 9 ΩϟϦΞ • ೖࣾҎདྷ௕Β͘όοΫΤϯυͷྖҬΛ୲౰ • 2021೥ԼظʹPayPayϛχΞϓϦͷ։ൃҊ݅Λ୲౰ • ͔͜͜ΒϑϩϯτΤϯυͷྖҬΛॳΊͯ୲౰ • TypeScript / React / Next.js ͲΕ΋ະܦݧͷঢ়ଶ • ࣾ಺ͷϑϩϯτΤϯυ༗ࣝऀͷॿྗ΋͋ͬͯϛχΞϓϦͷϩʔ ϯνʹ੒ޭ • ॳΊͯͷྖҬֶ͕ͩͬͨͿָ͠͞ͱͦΕ͕Ξ΢τϓοτͱ ͯ͠αʔϏεʹؐݩ͞ΕΔָ͠͞ͷ྆ํ͕Ϟνϕʔγϣϯ ʹͳ͍ͬͯͨ • PayPayϛχΞϓϦͷ্ཱͪ͛Ҏ߱ݱࡏʹࢸΔ·Ͱ͓τΫλϒͷ։ ൃ౳ؚΊϑϩϯτΤϯυྖҬʹ΋ؔΘΔػձ΋૿͍͑ͯΔঢ়گ
10. © LY Corporation 10 ΩϟϦΞ • ϑϩϯτΤϯυͷྖҬʹؔΘΕͨ͜ͱͰReact΍Next.jsͱ͍ͬͨࣾ಺֎ͱଟ͘ར༻͞Ε͍ͯΔϥΠϒϥ Ϧ΍ϑϨʔϜϫʔΫΛֶͿػձΛಘΒΕͨͷ͸ඇৗʹྑ͍ܦݧͱͳͬͨ • αʔϏεΛ࡞Γ্͍͔͛ͯͳ͚Ε͹ͳΒͳ͍ϓϨογϟʔ͸͕͋ͬͨɺͦͷ෼࣮༻తͳֶͼ͕Ͱ ͖ͨ • JavaScriptͷݴޠಛੑͱͯ͠೉͘͠ײ͡Δ৔໘͸͋ͬͨʢγϯάϧεϨουϞσϧʣ͕ɺόοΫΤϯυ Ͱ΋ͦΕͳΓʹίʔσΟϯάྺ͸௕͔ͬͨ͜ͱ͔Βݴޠͷน͸ײͮ͡Β͔ͬͨ • όοΫΤϯυͷσβΠϯઃܭ΍ΞʔΩςΫνϟʹ৮ΕΔػձ͕ଟ͔ͬͨͨΊɺMFE΍Atomic Designͷ Α͏ͳϑϩϯτΤϯυͷσβΠϯύλʔϯΛ஌Δ͜ͱ͕Ͱ͖ઃܭͷ෯Λ޿͛Δ͜ͱ͕Ͱ͖ͨ • όοΫΤϯυͷҊ݅Ҏ֎ʹ΋ϑϩϯτΤϯυͷҊ݅ʹؔΘΔػձ΋૿͑ɺΩϟϦΞͷ෯΋޿͕ΓϞν ϕʔγϣϯΞοϓʹ΋ܨ͕ͬͨ • όοΫΤϯυʹൺ΂Δͱ • ·ͩ·ͩ஌Βͳ͍͜ͱ͕ଟ͍ྖҬ͕ͩɺͦͷ෼஌Δָ͕͋͠͞Δ • ؀ڥͷมԽ͕໨·͙Δ͘͠ɺมԽʹ௥ै͢Δ͚ͩͷεΩϧ͕ඞཁͩͱ௧ײ
11. © LY Corporation ٕज़ʹରͯ͠લ޲͖ʹऔΓ૊ΊΔ ༩͑ΒΕͨۀ຿͚ͩͰͳ͘ɺࣗ਎Ͱ՝୊ΛൃݟɾఏҊ͠ղܾ͍ͨ͠ ϑϩϯτΤϯυ͸΋ͪΖΜɺͦͷଞ޿͍ྖҬʹ΋νϟϨϯδͯ͠Έ͍ͨ 11 ͜Μͳํʹདྷͯ΄͍͠
12. © LY Corporation ΤϯτϦʔΛ͓଴͍ͪͯ͠·͢ʂ 12
13. © LY Corporation