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
820
【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
860
【mediba #developers_community】フロントエンドの フレームワーク事情2022
yamam00s
0
87
【コネヒトマルシェオンライン】Vue3触ってみた
yamam00s
0
290
【BIT VALLEY -INSIDE- Vol.17】自作キーボード入門した話
yamam00s
0
1.1k
Other Decks in Programming
See All in Programming
自分ひとりから始められる生産性向上の取り組み #でぃーぷらすオオサカ
irof
8
2.2k
最近のVS Codeで気になるニュース 2025/01
74th
1
240
ESLintプラグインを使用してCDKのセオリーを適用する
yamanashi_ren01
2
380
Запуск 1С:УХ в крупном энтерпрайзе: мечта и реальность ПМа
lamodatech
0
990
混沌とした例外処理とエラー監視に秩序をもたらす
morihirok
18
3.3k
ASP. NET CoreにおけるWebAPIの最新情報
tomokusaba
0
200
知られざるDMMデータエンジニアの生態 〜かつてツチノコと呼ばれし者〜
takaha4k
3
1.1k
BEエンジニアがFEの業務をできるようになるまでにやったこと
yoshida_ryushin
0
260
[JAWS-UG横浜 #79] re:Invent 2024 の DB アップデートは Multi-Region!
maroon1st
0
130
Simple組み合わせ村から大都会Railsにやってきた俺は / Coming to Rails from the Simple
moznion
3
3.7k
AWS re:Invent 2024個人的まとめ
satoshi256kbyte
0
150
ファインディの テックブログ爆誕までの軌跡
starfish719
1
780
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
It's Worth the Effort
3n
184
28k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Building Adaptive Systems
keathley
39
2.4k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.4k
Faster Mobile Websites
deanohume
305
30k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Building Applications with DynamoDB
mza
93
6.2k
Building Your Own Lightsaber
phodgson
104
6.2k
Being A Developer After 40
akosma
89
590k
Typedesign – Prime Four
hannesfritz
40
2.5k
YesSQL, Process and Tooling at Scale
rocio
171
14k
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Ͱڞʹಇ͘ΤϯδχΞΛ ืू͍ͯ͠·͢ ͓͓ͪͯ͠Γ·͢ʂʂʂʂ
͋Γ͕ͱ͏͍͟͝·ͨ͠ 🙇