Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Yahoo! ズバトクにおけるフロントエンド開発
Search
LINEヤフーTech (LY Corporation Tech)
PRO
December 16, 2024
Technology
0
620
Yahoo! ズバトクにおけるフロントエンド開発
2024年12月11日に開催された中途採用向けフロントエンドエンジニア採用説明会で投影したYahoo! ズバトクにおけるフロントエンド開発の紹介スライドです。
LINEヤフーTech (LY Corporation Tech)
PRO
December 16, 2024
Tweet
Share
More Decks by LINEヤフーTech (LY Corporation Tech)
See All by LINEヤフーTech (LY Corporation Tech)
ドメイン駆動設計の実践により事業の成長スピードと保守性を両立するショッピングクーポン
lycorptech_jp
PRO
17
3.5k
LINEスキマニにおけるフロントエンド開発
lycorptech_jp
PRO
1
1.3k
LINE Developersプロダクト(LIFF/LINE Login)におけるフロントエンド開発
lycorptech_jp
PRO
0
740
AI時代のデータセンターネットワーク
lycorptech_jp
PRO
1
530
連合学習を用いたスタンプの推薦
lycorptech_jp
PRO
2
74
Will Positron accelerate us?
lycorptech_jp
PRO
2
180
Try using dbtplyr
lycorptech_jp
PRO
0
28
EthernetベースのGPUクラスタ導入による学びと展望
lycorptech_jp
PRO
2
1.1k
LY Accessibility Guidelines @fukuoka_a11yconf_前夜祭
lycorptech_jp
PRO
1
190
Other Decks in Technology
See All in Technology
日経電子版 x AIエージェントの可能性とAgentic RAGによって提案書生成を行う技術
masahiro_nishimi
1
250
Datadogとともにオブザーバビリティを布教しよう
mego2221
0
120
Postmanを使いこなす!2025年ぜひとも押さえておきたいPostmanの10の機能
nagix
1
100
MC906491 を見据えた Microsoft Entra Connect アップグレード対応
tamaiyutaro
1
380
君はPostScriptなウィンドウシステム 「NeWS」をご存知か?/sunnews
koyhoge
0
710
Building Products in the LLM Era
ymatsuwitter
7
2k
Next Step: Play Time!
trishagee
2
160
Ask! NIKKEI RAG検索技術の深層
hotchpotch
13
2.7k
【Developers Summit 2025】プロダクトエンジニアから学ぶ、 ユーザーにより高い価値を届ける技術
niwatakeru
2
280
自動テストの世界に、この5年間で起きたこと
autifyhq
4
4.7k
Bounded Context: Problem or Solution?
ewolff
1
200
SCSAから学ぶセキュリティ管理
masakamayama
0
140
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1030
460k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
29
2.2k
Navigating Team Friction
lara
183
15k
Designing for humans not robots
tammielis
250
25k
For a Future-Friendly Web
brad_frost
176
9.5k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
A Philosophy of Restraint
colly
203
16k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
99
18k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
Transcript
© 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 ΩϟϦΞ • ϑϩϯτΤϯυͷྖҬʹؔΘΕͨ͜ͱͰReactNext.jsͱ͍ͬͨࣾ֎ͱଟ͘ར༻͞Ε͍ͯΔϥΠϒϥ ϦϑϨʔϜϫʔΫΛֶͿػձΛಘΒΕͨͷඇৗʹྑ͍ܦݧͱͳͬͨ • αʔϏεΛ࡞Γ্͍͔͛ͯͳ͚ΕͳΒͳ͍ϓϨογϟʔ͕͋ͬͨɺͦͷ࣮༻తͳֶͼ͕Ͱ
͖ͨ • JavaScriptͷݴޠಛੑͱͯ͘͠͠ײ͡Δ໘͋ͬͨʢγϯάϧεϨουϞσϧʣ͕ɺόοΫΤϯυ ͰͦΕͳΓʹίʔσΟϯάྺ͔ͬͨ͜ͱ͔Βݴޠͷนײͮ͡Β͔ͬͨ • όοΫΤϯυͷσβΠϯઃܭΞʔΩςΫνϟʹ৮ΕΔػձ͕ଟ͔ͬͨͨΊɺMFEAtomic Designͷ Α͏ͳϑϩϯτΤϯυͷσβΠϯύλʔϯΛΔ͜ͱ͕Ͱ͖ઃܭͷ෯Λ͛Δ͜ͱ͕Ͱ͖ͨ • όοΫΤϯυͷҊ݅Ҏ֎ʹϑϩϯτΤϯυͷҊ݅ʹؔΘΔػձ૿͑ɺΩϟϦΞͷ෯͕ΓϞν ϕʔγϣϯΞοϓʹܨ͕ͬͨ • όοΫΤϯυʹൺΔͱ • ·ͩ·ͩΒͳ͍͜ͱ͕ଟ͍ྖҬ͕ͩɺͦͷΔָ͕͋͠͞Δ • ڥͷมԽ͕·͙Δ͘͠ɺมԽʹै͢Δ͚ͩͷεΩϧ͕ඞཁͩͱ௧ײ
© LY Corporation ٕज़ʹରͯ͠લ͖ʹऔΓΊΔ ༩͑ΒΕͨۀ͚ͩͰͳ͘ɺࣗͰ՝ΛൃݟɾఏҊ͠ղܾ͍ͨ͠ ϑϩϯτΤϯυͪΖΜɺͦͷଞ͍ྖҬʹνϟϨϯδͯ͠Έ͍ͨ 11 ͜Μͳํʹདྷͯ΄͍͠
© LY Corporation ΤϯτϦʔΛ͓͍ͪͯ͠·͢ʂ 12
© LY Corporation