【Roppongi.vue #3】ユーザー数1500万人のサービスにNuxtを導入して嬉しかったこと

2019/10/21 roppongi.vue

Transcript

1. Ϣʔβʔ਺ 1500ສਓͷαʔϏεʹ NuxtΛಋೖͯ͠خ͔ͬͨ͜͠ͱ Roppongi.vue #3
2. ࣗݾ঺հ • Name: Shota Yamamoto • Twitter: @yamam00s • Company: גࣜձࣾmedibaʢ2019/10 ೖࣾʣ • Team: auύʔτφʔຊ෦ auαʔϏε։ൃ෦ 
 ϑϩϯτΤϯυ։ൃάϧʔϓ
3. ॳొஃͰ͢ 🙇
4. ձࣾʹ͍ͭͯ גࣜձࣾmediba ۀ຿಺༰ 
 KDDI גࣜձࣾͷ auεϚʔτύεΛத৺ͱͨ͠auؔ࿈αʔϏε ӡӦͷଞɺ෯޿͍෼໺ͰαʔϏεΛల։͠ɺϢʔβʔ͕Πϯ λʔωοτΛ௨ͯ͡ඞཁͳ࣌ʹඞཁͳ৘ใʹΞΫηεͰ͖Δ؀ ڥͮ͘ΓͷͨΊͷαʔϏεΛఏڙ͍ͯ͠·͢ɻ
5. औΓѻ͍ͬͯΔauؔ࿈αʔϏε • auεϚʔτύε • au Webϙʔλϧ • ϙΠϯτஷΊΔ • auήʔϜ • au઎͍
6. औΓѻ͍ͬͯΔauؔ࿈αʔϏε • auεϚʔτύε • au Webϙʔλϧ • ϙΠϯτஷΊΔ • auήʔϜ • au઎͍ Ὅ ࠓ೔࿩͢αʔϏε
7. ࠓ೔࿩͢͜ͱ • NuxtಋೖͰخ͔ͬͨ͜͠ͱ • ಋೖͨ͠ϓϩδΣΫτͷ࿩ • σβΠφʔͱͷ࿈ܞ • όοΫΤϯυͱͷ࿈ܞ • νʔϜ಺Ͱͷ࿈ܞ
8. ಋೖʹ͍ͭͯ
9. ݱঢ়ͷεϚʔτύεͷ؀ڥ
10. Smarty + jQuery
11. UXσβΠϯʹྗΛೖΕ͍ͯΔ
12. ϢʔβʔϏϦςΟςετΛ࣮ࢪ͠ 
 ࣮ࡍʹମݧͨ͠ϢʔβʔͷҙݟΛ൓ө 
 ὎ ϢʔβʔϑΝʔετͳUXΛ࣮ݱ
13. ݱঢ়ͷ؀ڥʹ͓͚Δ໰୊఺ • PHPϑϨʔϜϫʔΫͷςϯϓϨʔτΤϯδϯ 
 ὎ ϑϩϯτͱαʔόʔαΠυ͕ີ݁߹ 
 αʔόʔαΠυ͸อकੜΛॏࢹ͍ͨ͠ 
 ϑϩϯτ໘Ͱ͸͓٬༷ͷ੠Λ൓өͤ͞ɺεϐʔυײΛ ग़͍͕ͨ͠ɺͲ͏ͯ͠΋ϦϦʔεͷෑډ͕ߴ͘ͳΔ • JavaScript͔Βಈతͳग़͠Θ͚Λߦ͏ϖʔδ͕ଟ͘ɺ DOMૢ࡞͕ਏ͍ʢ2000ߦmain.jsʣ
14. ×
15. NuxtΛಋೖͯ͠خ͍͜͠ͱ • αʔόʔαΠυ͸APIͷΈΛఏڙ 
 ὎ ૄ݁߹ͳ։ൃʹΑΓɺอकੑͷߴ͍αʔόʔαΠυͱ 
 εϐʔυײͷग़Δϑϩϯτ໘ͱ͍͏ӡ༻͕Մೳʹ • υΩϡϝϯτ͕༏͘͠ɺϓϩδΣΫτϝϯόʔ͕֤ʑ͋Δఔ౓ ࢖༻ܦݧ͕͋Δ • ࣾ಺ͷผϓϩδΣΫτ͕React 
 ὎ εϚʔτύεͰ͸VueΛ࢖ͬͯձࣾશମͷ஌ݟΛߴΊΔ͜ͱ ͕Ͱ͖Δ
16. × ʹ
17. ಋೖܾఆ 🎉
18. σβΠφʔͱͷ࿈ܞʹ͍ͭͯ 
 خ͔ͬͨ͜͠ͱ
19. ίϯϙʔωϯτΛҙࣝͨ͠ 
 σβΠϯγεςϜʹ
20. ὎ ×
21. Atomic Design͸ղऍ΍ 
 ೝࣝ߹Θ͕ͤ೉͍͠
22. Sketch × Atomic DesignͰ 
 خ͍͜͠ͱ • SketchͷSymbol === Atomsͱ͍͏ڞ௨ೝࣝ 
 σβΠϯଆͰ΋Atomic DesignΛҙࣝ 
 ὎ σβΠφʔͱͷ৘ใڞ༗͕ԁ׈ʹɺUIͷ૊ Έཱ͕ͯεϜʔζʹ
23. خ͍͠ ☺
24. BEͱͷ࿈ܞʹ͍ͭͯ 
 خ͔ͬͨ͜͠ͱ
25. ϑϩϯτͱAPI 
 ಉ࣌ʹ։ൃελʔτ
26. ໰୊఺ • API͕·ͩͳ͍ͷͰFE֤ʑ͕ 
 static/stubʹjsonΛ࡞ͬͯ࡞ۀ 
 ὎ ೔ʑมߋ΍ߋ৽΋Ͱ͖ͯͯਏ͍ • BEͱͷ࿈ܞ΍৘ใڞ༗ʹ࣌ؒΛׂ͔ΕΔ
28. Swaggerͱ͸ • RESTful APIΛߏங͢ΔͨΊͷOpenAPIͱ͍͏ 
 ϑΥʔϚοτͷΦʔϓϯιʔεϑϨʔϜϫʔΫ 
 ὎ YAML΍JSONͰεΩʔϚΛGit؅ཧͰ͖Δ • Լهπʔϧηοτ͕࢖͑Δ 
 ɾSwagger Editor 
 ɾSwagger UI 
 ɾSwagger Codegen
29. Swaggerͱ͸ • RESTful APIΛߏங͢ΔͨΊͷOpenAPIͱ͍͏ 
 ϑΥʔϚοτͷΦʔϓϯιʔεϑϨʔϜϫʔΫ 
 ὎ YAML΍JSONͰεΩʔϚΛGit؅ཧͰ͖Δ • Լهπʔϧηοτ͕࢖͑Δ 
 ɾSwagger Editor 
 ɾSwagger UI 
 ɾSwagger Codegen Ὅ υΩϡϝϯτΛHTMLܗࣜͰࣗಈੜ੒͢Δ
32. SwaggerͰخ͍͜͠ͱ • SwaggerUIΛ࢖༻ͯ͠ͷ 
 ݱঢ়ͷιʔε͔ΒυΩϡϝϯτΛڞ༗ • YAML΍JSONͰεΩʔϚΛهड़Ͱ͖Δ 
 ὎ ϑϩϯτΤϯυ͔ΒPRΛग़͢ෑډ͕Լ͕Γ 
 stubσʔλ΋εΩʔϚΛࢀߟʹ࡞ΕΔ
33. خ͍͠ ☺
34. νʔϜ಺Ͱͷ࿈ܞʹ͍ͭͯ
35. FEෳ਺ਓͷ 
 େن໛ͳϓϩδΣΫτ
36. ίϯϙʔωϯτ࡞੒࣌ͷ Atomic Designͷղऍͷҧ͍
37. ίϯϙʔωϯτͷϧʔϧ ࠶ར༻ੑ TUPSFͷࢀর ίϯϙʔωϯτ ؒͷNBSHJO "UPNT ˓ ✕ ✕ .PMFDVMFT ˓ ✕ ✕ 0SHBOJTNT ✕ ✕ ˓ 1BHFT ✕ ˓ ˓
38. େن໛ͳ։ൃʹΑΔ 
 ίʔυͷ҆શੑ
39. Nuxt × TypeScript
40. ಋೖͷ͖͔͚ͬ • FEෳ਺ਓମ੍ͷن໛ͷେ͖͍ϓϩδΣΫτͰ ͋ΓɺܕγεςϜͷԸܙΛಘΔ͜ͱ͕Ͱ͖ͦ ͏ͩͱࢥͬͨ • ಋೖΤϯτϦ౳΍ੈؒͷྲྀΕʹ৮ൃ͞Εͯ 
 ὎ ͱΓ͋͑ͣؤுͬͯࢼͯ͠Έͯɺ͍Βͳ͍ ͳͱࢥͬͨΒؤுͬͯ֎ͦ͏
41. ಋೖʹ͋ͨͬͯͷ໰୊఺ • ੩తܕ෇͚ݴޠͷܦݧऀ͕ϓϩδΣΫτʹ͍ ͳ͍ • ։ൃεϐʔυ͸΋ͪΖΜԼ͕Δ
42. ղܾࡦ • anyΛڐ༰͠։ൃΛਐΊ͍ͯ͘ 
 ὎ ͱΓ͋͑ͣং൫͸ΤϥʔΛѲΓͭͿ͠ɺ 
 ஌͕͍͖͔ࣝͭͯͯΒΑΓݫ֨ʹ͍ͯ͘͠
43. TypeScriptͰخ͔ͬͨ͜͠ͱ • anyڐ༰Ͱ΋JavaScriptΑΓݫ֨ • ७ਮʹٕज़త஌ݟ͕͕͋Δ • ίʔυͷՄಡੑͷ্ঢ • εϐʔυ͕ܶతʹམͪΔ͜ͱ΋ͳ͍
44. ΈΜͳخ͍͠ ☺
45. ·ͱΊ
46. Nuxtͷ͓͔͛ͰεϚʔτύε ӡ༻ͷະདྷ͸໌Δ͍ʂ
47. ࠷ޙʹ medibaͰ͸ڞʹಇ͘ΤϯδχΞΛ 
 ืू͍ͯ͠·͢ ͓଴͓ͪͯ͠Γ·͢ʂʂʂʂ
48. ͋Γ͕ͱ͏͍͟͝·ͨ͠ 🙇