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
【Roppongi.vue #3】ユーザー数1500万人のサービスにNuxtを導入して嬉しかったこと
Search
yamashooooo
October 21, 2019
Programming
1
850
【Roppongi.vue #3】ユーザー数1500万人のサービスにNuxtを導入して嬉しかったこと
2019/10/21 roppongi.vue
yamashooooo
October 21, 2019
Tweet
Share
More Decks by yamashooooo
See All by yamashooooo
【PIXIV MEETUP 2023】ピクシブ決済基盤のフロントエンドを改善していく話
yamam00s
0
970
【mediba #developers_community】フロントエンドの フレームワーク事情2022
yamam00s
0
99
【コネヒトマルシェオンライン】Vue3触ってみた
yamam00s
0
300
【BIT VALLEY -INSIDE- Vol.17】自作キーボード入門した話
yamam00s
0
1.2k
Other Decks in Programming
See All in Programming
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
2
10k
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
160
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
11k
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
760
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
160
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
190
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
120
5つのアンチパターンから学ぶLT設計
narihara
1
170
Discover Metal 4
rei315
2
140
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
220
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
320
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
560
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Navigating Team Friction
lara
187
15k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
970
How STYLIGHT went responsive
nonsquared
100
5.6k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
960
Git: the NoSQL Database
bkeepers
PRO
430
65k
Practical Orchestrator
shlominoach
189
11k
Transcript
Ϣʔβʔ 1500ສਓͷαʔϏεʹ NuxtΛಋೖͯ͠خ͔ͬͨ͜͠ͱ Roppongi.vue #3
ࣗݾհ • Name: Shota Yamamoto • Twitter: @yamam00s • Company:
גࣜձࣾmedibaʢ2019/10 ೖࣾʣ • Team: auύʔτφʔຊ෦ auαʔϏε։ൃ෦ ϑϩϯτΤϯυ։ൃάϧʔϓ
ॳొஃͰ͢ 🙇
ձࣾʹ͍ͭͯ גࣜձࣾmediba ۀ༰ KDDI גࣜձࣾͷ auεϚʔτύεΛத৺ͱͨ͠auؔ࿈αʔϏε ӡӦͷଞɺ෯͍ͰαʔϏεΛల։͠ɺϢʔβʔ͕Πϯ λʔωοτΛ௨ͯ͡ඞཁͳ࣌ʹඞཁͳใʹΞΫηεͰ͖Δ ڥͮ͘ΓͷͨΊͷαʔϏεΛఏڙ͍ͯ͠·͢ɻ
औΓѻ͍ͬͯΔauؔ࿈αʔϏε • auεϚʔτύε • au Webϙʔλϧ • ϙΠϯτஷΊΔ • auήʔϜ
• au͍
औΓѻ͍ͬͯΔauؔ࿈αʔϏε • auεϚʔτύε • au Webϙʔλϧ • ϙΠϯτஷΊΔ • auήʔϜ
• au͍ Ὅ ࠓ͢αʔϏε
ࠓ͢͜ͱ • NuxtಋೖͰخ͔ͬͨ͜͠ͱ • ಋೖͨ͠ϓϩδΣΫτͷ • σβΠφʔͱͷ࿈ܞ • όοΫΤϯυͱͷ࿈ܞ •
νʔϜͰͷ࿈ܞ
ಋೖʹ͍ͭͯ
ݱঢ়ͷεϚʔτύεͷڥ
Smarty + jQuery
UXσβΠϯʹྗΛೖΕ͍ͯΔ
ϢʔβʔϏϦςΟςετΛ࣮ࢪ͠ ࣮ࡍʹମݧͨ͠ϢʔβʔͷҙݟΛө ϢʔβʔϑΝʔετͳUXΛ࣮ݱ
ݱঢ়ͷڥʹ͓͚Δ • PHPϑϨʔϜϫʔΫͷςϯϓϨʔτΤϯδϯ ϑϩϯτͱαʔόʔαΠυ͕ີ݁߹ αʔόʔαΠυอकੜΛॏࢹ͍ͨ͠ ϑϩϯτ໘Ͱ͓٬༷ͷΛөͤ͞ɺεϐʔυײΛ
ग़͍͕ͨ͠ɺͲ͏ͯ͠ϦϦʔεͷෑډ͕ߴ͘ͳΔ • JavaScript͔Βಈతͳग़͠Θ͚Λߦ͏ϖʔδ͕ଟ͘ɺ DOMૢ࡞͕ਏ͍ʢ2000ߦmain.jsʣ
×
NuxtΛಋೖͯ͠خ͍͜͠ͱ • αʔόʔαΠυAPIͷΈΛఏڙ ૄ݁߹ͳ։ൃʹΑΓɺอकੑͷߴ͍αʔόʔαΠυͱ εϐʔυײͷग़Δϑϩϯτ໘ͱ͍͏ӡ༻͕Մೳʹ • υΩϡϝϯτ͕༏͘͠ɺϓϩδΣΫτϝϯόʔ͕֤ʑ͋Δఔ
༻ܦݧ͕͋Δ • ࣾͷผϓϩδΣΫτ͕React εϚʔτύεͰVueΛͬͯձࣾશମͷݟΛߴΊΔ͜ͱ ͕Ͱ͖Δ
× ʹ
ಋೖܾఆ 🎉
σβΠφʔͱͷ࿈ܞʹ͍ͭͯ خ͔ͬͨ͜͠ͱ
ίϯϙʔωϯτΛҙࣝͨ͠ σβΠϯγεςϜʹ
×
Atomic Designղऍ ೝࣝ߹Θ͕͍ͤ͠
Sketch × Atomic DesignͰ خ͍͜͠ͱ • SketchͷSymbol === Atomsͱ͍͏ڞ௨ೝࣝ
σβΠϯଆͰAtomic DesignΛҙࣝ σβΠφʔͱͷใڞ༗͕ԁʹɺUIͷ Έཱ͕ͯεϜʔζʹ
خ͍͠ ☺
BEͱͷ࿈ܞʹ͍ͭͯ خ͔ͬͨ͜͠ͱ
ϑϩϯτͱAPI ಉ࣌ʹ։ൃελʔτ
• API͕·ͩͳ͍ͷͰFE֤ʑ͕ static/stubʹjsonΛ࡞ͬͯ࡞ۀ ʑมߋߋ৽Ͱ͖ͯͯਏ͍ • BEͱͷ࿈ܞใڞ༗ʹ࣌ؒΛׂ͔ΕΔ
None
Swaggerͱ • RESTful APIΛߏங͢ΔͨΊͷOpenAPIͱ͍͏ ϑΥʔϚοτͷΦʔϓϯιʔεϑϨʔϜϫʔΫ YAMLJSONͰεΩʔϚΛGitཧͰ͖Δ •
Լهπʔϧηοτ͕͑Δ ɾSwagger Editor ɾSwagger UI ɾSwagger Codegen
Swaggerͱ • RESTful APIΛߏங͢ΔͨΊͷOpenAPIͱ͍͏ ϑΥʔϚοτͷΦʔϓϯιʔεϑϨʔϜϫʔΫ YAMLJSONͰεΩʔϚΛGitཧͰ͖Δ •
Լهπʔϧηοτ͕͑Δ ɾSwagger Editor ɾSwagger UI ɾSwagger Codegen Ὅ υΩϡϝϯτΛHTMLܗࣜͰࣗಈੜ͢Δ
None
None
SwaggerͰخ͍͜͠ͱ • SwaggerUIΛ༻ͯ͠ͷ ݱঢ়ͷιʔε͔ΒυΩϡϝϯτΛڞ༗ • YAMLJSONͰεΩʔϚΛهड़Ͱ͖Δ ϑϩϯτΤϯυ͔ΒPRΛग़͢ෑډ͕Լ͕Γ
stubσʔλεΩʔϚΛࢀߟʹ࡞ΕΔ
خ͍͠ ☺
νʔϜͰͷ࿈ܞʹ͍ͭͯ
FEෳਓͷ େنͳϓϩδΣΫτ
ίϯϙʔωϯτ࡞࣌ͷ Atomic Designͷղऍͷҧ͍
ίϯϙʔωϯτͷϧʔϧ ࠶ར༻ੑ TUPSFͷࢀর ίϯϙʔωϯτ ؒͷNBSHJO "UPNT ˓ ✕ ✕ .PMFDVMFT
˓ ✕ ✕ 0SHBOJTNT ✕ ✕ ˓ 1BHFT ✕ ˓ ˓
େنͳ։ൃʹΑΔ ίʔυͷ҆શੑ
Nuxt × TypeScript
ಋೖͷ͖͔͚ͬ • FEෳਓମ੍ͷنͷେ͖͍ϓϩδΣΫτͰ ͋ΓɺܕγεςϜͷԸܙΛಘΔ͜ͱ͕Ͱ͖ͦ ͏ͩͱࢥͬͨ • ಋೖΤϯτϦੈؒͷྲྀΕʹ৮ൃ͞Εͯ ͱΓ͋͑ͣؤுͬͯࢼͯ͠Έͯɺ͍Βͳ͍
ͳͱࢥͬͨΒؤுͬͯ֎ͦ͏
ಋೖʹ͋ͨͬͯͷ • ੩తܕ͚ݴޠͷܦݧऀ͕ϓϩδΣΫτʹ͍ ͳ͍ • ։ൃεϐʔυͪΖΜԼ͕Δ
ղܾࡦ • anyΛڐ༰͠։ൃΛਐΊ͍ͯ͘ ͱΓ͋͑ͣং൫ΤϥʔΛѲΓͭͿ͠ɺ ͕͍͖͔ࣝͭͯͯΒΑΓݫ֨ʹ͍ͯ͘͠
TypeScriptͰخ͔ͬͨ͜͠ͱ • anyڐ༰ͰJavaScriptΑΓݫ֨ • ७ਮʹٕज़తݟ͕͕͋Δ • ίʔυͷՄಡੑͷ্ঢ • εϐʔυ͕ܶతʹམͪΔ͜ͱͳ͍
ΈΜͳخ͍͠ ☺
·ͱΊ
Nuxtͷ͓͔͛ͰεϚʔτύε ӡ༻ͷະདྷ໌Δ͍ʂ
࠷ޙʹ medibaͰڞʹಇ͘ΤϯδχΞΛ ืू͍ͯ͠·͢ ͓͓ͪͯ͠Γ·͢ʂʂʂʂ
͋Γ͕ͱ͏͍͟͝·ͨ͠ 🙇