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
670
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)
LINEスキマニのフロントエンド開発にDenoを採用した理由
lycorptech_jp
PRO
0
58
「コード品質向上のテクニック」連載継続の秘訣
lycorptech_jp
PRO
0
56
Tech Blogを書きやすい環境づくり
lycorptech_jp
PRO
1
230
Arakawa 101 Or How To Build a Data App by Python
lycorptech_jp
PRO
0
18
ドメイン駆動設計の実践により事業の成長スピードと保守性を両立するショッピングクーポン
lycorptech_jp
PRO
17
3.6k
LINEスキマニにおけるフロントエンド開発
lycorptech_jp
PRO
1
1.4k
LINE Developersプロダクト(LIFF/LINE Login)におけるフロントエンド開発
lycorptech_jp
PRO
0
810
AI時代のデータセンターネットワーク
lycorptech_jp
PRO
1
530
連合学習を用いたスタンプの推薦
lycorptech_jp
PRO
2
79
Other Decks in Technology
See All in Technology
AndroidXR 開発ツールごとの できることできないこと
donabe3
0
120
PL900試験から学ぶ Power Platform 基礎知識講座
kumikeyy
0
120
組織貢献をするフリーランスエンジニアという生き方
n_takehata
1
1.2k
トラシューアニマルになろう ~開発者だからこそできる、安定したサービス作りの秘訣~
jacopen
2
1.8k
君も受託系GISエンジニアにならないか
sudataka
2
410
白金鉱業Meetup Vol.17_あるデータサイエンティストのデータマネジメントとの向き合い方
brainpadpr
4
300
バックエンドエンジニアのためのフロントエンド入門 #devsumiC
panda_program
16
7k
レビューを増やしつつ 高評価維持するテクニック
tsuzuki817
1
480
現場で役立つAPIデザイン
nagix
32
11k
Datadogとともにオブザーバビリティを布教しよう
mego2221
0
130
データ資産をシームレスに伝達するためのイベント駆動型アーキテクチャ
kakehashi
PRO
2
470
サーバーレスアーキテクチャと生成AIの融合 / Serverless Meets Generative AI
_kensh
12
3.1k
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
Optimizing for Happiness
mojombo
376
70k
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
Bash Introduction
62gerente
610
210k
Become a Pro
speakerdeck
PRO
26
5.1k
Building an army of robots
kneath
302
45k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Faster Mobile Websites
deanohume
306
31k
A Modern Web Designer's Workflow
chriscoyier
693
190k
For a Future-Friendly Web
brad_frost
176
9.5k
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