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
790
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)
Apache Iceberg Case Study in LY Corporation
lycorptech_jp
PRO
0
130
LINE NEWSにおけるバックエンド開発
lycorptech_jp
PRO
0
59
ディスプレイ広告(Yahoo!広告・LINE広告)におけるバックエンド開発
lycorptech_jp
PRO
0
72
LINEギフトにおけるバックエンド開発
lycorptech_jp
PRO
0
110
LINEスキマニのフロントエンド開発にDenoを採用した理由
lycorptech_jp
PRO
0
77
「コード品質向上のテクニック」連載継続の秘訣
lycorptech_jp
PRO
0
63
Tech Blogを書きやすい環境づくり
lycorptech_jp
PRO
1
260
Arakawa 101 Or How To Build a Data App by Python
lycorptech_jp
PRO
0
42
ドメイン駆動設計の実践により事業の成長スピードと保守性を両立するショッピングクーポン
lycorptech_jp
PRO
17
3.7k
Other Decks in Technology
See All in Technology
エンジニアのためのドキュメント力基礎講座〜構造化思考から始めよう〜(2025/02/15jbug広島#15発表資料)
yasuoyasuo
18
7.1k
ESXi で仮想化した ARM 環境で LLM を動作させてみるぞ
unnowataru
0
130
Raycast AI APIを使ってちょっと便利な拡張機能を作ってみた / created-a-handy-extension-using-the-raycast-ai-api
kawamataryo
0
150
エンジニアの育成を支える爆速フィードバック文化
sansantech
PRO
3
1.1k
現場で役立つAPIデザイン
nagix
35
13k
Developers Summit 2025 浅野卓也(13-B-7 LegalOn Technologies)
legalontechnologies
PRO
1
1.3k
Cloud Spanner 導入で実現した快適な開発と運用について
colopl
1
900
脳波を用いた嗜好マッチングシステム
hokkey621
0
170
30分でわかる『アジャイルデータモデリング』
hanon52_
10
2.9k
「正しく」失敗できる チームの作り方 〜リアルな事例から紐解く失敗を恐れない組織とは〜 / A team that can fail correctly
i35_267
1
520
あれは良かった、あれは苦労したB2B2C型SaaSの新規開発におけるCloud Spanner
hirohito1108
2
780
OSS構成管理ツールCMDBuildを使ったAWSリソース管理の自動化
satorufunai
0
360
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
How to train your dragon (web standard)
notwaldorf
91
5.8k
How STYLIGHT went responsive
nonsquared
98
5.4k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
Writing Fast Ruby
sferik
628
61k
Music & Morning Musume
bryan
46
6.4k
Visualization
eitanlees
146
15k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.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