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
770
【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
640
【mediba #developers_community】フロントエンドの フレームワーク事情2022
yamam00s
0
65
【コネヒトマルシェオンライン】Vue3触ってみた
yamam00s
0
270
【BIT VALLEY -INSIDE- Vol.17】自作キーボード入門した話
yamam00s
0
1.1k
Other Decks in Programming
See All in Programming
AWSでゲームサーバーを運用! Amazon GameLiftのお話
iriikeita
0
200
SRE チーム立ち上げ前に考えたこと・取り組んだこと / Considerations and Preparations Before Establishing an SRE Team
mackey0225
3
320
CSC307 Lecture 05
javiergs
PRO
0
210
英語
s_shimotori
1
220
The rollercoaster of releasing an Android, iOS, and macOS app with Kotlin Multiplatform | droidcon Berlin
prof18
0
110
はしめてのプログラミングとロボット制御
watawatavoltage
0
290
Ruby メモリ管理 プログラミング
megmogmog1965
0
130
Trial
cairolibrary720
1
130
【Go言語】golangci-lintの使い方
tomo1227
0
270
「2024年版 Kotlin サーバーサイドプログラミング実践開発」の補講 〜O/Rマッパー編〜
n_takehata
2
260
Folding Cheat Sheet #7
philipschwarz
PRO
0
150
CSC307 Lecture 10
javiergs
PRO
0
310
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
64
5.2k
Rails Girls Zürich Keynote
gr2m
93
13k
Optimizing for Happiness
mojombo
373
69k
Ruby is Unlike a Banana
tanoku
96
10k
Atom: Resistance is Futile
akmur
261
25k
StorybookのUI Testing Handbookを読んだ
zakiyama
15
4.9k
Code Reviewing Like a Champion
maltzj
517
39k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
20
7.2k
Fireside Chat
paigeccino
25
2.8k
We Have a Design System, Now What?
morganepeng
46
7k
Why Our Code Smells
bkeepers
PRO
332
56k
Art, The Web, and Tiny UX
lynnandtonic
291
20k
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Ͱڞʹಇ͘ΤϯδχΞΛ ืू͍ͯ͠·͢ ͓͓ͪͯ͠Γ·͢ʂʂʂʂ
͋Γ͕ͱ͏͍͟͝·ͨ͠ 🙇