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

by yamashooooo

Slide 1

Slide 1 text

Ϣʔβʔ਺ 1500ສਓͷαʔϏεʹ NuxtΛಋೖͯ͠خ͔ͬͨ͜͠ͱ Roppongi.vue #3

Slide 2

Slide 2 text

ࣗݾ঺հ • Name: Shota Yamamoto • Twitter: @yamam00s • Company: גࣜձࣾmedibaʢ2019/10 ೖࣾʣ • Team: auύʔτφʔຊ෦ auαʔϏε։ൃ෦   ϑϩϯτΤϯυ։ൃάϧʔϓ

Slide 3

Slide 3 text

ॳొஃͰ͢ 🙇

Slide 4

Slide 4 text

ձࣾʹ͍ͭͯ גࣜձࣾmediba ۀ຿಺༰   KDDI גࣜձࣾͷ auεϚʔτύεΛத৺ͱͨ͠auؔ࿈αʔϏε ӡӦͷଞɺ෯޿͍෼໺ͰαʔϏεΛల։͠ɺϢʔβʔ͕Πϯ λʔωοτΛ௨ͯ͡ඞཁͳ࣌ʹඞཁͳ৘ใʹΞΫηεͰ͖Δ؀ ڥͮ͘ΓͷͨΊͷαʔϏεΛఏڙ͍ͯ͠·͢ɻ

Slide 5

Slide 5 text

औΓѻ͍ͬͯΔauؔ࿈αʔϏε • auεϚʔτύε • au Webϙʔλϧ • ϙΠϯτஷΊΔ • auήʔϜ • au઎͍

Slide 6

Slide 6 text

औΓѻ͍ͬͯΔauؔ࿈αʔϏε • auεϚʔτύε • au Webϙʔλϧ • ϙΠϯτஷΊΔ • auήʔϜ • au઎͍ Ὅ ࠓ೔࿩͢αʔϏε

Slide 7

Slide 7 text

ࠓ೔࿩͢͜ͱ • NuxtಋೖͰخ͔ͬͨ͜͠ͱ • ಋೖͨ͠ϓϩδΣΫτͷ࿩ • σβΠφʔͱͷ࿈ܞ • όοΫΤϯυͱͷ࿈ܞ • νʔϜ಺Ͱͷ࿈ܞ

Slide 8

Slide 8 text

ಋೖʹ͍ͭͯ

Slide 9

Slide 9 text

ݱঢ়ͷεϚʔτύεͷ؀ڥ

Slide 10

Slide 10 text

Smarty + jQuery

Slide 11

Slide 11 text

UXσβΠϯʹྗΛೖΕ͍ͯΔ

Slide 12

Slide 12 text

ϢʔβʔϏϦςΟςετΛ࣮ࢪ͠   ࣮ࡍʹମݧͨ͠ϢʔβʔͷҙݟΛ൓ө   ὎ ϢʔβʔϑΝʔετͳUXΛ࣮ݱ

Slide 13

Slide 13 text

ݱঢ়ͷ؀ڥʹ͓͚Δ໰୊఺ • PHPϑϨʔϜϫʔΫͷςϯϓϨʔτΤϯδϯ   ὎ ϑϩϯτͱαʔόʔαΠυ͕ີ݁߹   αʔόʔαΠυ͸อकੜΛॏࢹ͍ͨ͠   ϑϩϯτ໘Ͱ͸͓٬༷ͷ੠Λ൓өͤ͞ɺεϐʔυײΛ ग़͍͕ͨ͠ɺͲ͏ͯ͠΋ϦϦʔεͷෑډ͕ߴ͘ͳΔ • JavaScript͔Βಈతͳग़͠Θ͚Λߦ͏ϖʔδ͕ଟ͘ɺ DOMૢ࡞͕ਏ͍ʢ2000ߦmain.jsʣ

Slide 14

Slide 14 text

Slide 15

Slide 15 text

NuxtΛಋೖͯ͠خ͍͜͠ͱ • αʔόʔαΠυ͸APIͷΈΛఏڙ   ὎ ૄ݁߹ͳ։ൃʹΑΓɺอकੑͷߴ͍αʔόʔαΠυͱ   εϐʔυײͷग़Δϑϩϯτ໘ͱ͍͏ӡ༻͕Մೳʹ • υΩϡϝϯτ͕༏͘͠ɺϓϩδΣΫτϝϯόʔ͕֤ʑ͋Δఔ౓ ࢖༻ܦݧ͕͋Δ • ࣾ಺ͷผϓϩδΣΫτ͕React   ὎ εϚʔτύεͰ͸VueΛ࢖ͬͯձࣾશମͷ஌ݟΛߴΊΔ͜ͱ ͕Ͱ͖Δ

Slide 16

Slide 16 text

× ʹ

Slide 17

Slide 17 text

ಋೖܾఆ 🎉

Slide 18

Slide 18 text

σβΠφʔͱͷ࿈ܞʹ͍ͭͯ   خ͔ͬͨ͜͠ͱ

Slide 19

Slide 19 text

ίϯϙʔωϯτΛҙࣝͨ͠   σβΠϯγεςϜʹ

Slide 20

Slide 20 text

὎ ×

Slide 21

Slide 21 text

Atomic Design͸ղऍ΍   ೝࣝ߹Θ͕ͤ೉͍͠

Slide 22

Slide 22 text

Sketch × Atomic DesignͰ   خ͍͜͠ͱ • SketchͷSymbol === Atomsͱ͍͏ڞ௨ೝࣝ   σβΠϯଆͰ΋Atomic DesignΛҙࣝ   ὎ σβΠφʔͱͷ৘ใڞ༗͕ԁ׈ʹɺUIͷ૊ Έཱ͕ͯεϜʔζʹ

Slide 23

Slide 23 text

خ͍͠ ☺

Slide 24

Slide 24 text

BEͱͷ࿈ܞʹ͍ͭͯ   خ͔ͬͨ͜͠ͱ

Slide 25

Slide 25 text

ϑϩϯτͱAPI   ಉ࣌ʹ։ൃελʔτ

Slide 26

Slide 26 text

໰୊఺ • API͕·ͩͳ͍ͷͰFE֤ʑ͕   static/stubʹjsonΛ࡞ͬͯ࡞ۀ   ὎ ೔ʑมߋ΍ߋ৽΋Ͱ͖ͯͯਏ͍ • BEͱͷ࿈ܞ΍৘ใڞ༗ʹ࣌ؒΛׂ͔ΕΔ

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

Swaggerͱ͸ • RESTful APIΛߏங͢ΔͨΊͷOpenAPIͱ͍͏   ϑΥʔϚοτͷΦʔϓϯιʔεϑϨʔϜϫʔΫ   ὎ YAML΍JSONͰεΩʔϚΛGit؅ཧͰ͖Δ • Լهπʔϧηοτ͕࢖͑Δ   ɾSwagger Editor   ɾSwagger UI   ɾSwagger Codegen

Slide 29

Slide 29 text

Swaggerͱ͸ • RESTful APIΛߏங͢ΔͨΊͷOpenAPIͱ͍͏   ϑΥʔϚοτͷΦʔϓϯιʔεϑϨʔϜϫʔΫ   ὎ YAML΍JSONͰεΩʔϚΛGit؅ཧͰ͖Δ • Լهπʔϧηοτ͕࢖͑Δ   ɾSwagger Editor   ɾSwagger UI   ɾSwagger Codegen Ὅ υΩϡϝϯτΛHTMLܗࣜͰࣗಈੜ੒͢Δ

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

SwaggerͰخ͍͜͠ͱ • SwaggerUIΛ࢖༻ͯ͠ͷ   ݱঢ়ͷιʔε͔ΒυΩϡϝϯτΛڞ༗ • YAML΍JSONͰεΩʔϚΛهड़Ͱ͖Δ   ὎ ϑϩϯτΤϯυ͔ΒPRΛग़͢ෑډ͕Լ͕Γ   stubσʔλ΋εΩʔϚΛࢀߟʹ࡞ΕΔ

Slide 33

Slide 33 text

خ͍͠ ☺

Slide 34

Slide 34 text

νʔϜ಺Ͱͷ࿈ܞʹ͍ͭͯ

Slide 35

Slide 35 text

FEෳ਺ਓͷ   େن໛ͳϓϩδΣΫτ

Slide 36

Slide 36 text

ίϯϙʔωϯτ࡞੒࣌ͷ Atomic Designͷղऍͷҧ͍

Slide 37

Slide 37 text

ίϯϙʔωϯτͷϧʔϧ ࠶ར༻ੑ TUPSFͷࢀর ίϯϙʔωϯτ ؒͷNBSHJO "UPNT ˓ ✕ ✕ .PMFDVMFT ˓ ✕ ✕ 0SHBOJTNT ✕ ✕ ˓ 1BHFT ✕ ˓ ˓

Slide 38

Slide 38 text

େن໛ͳ։ൃʹΑΔ   ίʔυͷ҆શੑ

Slide 39

Slide 39 text

Nuxt × TypeScript

Slide 40

Slide 40 text

ಋೖͷ͖͔͚ͬ • FEෳ਺ਓମ੍ͷن໛ͷେ͖͍ϓϩδΣΫτͰ ͋ΓɺܕγεςϜͷԸܙΛಘΔ͜ͱ͕Ͱ͖ͦ ͏ͩͱࢥͬͨ • ಋೖΤϯτϦ౳΍ੈؒͷྲྀΕʹ৮ൃ͞Εͯ   ὎ ͱΓ͋͑ͣؤுͬͯࢼͯ͠Έͯɺ͍Βͳ͍ ͳͱࢥͬͨΒؤுͬͯ֎ͦ͏

Slide 41

Slide 41 text

ಋೖʹ͋ͨͬͯͷ໰୊఺ • ੩తܕ෇͚ݴޠͷܦݧऀ͕ϓϩδΣΫτʹ͍ ͳ͍ • ։ൃεϐʔυ͸΋ͪΖΜԼ͕Δ

Slide 42

Slide 42 text

ղܾࡦ • anyΛڐ༰͠։ൃΛਐΊ͍ͯ͘   ὎ ͱΓ͋͑ͣং൫͸ΤϥʔΛѲΓͭͿ͠ɺ   ஌͕͍͖͔ࣝͭͯͯΒΑΓݫ֨ʹ͍ͯ͘͠

Slide 43

Slide 43 text

TypeScriptͰخ͔ͬͨ͜͠ͱ • anyڐ༰Ͱ΋JavaScriptΑΓݫ֨ • ७ਮʹٕज़త஌ݟ͕͕͋Δ • ίʔυͷՄಡੑͷ্ঢ • εϐʔυ͕ܶతʹམͪΔ͜ͱ΋ͳ͍

Slide 44

Slide 44 text

ΈΜͳخ͍͠ ☺

Slide 45

Slide 45 text

·ͱΊ

Slide 46

Slide 46 text

Nuxtͷ͓͔͛ͰεϚʔτύε ӡ༻ͷະདྷ͸໌Δ͍ʂ

Slide 47

Slide 47 text

࠷ޙʹ medibaͰ͸ڞʹಇ͘ΤϯδχΞΛ   ืू͍ͯ͠·͢ ͓଴͓ͪͯ͠Γ·͢ʂʂʂʂ

Slide 48

Slide 48 text

͋Γ͕ͱ͏͍͟͝·ͨ͠ 🙇