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
850
【mediba #developers_community】フロントエンドの フレームワーク事情2022
yamam00s
0
85
【コネヒトマルシェオンライン】Vue3触ってみた
yamam00s
0
290
【BIT VALLEY -INSIDE- Vol.17】自作キーボード入門した話
yamam00s
0
1.1k
Other Decks in Programming
See All in Programming
ESLintプラグインを使用してCDKのセオリーを適用する
yamanashi_ren01
2
250
ISUCON14感想戦で85万点まで頑張ってみた
ponyo877
1
610
return文におけるstd::moveについて
onihusube
1
1.4k
“あなた” の開発を支援する AI エージェント Bedrock Engineer / introducing-bedrock-engineer
gawa
7
560
どうして手を動かすよりもチーム内のコードレビューを優先するべきなのか
okashoi
3
890
オニオンアーキテクチャを使って、 Unityと.NETでコードを共有する
soi013
0
370
ドメインイベント増えすぎ問題
h0r15h0
2
570
traP の部内 ISUCON とそれを支えるポータル / PISCON Portal
ikura_hamu
0
190
asdf-ecspresso作って 友達が増えた話 / Fujiwara Tech Conference 2025
koluku
0
1.4k
CNCF Project の作者が考えている OSS の運営
utam0k
1
130
HTML/CSS超絶浅い説明
yuki0329
0
190
「とりあえず動く」コードはよい、「読みやすい」コードはもっとよい / Code that 'just works' is good, but code that is 'readable' is even better.
mkmk884
6
1.4k
Featured
See All Featured
How GitHub (no longer) Works
holman
312
140k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Raft: Consensus for Rubyists
vanstee
137
6.7k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
28
4.5k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
127
18k
Building Your Own Lightsaber
phodgson
104
6.2k
The Cult of Friendly URLs
andyhume
78
6.1k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
39
1.9k
Done Done
chrislema
182
16k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
KATA
mclloyd
29
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Ͱڞʹಇ͘ΤϯδχΞΛ ืू͍ͯ͠·͢ ͓͓ͪͯ͠Γ·͢ʂʂʂʂ
͋Γ͕ͱ͏͍͟͝·ͨ͠ 🙇