Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

2019/10/21 roppongi.vue

yamashooooo

October 21, 2019
Tweet

More Decks by yamashooooo

Other Decks in Programming

Transcript

  1. Ϣʔβʔ਺


    1500ສਓͷαʔϏεʹ


    NuxtΛಋೖͯ͠خ͔ͬͨ͜͠ͱ
    Roppongi.vue #3

    View full-size slide

  2. ࣗݾ঺հ
    • Name: Shota Yamamoto


    • Twitter: @yamam00s


    • Company: גࣜձࣾmedibaʢ2019/10 ೖࣾʣ


    • Team: auύʔτφʔຊ෦ auαʔϏε։ൃ෦

    ϑϩϯτΤϯυ։ൃάϧʔϓ

    View full-size slide

  3. ॳొஃͰ͢ 🙇

    View full-size slide

  4. ձࣾʹ͍ͭͯ
    גࣜձࣾmediba


    ۀ຿಺༰

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

    View full-size slide

  5. औΓѻ͍ͬͯΔauؔ࿈αʔϏε
    • auεϚʔτύε


    • au Webϙʔλϧ


    • ϙΠϯτஷΊΔ


    • auήʔϜ


    • au઎͍

    View full-size slide

  6. औΓѻ͍ͬͯΔauؔ࿈αʔϏε
    • auεϚʔτύε


    • au Webϙʔλϧ


    • ϙΠϯτஷΊΔ


    • auήʔϜ


    • au઎͍
    Ὅ ࠓ೔࿩͢αʔϏε

    View full-size slide

  7. ࠓ೔࿩͢͜ͱ
    • NuxtಋೖͰخ͔ͬͨ͜͠ͱ


    • ಋೖͨ͠ϓϩδΣΫτͷ࿩


    • σβΠφʔͱͷ࿈ܞ


    • όοΫΤϯυͱͷ࿈ܞ


    • νʔϜ಺Ͱͷ࿈ܞ

    View full-size slide

  8. ಋೖʹ͍ͭͯ

    View full-size slide

  9. ݱঢ়ͷεϚʔτύεͷ؀ڥ

    View full-size slide

  10. Smarty + jQuery

    View full-size slide

  11. UXσβΠϯʹྗΛೖΕ͍ͯΔ

    View full-size slide

  12. ϢʔβʔϏϦςΟςετΛ࣮ࢪ͠

    ࣮ࡍʹମݧͨ͠ϢʔβʔͷҙݟΛ൓ө

    ὎ ϢʔβʔϑΝʔετͳUXΛ࣮ݱ

    View full-size slide

  13. ݱঢ়ͷ؀ڥʹ͓͚Δ໰୊఺
    • PHPϑϨʔϜϫʔΫͷςϯϓϨʔτΤϯδϯ

    ὎ ϑϩϯτͱαʔόʔαΠυ͕ີ݁߹

    αʔόʔαΠυ͸อकੜΛॏࢹ͍ͨ͠

    ϑϩϯτ໘Ͱ͸͓٬༷ͷ੠Λ൓өͤ͞ɺεϐʔυײΛ
    ग़͍͕ͨ͠ɺͲ͏ͯ͠΋ϦϦʔεͷෑډ͕ߴ͘ͳΔ


    • JavaScript͔Βಈతͳग़͠Θ͚Λߦ͏ϖʔδ͕ଟ͘ɺ
    DOMૢ࡞͕ਏ͍ʢ2000ߦmain.jsʣ

    View full-size slide

  14. NuxtΛಋೖͯ͠خ͍͜͠ͱ
    • αʔόʔαΠυ͸APIͷΈΛఏڙ

    ὎ ૄ݁߹ͳ։ൃʹΑΓɺอकੑͷߴ͍αʔόʔαΠυͱ

    εϐʔυײͷग़Δϑϩϯτ໘ͱ͍͏ӡ༻͕Մೳʹ


    • υΩϡϝϯτ͕༏͘͠ɺϓϩδΣΫτϝϯόʔ͕֤ʑ͋Δఔ౓
    ࢖༻ܦݧ͕͋Δ


    • ࣾ಺ͷผϓϩδΣΫτ͕React

    ὎ εϚʔτύεͰ͸VueΛ࢖ͬͯձࣾશମͷ஌ݟΛߴΊΔ͜ͱ
    ͕Ͱ͖Δ

    View full-size slide

  15. ಋೖܾఆ 🎉

    View full-size slide

  16. σβΠφʔͱͷ࿈ܞʹ͍ͭͯ

    خ͔ͬͨ͜͠ͱ

    View full-size slide

  17. ίϯϙʔωϯτΛҙࣝͨ͠

    σβΠϯγεςϜʹ

    View full-size slide

  18. Atomic Design͸ղऍ΍

    ೝࣝ߹Θ͕ͤ೉͍͠

    View full-size slide

  19. Sketch × Atomic DesignͰ

    خ͍͜͠ͱ
    • SketchͷSymbol === Atomsͱ͍͏ڞ௨ೝࣝ

    σβΠϯଆͰ΋Atomic DesignΛҙࣝ

    ὎ σβΠφʔͱͷ৘ใڞ༗͕ԁ׈ʹɺUIͷ૊
    Έཱ͕ͯεϜʔζʹ

    View full-size slide

  20. BEͱͷ࿈ܞʹ͍ͭͯ

    خ͔ͬͨ͜͠ͱ

    View full-size slide

  21. ϑϩϯτͱAPI

    ಉ࣌ʹ։ൃελʔτ

    View full-size slide

  22. ໰୊఺
    • API͕·ͩͳ͍ͷͰFE֤ʑ͕

    static/stubʹjsonΛ࡞ͬͯ࡞ۀ

    ὎ ೔ʑมߋ΍ߋ৽΋Ͱ͖ͯͯਏ͍


    • BEͱͷ࿈ܞ΍৘ใڞ༗ʹ࣌ؒΛׂ͔ΕΔ

    View full-size slide

  23. Swaggerͱ͸
    • RESTful APIΛߏங͢ΔͨΊͷOpenAPIͱ͍͏

    ϑΥʔϚοτͷΦʔϓϯιʔεϑϨʔϜϫʔΫ

    ὎ YAML΍JSONͰεΩʔϚΛGit؅ཧͰ͖Δ


    • Լهπʔϧηοτ͕࢖͑Δ

    ɾSwagger Editor

    ɾSwagger UI

    ɾSwagger Codegen

    View full-size slide

  24. Swaggerͱ͸
    • RESTful APIΛߏங͢ΔͨΊͷOpenAPIͱ͍͏

    ϑΥʔϚοτͷΦʔϓϯιʔεϑϨʔϜϫʔΫ

    ὎ YAML΍JSONͰεΩʔϚΛGit؅ཧͰ͖Δ


    • Լهπʔϧηοτ͕࢖͑Δ

    ɾSwagger Editor

    ɾSwagger UI

    ɾSwagger Codegen
    Ὅ υΩϡϝϯτΛHTMLܗࣜͰࣗಈੜ੒͢Δ

    View full-size slide

  25. SwaggerͰخ͍͜͠ͱ
    • SwaggerUIΛ࢖༻ͯ͠ͷ

    ݱঢ়ͷιʔε͔ΒυΩϡϝϯτΛڞ༗


    • YAML΍JSONͰεΩʔϚΛهड़Ͱ͖Δ

    ὎ ϑϩϯτΤϯυ͔ΒPRΛग़͢ෑډ͕Լ͕Γ

    stubσʔλ΋εΩʔϚΛࢀߟʹ࡞ΕΔ

    View full-size slide

  26. νʔϜ಺Ͱͷ࿈ܞʹ͍ͭͯ

    View full-size slide

  27. FEෳ਺ਓͷ

    େن໛ͳϓϩδΣΫτ

    View full-size slide

  28. ίϯϙʔωϯτ࡞੒࣌ͷ


    Atomic Designͷղऍͷҧ͍

    View full-size slide

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

    View full-size slide

  30. େن໛ͳ։ൃʹΑΔ

    ίʔυͷ҆શੑ

    View full-size slide

  31. Nuxt × TypeScript

    View full-size slide

  32. ಋೖͷ͖͔͚ͬ
    • FEෳ਺ਓମ੍ͷن໛ͷେ͖͍ϓϩδΣΫτͰ
    ͋ΓɺܕγεςϜͷԸܙΛಘΔ͜ͱ͕Ͱ͖ͦ
    ͏ͩͱࢥͬͨ


    • ಋೖΤϯτϦ౳΍ੈؒͷྲྀΕʹ৮ൃ͞Εͯ

    ὎ ͱΓ͋͑ͣؤுͬͯࢼͯ͠Έͯɺ͍Βͳ͍
    ͳͱࢥͬͨΒؤுͬͯ֎ͦ͏

    View full-size slide

  33. ಋೖʹ͋ͨͬͯͷ໰୊఺
    • ੩తܕ෇͚ݴޠͷܦݧऀ͕ϓϩδΣΫτʹ͍
    ͳ͍


    • ։ൃεϐʔυ͸΋ͪΖΜԼ͕Δ

    View full-size slide

  34. ղܾࡦ
    • anyΛڐ༰͠։ൃΛਐΊ͍ͯ͘

    ὎ ͱΓ͋͑ͣং൫͸ΤϥʔΛѲΓͭͿ͠ɺ

    ஌͕͍͖͔ࣝͭͯͯΒΑΓݫ֨ʹ͍ͯ͘͠

    View full-size slide

  35. TypeScriptͰخ͔ͬͨ͜͠ͱ
    • anyڐ༰Ͱ΋JavaScriptΑΓݫ֨


    • ७ਮʹٕज़త஌ݟ͕͕͋Δ


    • ίʔυͷՄಡੑͷ্ঢ


    • εϐʔυ͕ܶతʹམͪΔ͜ͱ΋ͳ͍

    View full-size slide

  36. ΈΜͳخ͍͠ ☺

    View full-size slide

  37. Nuxtͷ͓͔͛ͰεϚʔτύε
    ӡ༻ͷະདྷ͸໌Δ͍ʂ

    View full-size slide

  38. ࠷ޙʹ
    medibaͰ͸ڞʹಇ͘ΤϯδχΞΛ

    ืू͍ͯ͠·͢


    ͓଴͓ͪͯ͠Γ·͢ʂʂʂʂ

    View full-size slide

  39. ͋Γ͕ͱ͏͍͟͝·ͨ͠ 🙇

    View full-size slide