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
960
【mediba #developers_community】フロントエンドの フレームワーク事情2022
yamam00s
0
98
【コネヒトマルシェオンライン】Vue3触ってみた
yamam00s
0
300
【BIT VALLEY -INSIDE- Vol.17】自作キーボード入門した話
yamam00s
0
1.2k
Other Decks in Programming
See All in Programming
関数型まつり2025登壇資料「関数プログラミングと再帰」
taisontsukada
2
850
エンジニア向け採用ピッチ資料
inusan
0
170
ReadMoreTextView
fornewid
1
480
ふつうの技術スタックでアート作品を作ってみる
akira888
0
170
型付きアクターモデルがもたらす分散シミュレーションの未来
piyo7
0
810
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
260
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
660
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
47
31k
Result型で“失敗”を型にするPHPコードの書き方
kajitack
4
510
エラーって何種類あるの?
kajitack
5
320
WindowInsetsだってテストしたい
ryunen344
1
200
Select API from Kotlin Coroutine
jmatsu
1
190
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Thoughts on Productivity
jonyablonski
69
4.7k
Raft: Consensus for Rubyists
vanstee
140
7k
VelocityConf: Rendering Performance Case Studies
addyosmani
331
24k
How STYLIGHT went responsive
nonsquared
100
5.6k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.3k
KATA
mclloyd
30
14k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
Become a Pro
speakerdeck
PRO
28
5.4k
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Ͱڞʹಇ͘ΤϯδχΞΛ ืू͍ͯ͠·͢ ͓͓ͪͯ͠Γ·͢ʂʂʂʂ
͋Γ͕ͱ͏͍͟͝·ͨ͠ 🙇