Nuxt.js + Firebaseでの開発と高速化に挑んだ話

Nuxt.js + FirebaseでWebアプリにチャット機能の導入する際に
工夫した点、感じたメリット・デメリットについてお話します。
その他には、フロント周りでボトルネックになっていた処理を調査し、高速化した話をする予定です。

Transcript

1. Nuxt.js + Firebaseでの開ൃと
   高速化に挑んだ話
   鈴木孝之
   

   View Slide

2. "HFOEB
   ࣗݾ঺հɾձࣾ঺հ
   'JSFCBTFಋೖʹ͋ͨͬͯͷܦҢ
   'JSFCBTFͷಋೖɻͦΕ͔Βͷݒ೦ɾվળ఺
   Ϗϧυߴ଎ԽͰ΍ͬͨࣄ
   

   View Slide

3. ࣗݾ঺հɾձࣾ঺հ
   

   View Slide

4. 0.ࣗݾ঺հ
   ◆໊લ
   ླ໦ ޹೭(Suzuki Takayuki)
   ※ಉ੏ಉ໊ଟͯ͘ࠔͬͯ·͢ɻɻɻ
   ◆ࣗݾ঺հ
   ɾ1990೥ɺਆಸ઒ݝੜ·Εɻ
   ɾࣾձਓʹͳ͔ͬͯΒɺϓϩάϥϛϯάΛ࢝ΊΔɻ
   ɾ2015೥ʹϑϧεϐʔυʹೖࣾ͠ɺ2017೥ʹಠཱɻ
   ɾݱࡏ͸ɺडୗ։ൃΛ΍ΓͭͭɺࣗࣾWebαʔϏεΛ։ൃதɻ
   ◆झຯ
   ίεϓϨɺԻָϥΠϒɺϚϥιϯେձʹग़Δɺ໺ٿ؍ઓ
   ◆εΩϧ
   PHP,Symfony2,CakePHP3,Laravel5,
   JavaScript,backbone.js,Angular.js
   

   View Slide

5. 0.ࣗݾ঺հ
   

   View Slide

6. Copyright Re:Build.inc All Rights Reserved.
   ձࣾ঺հ
   ◆ձ໊ࣾ
   גࣜձࣾRe:Build
   ◆ॅॴ
   ԭೄݝԭೄࢢதԝ̍ஸ໨̍̒−̕
   ◆ࣄۀ಺༰
   ɾࣗࣾWEBαʔϏεͷاըɾ։ൃɻ
   ɾडୗ։ൃ
   ◆ࣾһ
   6໊
   ◆ΤϯδχΞͷಇ͖ํ
   ϦϞʔτϫʔΫՄೳͳࣗ༝ͳಇ͖ํΛਪ঑ͯ͠·͢ʂ
   

   View Slide

7. 7
   ࣗࣾ։ൃνʔϜߏ੒
   Suzuki Takayuki
   ਖ਼ࣾһ
   (ि5೔ۈ຿)
   Kakazu Yuki
   (ਖ਼ࣾһ)
   Ϛωδϝϯτ&։ൃ
   ։ൃ
   ϑϦʔϥϯε
   (ि2೔ۈ຿)
   ϑϦʔϥϯε
   (ि2೔ۈ຿)
   ϑϦʔϥϯε
   (ि2೔ۈ຿)
   ϑϦʔϥϯε
   (ि1೔ۈ຿)
   ཁ݅ఆٛ
   UI/UX
   ਖ਼ࣾһ
   (ि5೔ۈ຿)
   ෭ۀ
   (ि1೔ۈ຿)
   ͜ͷϙδγϣϯΛ
   ΍ͬͯ·͢ʂ
   

   View Slide

8. 'JSFCBTFಋೖʹ͋ͨͬͯͷܦҢ
   

   View Slide

9. 9
   ࣗࣾWebαʔϏεͷ։ൃ
   ɾαʔϏε໊
   Tadoru

   https://tadoru.work/

   

   ɾγεςϜ֓ཁ
   ΤϯδχΞಉ࢜ͷ࢓ࣄ঺հ
   ίϛϡχςΟ
   

   View Slide

10. Re:Build
    اۀͷ୲౰ऀ͕
    ΤʔδΣϯτΛબͿ
    ΤʔδΣϯτ͕ࣗ෼ͷܨ
    ͕Γͷ͋ΔΤϯδχΞ·
    ͨ͸νʔϜʹ੠Λ͔͚Δ
    ΤʔδΣϯτ͸
    ࣄલʹ৹੍ࠪ
    ϫʔΧʔ
    ΤʔδΣϯτ
    اۀ
    ϏδωεϞσϧ
    ࠾༻ใु
    εΩϧ
    ܦݧ
    Քಇঢ়گ
    εΩϧ
    ܦݧ
    Քಇঢ়گ
    εΩϧ
    ܦݧ
    Քಇঢ়گ
    ࢓ࣄΛ঺հ͢Δ
    ˕
    ̋
    ̋
    ×
    ˕
    ̋
    ×
    ̋
    ̋
    

    View Slide

11. 11
    બఆٕͨ͠ज़
    ■ٕज़ཁ݅
    ɾαʔόαΠυ
    PHP(Laravel5.8)
    ɾϑϩϯτΤϯυ
    JavaScript(Vue.js,Nuxt.js)
    ɾςετ
    PHPUnit,Cypress
    ɾ੩తղੳ
    ESlint,PHPStan
    ɾΠϯϑϥ
    AWS(EC2,S3,RDS(mariadb))
    ɾ։ൃ؀ڥ
    php7,nginx,mariadb,docker,webpack
    ɾͦͷଞ
    gitlab,gitlabCI(ࣗಈσϓϩΠͳ
    Ͳ),Slack,phpStorm
    

    View Slide

12. ϑϩϯτΤϯυ αʔόαΠυ
    શମߏ੒
    Gitlab CI
    ϥΠϒϥϦͳͲ
    Firebase
    ϥΠϒϥϦͳͲ
    

    View Slide

13. શମͷΞʔΩςΫνϟ(̐ͭͷυϝΠϯผ)
    ϑϩϯτΤϯυ αʔόαΠυ
    blade
    MPAߏ੒
    ϑϩϯτΤϯυ αʔόαΠυ
    SPAߏ੒
    αʔόαΠυ
    ϑϩϯτΤϯυ αʔόαΠυ
    blade
    MPAߏ੒
    ϫʔΧʔը໘ ΤʔδΣϯτը໘
    اۀը໘
    SPAߏ੒
    ϑϩϯτΤϯυ
    ӡӦը໘
    MPA
    SPA
    

    View Slide

14. νϟοτػೳͷ࣮ݱํ๏Λٞ࿦
    WebSocketɺϩϯάϙʔϦϯάɺFirebaseͷͲΕΛ࢖͏͔ʁ
    ɾ൑அج४
    - ࣮૷೉қ౓͕ͦ͜·Ͱߴ͘ͳ͍ɻ͋͘·Ͱεϐʔυॏࢹɻ
    - ϝϯςφϯείετ͕௿͍ɻ
    - ޙʑɺϝοηʔδͷจݴΛղੳͯ͠෼ੳ͢ΔՄೳੑ͋Γɻ
    - ࠾༻ͷ΢ϦʹͳΔΑ͏ͳٕज़ͩͱঘྑ͍ɻ
    

    View Slide

15. ϩϯάϙʔϦϯάͷௐࠪ݁Ռ
    ɾLong pollingͱ͸ʁ
    ݹయతͳํ๏ͰɺҰఆ࣌ؒ͝ͱʹαʔόʹߋ৽Λ໰͍߹ΘͤΔख๏ɻ
    ϖʔδશମΛऔಘ͢ΔͱߴෛՙͱͳΔͨΊɺAjax௨৴ͰϦΫΤετ͠มߋ෦෼Λߋ৽͢Δͷ͕
    ࠷ۙͰ͸ओྲྀɻ
    ΫϥΠΞϯτ͔Βૹ৴͞ΕͨϦΫΤετΛαʔό͕͍ͬͨΜอཹ͠ɺ
    αʔόଆͰΠϕϯτ͕ൃੜͨ͠ࡍʹ೚ҙͷλΠϛϯάͰϨεϙϯεΛฦ͢ख๏ɻ
    ϦΞϧλΠϜੑ͸ߴ͍ɻ
    ແବͳ໰͍߹Θͤ͸ൃੜ͠ͳ͍͕ɺ௕࣌ؒHTTPίωΫγϣϯΛ઎༗ͯ͠͠·͏ɻ
    Ұ౓ΫϥΠΞϯτʹPushͨ͠Βɺ·ͨΫϥΠΞϯτ͔ΒͷϦΫΤετΛ଴ͨͳ͍ͱ͍͚ͳ
    ͍ɻ
    λΠϛϯάʹΑͬͯ͸λΠϜϥά͕ൃੜ͢Δɻ
    http://peacock.ky-3.net/realtime_notification/realtime_notification
    

    View Slide

16. ϩϯάϙʔϦϯάͷ࣮૷ྫ
    http://peacock.ky-3.net/realtime_notification/realtime_notification
    

    View Slide

17. WebSocketௐࠪ݁Ռ
    ɾWebsocket
    HTTPΛ֦ுͨ͠ϦΞϧλΠϜ௨৴Λલఏͱͯ͠૒ํ޲ʹσʔλ͕ૹड৴Ͱ͖
    Δ௨৴ϓϩτίϧͷ͜ͱɻ
    খ͞ͳσʔλαΠζͰ৘ใΛૹड৴Ͱ͖ΔͨΊHTTPʹൺ΂Δͱ͔ͳΓ௨৴
    ίετ͕௿͍ɻ
    TCPίωΫγϣϯΛுΓͬͺͳ͠ʹ͢ΔͨΊɺϊϯϒϩοΩϯάI/Oαʔό
    ʢNode.jsʣ͕ඞཁɻ
    

    View Slide

18. Laravel EchoͰ࣮ݱ͢Δ৔߹
    http://crought.com/blog/
    %E3%80%90laravel%E3%81%A7%E7%B0%A1%E6%98%93%E3%83%81%E3%83%A3%E3%83%83%E3%83%88%E3%80%911-
    %E3%83%81%E3%83%A3%E3%83%83%E3%83%88%E6%A9%9F%E8%83%BD%E3%81%AE%E4%BB%95%E7%B5%84%E3%81%BF
    %E3%81%AE%E7%90%86-173/
    Լهͷهࣄ͔ΒҾ༻
    

    View Slide

19. Laravel EchoͰ࣮ݱ͢Δ৔߹
    http://crought.com/blog/
    %E3%80%90laravel%E3%81%A7%E7%B0%A1%E6%98%93%E3%83%81%E3%83%A3%E3%83%83%E3%83%88%E3%80%911-
    %E3%83%81%E3%83%A3%E3%83%83%E3%83%88%E6%A9%9F%E8%83%BD%E3%81%AE%E4%BB%95%E7%B5%84%E3%81%BF
    %E3%81%AE%E7%90%86-173/
    Լهͷهࣄ͔ΒҾ༻
    

    View Slide

20. Laravel EchoͰ࣮ݱ͢Δ৔߹
    http://crought.com/blog/
    %E3%80%90laravel%E3%81%A7%E7%B0%A1%E6%98%93%E3%83%81%E3%83%A3%E3%83%83%E3%83%88%E3%80%911-
    %E3%83%81%E3%83%A3%E3%83%83%E3%83%88%E6%A9%9F%E8%83%BD%E3%81%AE%E4%BB%95%E7%B5%84%E3%81%BF
    %E3%81%AE%E7%90%86-173/
    Լهͷهࣄ͔ΒҾ༻
    

    View Slide

21. Laravel EchoͰ࣮ݱ͢Δ৔߹
    http://crought.com/blog/
    %E3%80%90laravel%E3%81%A7%E7%B0%A1%E6%98%93%E3%83%81%E3%83%A3%E3%83%83%E3%83%88%E3%80%911-
    %E3%83%81%E3%83%A3%E3%83%83%E3%83%88%E6%A9%9F%E8%83%BD%E3%81%AE%E4%BB%95%E7%B5%84%E3%81%BF
    %E3%81%AE%E7%90%86-173/
    Լهͷهࣄ͔ΒҾ༻
    

    View Slide

22. Laravel EchoͰ࣮ݱ͢Δ৔߹
    http://crought.com/blog/
    %E3%80%90laravel%E3%81%A7%E7%B0%A1%E6%98%93%E3%83%81%E3%83%A3%E3%83%83%E3%83%88%E3%80%911-
    %E3%83%81%E3%83%A3%E3%83%83%E3%83%88%E6%A9%9F%E8%83%BD%E3%81%AE%E4%BB%95%E7%B5%84%E3%81%BF
    %E3%81%AE%E7%90%86-173/
    Լهͷهࣄ͔ΒҾ༻
    

    View Slide

23. Laravel EchoͰ࣮ݱ͢Δ৔߹
    http://crought.com/blog/
    %E3%80%90laravel%E3%81%A7%E7%B0%A1%E6%98%93%E3%83%81%E3%83%A3%E3%83%83%E3%83%88%E3%80%911-
    %E3%83%81%E3%83%A3%E3%83%83%E3%83%88%E6%A9%9F%E8%83%BD%E3%81%AE%E4%BB%95%E7%B5%84%E3%81%BF
    %E3%81%AE%E7%90%86-173/
    ೉ͦ͠͏…ʂ
    

    View Slide

24. Firebaseௐࠪ݁Ռ
    αʔόෛՙ ಋೖίετ ϝϯςφϯείετ
    Firebase ͋·Γ͔͔Βͳ͍ ௿Ί গͳ͍
    ϩϯάϙʔϦϯά ͔͔Δ ௿Ί ී௨
    WebSocket ͋·Γ͔͔Βͳ͍ ߴΊ ଟΊ
    

    View Slide

25. ٞ࿦ͷ݁Ռ
    Firebaseʹܾఆʂʂ
    ɾબఆཧ༝
    - αϯϓϧΛ࡞ͬͯΈͨ࣌ʹ൒೔͘Β͍Ͱ࣮૷Ͱ͖ͨɻ
    - ผҊ݅Ͱ࡞ͬͨϝοηʔδػೳ͕1ਓ݄΄Ͳ͔͚࣮ͯ૷͕ͨ͠ɺ
    όά͕ଟ͘ϝϯςφϯείετΛԼ͔͛ͨͬͨɻ
    - LaravelEcho(Websocket)΍ϩϯάϙʔϦϯάͰ
    ࣮૷ͨ͠Β͚ͬ͜͏޻਺͕͔͔Γͦ͏ͩͬͨɻ
    - ࠾༻ͷ΢ϦʹͳΓͦ͏ɻ
    

    View Slide

26. FirebaseಋೖલͰͷݒ೦఺
    - Firebase্ͷDatabaseͷແྉ࿮͕1GB͔͠ͳ͍
    - ίϨΫγϣϯؒͰ֎෦ΩʔΛ࣋ͨͤΒΕͳ͍ɻ
    - ݕࡧ৚݅ʹҰ෦ɺ੍ݶ͋Γɻ
    

    View Slide

27. 'JSFCBTFͷಋೖɻ
    ͦΕ͔Βͷݒ೦ɾվળ఺
    

    View Slide

28. Firestoreͷߏ੒
    usersίϨΫγϣϯ roomsίϨΫγϣϯ
    

    View Slide

29. usersίϨΫγϣϯ
    ίϨΫγϣϯͷJSONߏ଄ྫ
    FirebaseͷFireStoreྫ
    

    View Slide

30. roomsίϨΫγϣϯ
    ίϨΫγϣϯͷJSONߏ଄ྫ
    FirebaseͷFireStoreྫ
    

    View Slide

31. ը໘Πϝʔδ(MPA)
    

    View Slide

32. ը໘Πϝʔδ(MPA)
    νϟοτ෦෼͚ͩVue.jsͷ
    ίϯϙʔωϯτΛ࢖༻
    Index.vue
    RoomCreateForm.vue
    Messages.vue
    Rooms.vue
    

    View Slide

33. ը໘Πϝʔδ(SPA)
    

    View Slide

34. ը໘Πϝʔδ(SPA)
    Index.vue
    RoomCreateForm.vue
    Messages.vue
    Rooms.vue
    νϟοτ෦෼͸ྲྀ༻ͯ͠ɺ
    શମ͸Nuxt.jsΛ࢖༻
    

    View Slide

35. ҰൠϢʔβը໘ͷߏ੒
    Laravelͷblade
    RoomCreateForm.vue
    Messages.vue
    Rooms.vue
    UserCreateForm.vue
    Index.
    vue
    Firebase Tadoru DB
    FirebaseʹϩάΠϯ
    ϢʔβΛొ࿥͢Δ
    ϧʔϜΛ࡞੒͢Δ
    νϟοτ૬खΛऔಘ͢Δ
    ϧʔϜϝϯόʔ৘ใΛऔಘ͢Δ
    ϝοηʔδҰཡΛऔಘ͢Δ
    ϝοηʔδΛૹ৴͢Δ
    ϧʔϜҰཡΛऔಘ͢Δ
    

    View Slide

36. اۀϢʔβը໘ͷߏ੒
    pages/chat/index.vue
    RoomCreateForm.vue
    Messages.vue
    Rooms.vue
    UserCreateForm.vue
    Index.
    vue
    Firebase Tadoru DB
    FirebaseʹϩάΠϯ
    ϢʔβΛొ࿥͢Δ
    ϧʔϜΛ࡞੒͢Δ
    νϟοτ૬खΛऔಘ͢Δ
    ϧʔϜϝϯόʔ৘ใΛऔಘ͢Δ
    ϝοηʔδҰཡΛऔಘ͢Δ
    ϝοηʔδΛૹ৴͢Δ
    ϧʔϜҰཡΛऔಘ͢Δ
    

    View Slide

37. γʔέϯεਤ ʙ ϧʔϜ࡞੒ʙ
    

    View Slide

38. γʔέϯεਤ ʙ ϧʔϜ࡞੒ʙ
    ϧʔϜ࡞੒࣌ʹ
    Clound FuctionͰ
    UsersͷαϒίϨΫγϣϯʹ
    ॻ͖ࠐΈʹ͍͘
    

    View Slide

39. 3 9
    Google Cloud Functions for Firebase
    http://furandon-pig.hatenablog.com/entry/2014/06/04/215727
    Cloud Functions for Firebase Λ࢖͏͜ͱͰɺΠ
    ϕϯτυϦϒϯͳΞϓϦέʔγϣϯΛ࡞੒͢Δ
    ͜ͱ͕Ͱ͖·͢ɻ SMS ϝοηʔδͷૹ৴ͳͲ
    ͷॲཧͷΑ͏ͳ֎෦αʔϏε࿈ܞͳͲΛߦ͏͜
    ͱ͕ՄೳʹͳΓ·͢ɻ·ͨɺΫϥΠΞϯτΞϓ
    Ϧέʔγϣϯʹ࣮૷ͤ͞Δʹ͸ॏͨ͗͢ΔΑ͏
    ͳॲཧΛ Cloud Functions for Firebase ʹҕͶ
    Δ͜ͱ͕Ͱ͖·͢ɻ
    

    View Slide

40. functionͷॲཧ
    UsersͷαϒίϨΫγϣϯʹ
    roomsΛॻ͖ࠐΈ
    

    View Slide

41. UsersʹαϒίϨΫγϣϯΛ࣋ͨͤͨཧ༝
    - Ҏલ(2019೥3݄͝Ζ)ͷ΍Γ
    ํͩͱݕࡧ͕ࠔ೉ͩͬͨͱࢥͬ
    ͨͷͰɺͦ͏͍ͯͨ͠
    - ࠓ͸ΫΤϦ͕؆୯ʹͰ͖Δ͔
    ΋͠Εͳ͍
    https://speakerdeck.com/koogawa/firestore-falsedetashe-ji-nituite?slide=17
    

    View Slide

42. γʔέϯεਤ ʙ ϧʔϜҰཡɺϝοηʔδҰཡΛऔಘʙ
    

    View Slide

43. Users͔Βroomsͷ৘ใΛ
    औಘ
    γʔέϯεਤ ʙ ϧʔϜҰཡɺϝοηʔδҰཡΛऔಘʙ
    

    View Slide

44. usersͷαϒίϨΫγϣϯ͔ΒroomsΛऔಘ
    Users͝ͱͷID͝ͱʹର৅ͷ
    roomsΛαϒίϨΫγϣϯ͔
    Βऔಘ͢Δ
    

    View Slide

45. ֤มߋΛײ஌ͯ͠ɺνϟοτ৘ใΛߋ৽
    https://firebase.google.com/docs/firestore/query-data/listen?hl=ja
    

    View Slide

46. Ϣʔβͷొ࿥࣌ͷॳظϑϩʔ
    
    DBʹϢʔβొ࿥
    Firebase
    Tadoru DB
    Ϣʔβ৘ใΛొ࿥
    Ϣʔβ৘ใΛొ࿥
    
    Firestoreʹ
    Ϣʔβొ࿥
    gRPCͰૹΔ
    ؅ཧ͕໘౗ʹͳΔ͕DBͱ
    FirestoreʹϢʔβ৘ใ͕̎ͭग़
    དྷΔࣄʹͳͬͯ͠·ͬͨ…ɻ
    PHPͷFirestoreͷϥΠϒϥϦ͕
    gRPCࢦఆͩͬͨ
    LaravelͷΦϒβʔόͰ
    Firestoreͷొ࿥ॲཧൃಈ
    

    View Slide

47. PHPଆ͔ΒUser৘ใొ࿥࣌ʹΦϒβʔόʔͰFiresotreʹ΋ొ࿥
    gRPCͷΠϯετʔϧ΋ඞཁ
    ͳͷͰɺཁ஫ҙ
    

    View Slide

48. ӡ༻ޙͷݒ೦఺ ʙ Clound Function͕஗͍໰୊ ʙ
    ϝοηʔδϧʔϜͷॳظىಈ࣌
    

    View Slide

49. ӡ༻ޙͷݒ೦఺ ʙ Clound Function͕஗͍໰୊ ʙ
    ϝοηʔδϧʔϜͷ2ճ໨Ҏ߱ͷىಈ࣌
    

    View Slide

50. Clound Function͕஗͍ཧ༝
    firebaseͷcloud functions͕࣮ߦ͞ΕΔ·Ͱͷ͕࣌ؒҟ༷ʹ௕
    ͍ɻτϦΨʔͷ৚݅Λຬ͔ͨͯ͠Βɺ5ඵલޙ͔͔͔ͬͯΒσʔ
    λʹ࣮ߦ݁Ռ͕൓ө͞ΕΔ͜ͱ͕͋Δɻ
    cloud functionsʹҰఆظؒͷΞΫηε͕ͳ͍৔߹͸ɺࣗಈతʹΠ
    ϯελϯε͕εϦʔϓϞʔυʹೖΔɻ
    https://qiita.com/Masaaki/items/54cf16c6c55cdae91b82
    

    View Slide

51. ղܾࡦ
    ಛʹͳ͠ɻ
    සൟʹϦΫΤετ͕ૹΒΕ͍ͯΔ৔߹͸ɺࠓճͷ໰୊͸ൃੜ͠
    ͳ͍͸ͣͳͷͰɺ։ൃ؀ڥಛ༗ͷ໰୊Ͱ͋Δɻຊ൪؀ڥͰ͸Π
    ϯελϯε͕ఀࢭ͢Δ͜ͱ͸ͳ͍͸ͣͳͷͰɺେͨ͠໰୊ʹͳ
    Βͳ͍ɻ
    https://qiita.com/Masaaki/items/54cf16c6c55cdae91b82
    

    View Slide

52. Ϗϧυߴ଎ԽͰ΍ͬͨࣄ
    

    View Slide

53. 8FCQBDL#VOEMF"OBMZ[FSͱ͸ʁ
    ԼهΛՄࢹԽͯ͘͠ΕΔɻ
    ɾwebpackͷ଎౓վળͷҝɺ஗͍
    loader΍pluginΛ஌Γ͍ͨ
    ɾόϯυϧϑΝΠϧͷαΠζΛݮ
    Β͍ͨ͠ͷͰɺόϯυϧϑΝΠϧ
    ಺ͷ֤ύοέʔδ͕Ͳͷ͘Β͍ͷ
    ༰ྔΛ઎Ί͍ͯΔ͔஌Γ͍ͨ
    https://github.com/webpack-contrib/webpack-bundle-analyzer
    

    View Slide

54. ࣮ߦํ๏
    

    View Slide

55. 8FCQBDL#VOEMF"OBMZ[FSͱ͸ʁ
    https://qiita.com/kurosame/items/9e7092cdf08ff2ba7500
    

    View Slide

56. ݱঢ়ͷ՝୊
    ᶃChart.js͕ॏ͍
    ᶄmoment.js͕ॏ͍
    - locale͕ແବʹଟ͍
    ᶅlodash.js͕ॏ͍
    

    View Slide

57. ᶃChart.js͕ॏ͍
    ɾvue-chart.jsͷதͰ࢖ΘΕ͍ͯΔͷͰɺ
    ֎͢ͷ͸೉ͦ͠͏ͩͬͨɻ
    

    View Slide

58. ᶄmoment.js͕ॏ͍
    nuxt.config.jsʹmomentͷ
    ઃఆΛ௥Ճ
    

    View Slide

59. ᶅlodash.js͕ॏ͍
    ɾݱঢ়ɺσΟʔϓίϐʔͷ
    Օॴʹ͔͠lodash.js͕࢖Θ
    Ε͍ͯͳ͔ͬͨ
    

    View Slide

60. ᶅlodash.js͕ॏ͍
    https://kuroeveryday.blogspot.com/2017/05/deep-clone-object-in-javascript.html
    ੜͷJSͰ΋σΟʔϓίϐʔ
    Ͱ͖Δ͕ɺ͜Ε͸࣮֬ʹͰ
    ͖͍ͯΔ͔ո͍͠Β͍͠ɻ
    

    View Slide

61. ᶅlodash.js͕ॏ͍
    https://qiita.com/hareku/items/d9f92c96697163356bd3
    lodashΛimport _ from 'lodash'ͷΑ͏ʹಡΈࠐΜͰ
    ͠·͏ͱɺશͯͷlodashؔ਺ͳͲ͕bundle͞Εͯ
    ͠·͍·͢ɻ
    ͦΕΛճආ͢ΔͨΊɺ࢖༻͢Δؔ਺ͷΈΛimport
    ͢ΔΑ͏ʹมߋ͠·͢ɻ
    

    View Slide

62. վળ݁Ռ lodashͱmoment.js͸
    ΄΅ফ͑ͨʂ
    

    View Slide

63. վળ݁Ռ ໿1MBܰྔԽ
    

    View Slide

64. ·ͱΊ
    

    View Slide

65. - Firebase͸ࢥͬͨΑΓಋೖ͢Δʹ͋ͨͬͯɺ޻਺͕͔͔ͬͨ
    - FirebaseΛೖΕͯগ͠ෳࡶͳΞʔΩςΫνϟʹͳͬͯ͠·ͬͨ
    (஌ݟ͕͋Ε͹ճආͰ͖͔ͨ΋͠Εͳ͍)
    - Ϗϧυͷߴ଎Խ͢Δʹ͋ͨͬͯɺmoment.js΍lodash.js͕ॏ͘
    ͳΔͷ͸Α͋͘Γͦ͏
    ·ͱΊ
    

    View Slide