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

noteをNuxt.jsで再構築した話

Retu Fukui
November 03, 2018

 noteをNuxt.jsで再構築した話

2018-11-03にVueFesJapan2018にてお話しました

Retu Fukui

November 03, 2018
Tweet

More Decks by Retu Fukui

Other Decks in Technology

Transcript

  1. noteΛNuxt.jsͰ࠶ߏஙͨ͠࿩
    VueFesJapan2018
    ෱Ҫ ྽(@fukuiretu)

    View Slide

  2. ෱Ҫ ྽ (@fukuiretu)
    • piece of cake, inc.
    • since 2015.3~
    • Engineer
    ◦ Rails occasionally AWS
    ◦ Vue.js history 7 months
    ◦ Nuxt.js history 7 months
    • Live in Aomori
    ◦ RemoteWorker

    View Slide

  3. ͍͔ͭ੨৿ͰVue.jsͷ
    Πϕϯτ΍Γ͍ͨ

    View Slide

  4. ΫϦΤΠλʔɺϝσΟΞͷͨΊͷ$$ϓϥοτϑΥʔϜ

    View Slide

  5. ΫϦΤΠλʔɺϝσΟΞͷͨΊͷ$$ϓϥοτϑΥʔϜ
    • จষɺࣸਅɺΠϥετͳͲͷ࡞඼Λ౤ߘ͢
    Δ͜ͱ͕Ͱ͖Δ
    • ౤ߘͨ͠࡞඼Λ؆୯ʹൢച͢Δ͜ͱ͕

    Ͱ͖Δ
    ͩΕ΋͕૑࡞Λ͸͡Ίɺ

    ଓ͚ΒΕΔΑ͏ʹ͢Δɻ

    View Slide

  6. ࠓ೔͓࿩͢Δ͜ͱ
    1. Nuxt.jsҠߦͷϞνϕʔγϣϯ

    2. Nuxt.js΁ͷҠߦܭը

    3. ઃܭɾ࣮૷ͷτϐοΫ

    4. ·ͱΊ

    View Slide

  7. ࠓ೔͓࿩͢Δ͜ͱ
    1. Nuxt.jsҠߦͷϞνϕʔγϣϯ

    2. Nuxt.js΁ͷҠߦܭը

    3. ઃܭɾ࣮૷ͷτϐοΫ

    4. ·ͱΊ

    View Slide

  8. ։ൃ౰࣌ͷϑϩϯτΤϯυ৘੎
    2013. 7 2013. 10 2013. 12
    React.js
    v0.3
    Angular.js
    v1.2.3rc
    Vue.js
    v0.6
    2014. 4
    note։ൃ ~ ϦϦʔε
    note͸Angular.jsΛબ୒
    (౰࣌೔ຊͰ͸Backbone.js͕ओྲྀ)

    View Slide

  9. Angular.jsΛબ୒ͨ͠ཧ༝
    • UI͕ͦΕͳΓʹෳࡶ
    • 2-way binding͸ັྗత
    • αʔόαΠυ͸APIʹઐ೦
    • ωΠςΟϒΞϓϦͷߟྀ
    • ΤϯδχΞ࠾༻໨త
    • ౰࣌ίϯγϡʔϚ޲͚Ͱ͸௝͔ͬͨ͠

    View Slide

  10. ݱࡏͷٕज़ελοΫ
    • Frontend
    • Angular.js 1ܥ
    • CoffeeScript
    • HAML
    • Backend
    • Ruby on Rails
    • Infrastructure
    • AWS

    View Slide

  11. ݱࡏͷٕज़ελοΫ
    • Frontend
    • Angular.js 1.4ܥ
    • CoffeeScript
    • HAML
    • Backend
    • Ruby on Rails 4.2ܥ
    • Capistrano
    • Infrastructure
    • AWS
    Client Side Rendering
    only

    Single Page Application

    View Slide

  12. Կ͕՝୊͔

    View Slide

  13. ՝୊఺
    • ॳظදࣔ଎౓ͷ஗͞
    • εϖοΫͷ௿͍୺຤Ͱݦஶʹ
    • ٕज़త੍໿
    • Angular.js1ܥ͸SSRΛαϙʔτ͍ͯ͠ͳ͍
    • Railsͷ্ʹ৐ͬͨϑϩϯτΤϯυ
    • ٕज़తෛ࠴
    • ίʔσΟϯάن໿
    • ίϯϙʔωϯτઃܭ

    View Slide

  14. ෛ࠴ͱͳ͍ͬͯΔίʔυͷҰྫ

    View Slide

  15. طଘͷٕज़ͷԆ௕Ͱ͸ղܾ͕
    ࠔ೉ͳঢ়گ

    View Slide

  16. දࣔ଎౓͸ਖ਼ٛ

    View Slide

  17. දࣔ଎౓͸ਖ਼ٛ

    View Slide

  18. ܦӦࢹ఺ͰͷϑϧϦχϡʔΞϧ
    ελʔτΞοϓͷن໛Ͱ͸
    ͳ͔ͳ͔౿Έ੾Εͳ͍ͷ͕Ұൠత

    View Slide

  19. ܦӦࢹ఺ͰͷϑϧϦχϡʔΞϧ
    ֶੜ࣌୅ʹLinuxΧʔωϧ͍ͬͯ͡
    ༡ΜͩΓɺࠓ͸ػցֶशͰPython
    ॻ͍ͨΓͱ͍͏CEO
    දࣔ଎౓͸ਖ਼ٛΛᨳͬͯΔ͝ຊਓ
    ͕2017/10ʹCXOʹब೚

    View Slide

  20. ܦӦࢹ఺ͰͷϑϧϦχϡʔΞϧ
    ֶੜ࣌୅ʹLinuxΧʔωϧ͍ͬͯ͡
    ༡ΜͩΓɺࠓ͸ػցֶशͰPython
    ॻ͍ͨΓͱ͍͏CEO
    දࣔ଎౓͸ਖ਼ٛΛᨳͬͯΔ͝ຊਓ
    ͕2017/10ʹCXOʹब೚
    ҙ֎ͱ͋ͬ͞ΓͱGoαΠϯ

    View Slide

  21. ͜͏ͯ͠
    ϑϩϯτΤϯυΛશ໘తʹ
    ࡮৽͢Δํ޲Ͱݕ౼
    (2018/03)

    View Slide

  22. ٕज़બఆཁ݅ͷચ͍ग़͠
    • Server Side Rendering (Ҏ߱SSR)
    • ֶश/ӡ༻ίετ
    • σβΠφʔ΁ͷ഑ྀ
    • ΨνͳϑϩϯτΤϯυΤϯδχΞͰͳͯ͘΋ϝϯςφ
    ϒϧʹ
    • ։ൃ/ίϛϡχςΟͷ׆ൃ͞

    View Slide

  23. ީิͱ͕ͯ͋ͬͨ͠બ୒ࢶ
    1.Express + VanillaJS

    2.React.js

    3.Angular

    4.Vue.js

    View Slide

  24. ީิͱ͕ͯ͋ͬͨ͠બ୒ࢶ
    1. Express + VanillaJS

    2. React.js

    3. Angular

    4. Vue.js
    ೔ܦ͞ΜͷࣄྫΛࢀߟʹ

    View Slide

  25. ͕͔ͩ͠͠…
    • ϑϩϯτΤϯυͷॲཧ͕ଟ͍
    • ΠϯλϥΫςΟϒͳUI΋ͦͦ͋͜͜Δ
    • ։ൃޮ཰্͕͕Βͣʹஅ೦

    View Slide

  26. ީิͱ͕ͯ͋ͬͨ͠બ୒ࢶ
    1.Express + VanillaJS

    2.React.js

    3.Angular

    4.Vue.js
    CTOͷ஌ਓʹVue.jsʹਫ਼௨͍ͯ͠Δํ͕ଟ
    ͘ɺનΊΒΕͨͷ͕͖͔͚ͬ

    View Slide

  27. ࠾༻

    View Slide

  28. Vue.jsΛ࠾༻ͨ͠ཧ༝ᶃ
    • Vue Server RendererʹΑΔSSRͷαϙʔτ
    • Virtual DOMʹΑΔޮ཰తͳࠩ෼ߋ৽
    • ίϯϙʔωϯτࢦ޲
    • Single File Components
    • Scoped CSS
    ࣮ߦ଎౓ͱ։ൃޮ཰ͷཱ྆

    View Slide

  29. Vue.jsΛ࠾༻ͨ͠ཧ༝ᶄ
    • template͕HTMLͰॻ͚Δ
    • σβΠφʔʹ΋༏͍͠
    • HAML < HTMLͩͱฉ͍͍ͯͨ
    • ߏจ(v-xxx)͕Angular.js(ng-xxx)ͱ͍ۙ͠
    ֶशίετͷ௿͞ͱ਌͠Έ΍͢͞

    View Slide

  30. Vue.jsΛ࠾༻ͨ͠ཧ༝ᶅ
    • ࠔͬͨΒެࣜͷυΩϡϝϯτΛݟΕ͹

    େ֓ղܾ͢Δ
    • ೔ຊޠϩʔΧϥΠζ൛͕༻ҙ͞Ε͍ͯΔ
    υΩϡϝϯτͷॆ࣮౓

    View Slide

  31. Vue.jsΛ࠾༻ͨ͠ཧ༝ᶆ
    • ษڧձ΍Πϕϯτͷଟ͞ = ৘ใྔ͕ଟ͍
    • ௐ΂Ε͹৘ใ͕ग़ͯ͘Δɺฉ͘͜ͱ͕Ͱ͖Δ
    ҆৺ײ
    ࠃ಺ίϛϡχςΟͷ׆ൃ౓

    View Slide

  32. Vue.jsΛ࠾༻ͨ͠ཧ༝ᶇ
    • ͱ͋Δ@kitak͞Μͱ͍͏ํ
    • ࣮૷ͷQ & A
    • ઃܭͷαϙʔτ
    • ϋϯζΦϯ։࠵ʹΑΔجૅ஌ࣝ޲্
    Vue.jsͷΤΩεύʔτ͕ίϯαϧʹ

    View Slide

  33. Nuxt.js͸??

    View Slide

  34. Nuxt.jsΛ৮Δ͖͔͚ͬ
    • Vue.jsͰSSR͢Δ৔߹Ͳ͏͢Ε͹ʁ
    • Nuxt.jsΛ࢖͏ͱ؆୯ʹͰ͖ΔΒ͍͠...
    • ݕূͯ͠ΈͨΒͬ͘͞ͱSSR͕Ͱ͖ͨ…
    • kitak͞Μ΋SSR͢ΔͳΒNuxt.js͍͍ͧͱݴͬ
    ͍ͯͨ͠...

    View Slide

  35. ࠾༻

    View Slide

  36. Nuxt.jsΛ࠾༻ͨ͠ཧ༝ᶃ
    • SSR͕؆୯ʹ
    • pages഑ԼʹίϯϙʔωϯτΛஔ͘
    • asyncData() / fetch() ͰඞཁͳσʔλΛఆٛɾऔಘ͢Δ
    • DIRߏ੒, ϧʔςΟϯάͷࣗಈੜ੒, ϓϥάΠϯ
    ػߏ etc..
    ن໿͕खʹೖΔ

    View Slide

  37. Nuxt.jsΛ࠾༻ͨ͠ཧ༝ᶄ
    • Vue.jsͷΤίγεςϜΛϏϧτΠϯ
    • Vue Router, Vuex, Vue Server Renderer, vue-meta
    • Ϗϧυ(webpack)͸Α͠ͳʹ
    • minify, jsϑΝΠϧ෼ׂ, cssͷΠϯϥΠϯԽ, 

    τϥϯεύΠϧ, preload etc…
    Ϟμϯͳ؀ڥ͕खʹೖΔ

    View Slide

  38. ΍͍͖ͬͯએݴ
    Nuxt.jsҠߦϓϩδΣΫτ͕ελʔτ

    (2018/4)

    View Slide

  39. ࠓ೔͓࿩͢Δ͜ͱ
    1. Nuxt.jsҠߦͷϞνϕʔγϣϯ

    2. Nuxt.js΁ͷҠߦܭը

    3. ઃܭɾ࣮૷ͷτϐοΫ

    4. ·ͱΊ

    View Slide

  40. ࡮৽ͷํ਑
    • طଘͷRailsαʔό͸API༻్Ͱ͜Ε·Ͱ௨Γར༻
    • View૚ΛNuxt.js(ϨϯμϦϯάαʔό)΁Ҡߦ

    View Slide

  41. Ҡߦखॱ
    • طଘUIΛ࣮֬ʹҠߦͤ͞Δ
    • େ෯ͳUI/UXͷվम͸ؚΊͳ͍
    • ϖʔδຖʹύε(URL)ϕʔεͰLBͰৼΓ෼͚Δ
    • ࣾ಺޲͚ϦϦʔε ⇢ Dog Fooding ⇢ Ұൠެ։

    View Slide

  42. ։ൃମ੍
    • ΤϯδχΞ: 3໊
    • σβΠφʔ: 2໊(ଞϓϩδΣΫτͱ݉຿)
    • ि1ͰMTG
    • ৘ใڞ༗͸Crowi(ࣾ಺Wiki)Ͱ

    View Slide

  43. ۤ࿑ϙΠϯτ
    • ฒߦͯ͠ݱߦ൛(Angular.js)ͷվम͸ผνʔϜ
    Ͱ೔ʑଓ͍͍ͯΔ
    • Ҡߦ͕׬શʹ׬ྃ͢Δ·Ͱೋॏϝϯς

    View Slide

  44. 2018೥11݄3೔ஈ֊Ͱͷਐḿ
    ͓͢͢ΊҰཡ ݕࡧ
    https://note.mu/recommend_nuxt https://note.mu/search_nuxt
    ຊ൪Քಇத (υοάϑʔσΟϯά༻ͷΤΠϦΞε)

    View Slide

  45. 2018೥11݄3೔ஈ֊Ͱͷਐḿ
    هࣄৄࡉ
    https://note.mu/notedemo/n/n81f8264b9b9e
    ຊ൪Քಇத (σϞ༻ΞΧ΢ϯτͷΈ)

    View Slide

  46. 2018೥11݄3೔ஈ֊Ͱͷਐḿ
    • શମͷن໛ײ
    • ίϯϙʔωϯτ਺: 216
    • LOC: 43672
    • *.vue: 36153
    • *.js: 6823
    • *.scss: 696
    more...
    (2018/4 ~)

    View Slide

  47. ݱ࣌఺Ͱͷ
    ύϑΥʔϚϯεൺֱ

    View Slide

  48. Lighthouseͷൺֱ
    Angular.js൛
    Nuxt.js൛

    View Slide

  49. WebPageTestͷൺֱ
    Angular.js൛
    Nuxt.js൛
    ৚݅ From: Tokyo, Japan - EC2 - Chrome - Emulated iPhone X - 3GFast - Mobile
    Start Render = ϨϯμϦϯά͕։࢝͞ΕΔ·Ͱʹ͔͔Δ࣌ؒ
    Speed Index = ίϯςϯπ͕໨ʹݟ͑Δঢ়ଶʹͳΔ·Ͱͷ࣌ؒ

    View Slide

  50. ·ͩ·ͩຬ଍Ͱ͖Δ
    ϨϕϧͰ͸ͳ͍͕
    ࣮֬ʹΧΠθϯ͍ͯ͠Δ

    View Slide

  51. ࠓ೔͓࿩͢Δ͜ͱ
    1. Nuxt.jsҠߦͷϞνϕʔγϣϯ

    2. Nuxt.js΁ͷҠߦܭը

    3. ઃܭɾ࣮૷ͷτϐοΫ

    4. ·ͱΊ

    View Slide

  52. ͓඼ॻ͖
    • ։ൃ؀ڥ
    • ίϯϙʔωϯτઃܭ
    • ϢχόʔαϧJavaScript
    • ϑΝΠϧαΠζͷѹॖ
    • Polyfill
    • Infrastructure

    View Slide

  53. ։ൃ؀ڥ

    View Slide

  54. ։ൃ؀ڥ
    • Nuxt.js v2.2.0
    • Jest
    • ESLint (vue/recommended)
    • Prettier
    • CircleCI
    • Sentry


    View Slide

  55. ίϯϙʔωϯτઃܭ

    View Slide

  56. Angular.js൛ͷίϯϙʔωϯτ
    • directiveΛར༻͠ɺίϯϙʔωϯτϕʔεͰ
    ։ൃ
    • ཻ౓ʹϧʔϧ͕ͳ͍
    • ཻ౓͸࣮૷ऀͷԘക
    • ނʹॏෳίʔυ͕ࢄࡒ
    • props(scope)ͷόέπϦϨʔ͕ਏ͍
    Կ͔͠Βͷ࢓૊Έͱϧʔϧ͕ཉ͍͠

    View Slide

  57. Vuex & AtomicDesign

    View Slide

  58. Vuexͷओͳϧʔϧ
    • ϞδϡʔϧϞʔυΛ࠾༻
    • mutaions/actions/getttersͷλΠϓʹ͸ఆ਺Λ࢖༻
    • grepability
    • ΤσΟλͷิ׬
    • ετΞʹঢ়ଶΛ࣋ͨͤΔ͔Ͳ͏͔ͷ൑அج४
    A. ίϯϙʔωϯτΛ௒͑ͯڞ༗͍ͨ͠΋ͷ͕͋Δ

    (͍ΘΏΔόέπϦϨʔରࡦ)
    B. Serviceత(ॲཧΛ·ͱΊΔ)ͳ࢖͍ํ
    C. APIݺͼग़͠

    View Slide

  59. ঢ়ଶ؅ཧʹடং͕

    View Slide

  60. VuexϞδϡʔϧͷංେԽ໰୊
    845ߦ....

    View Slide

  61. Nuxt.js v2.0.0

    View Slide

  62. VuexϞδϡʔϧͷϦϑΝΫλ
    • ͓खܰʹݟ௨͠ྑ͘͢Δ͜ͱ͕Ͱ͖Δ
    • ංେԽ͢Δͷ͸ॲཧ͕ूத͢Δactions
    • ߃ٱతʹ͸ػೳ୯ҐͰϞδϡʔϧ෼ׂ

    Ͱ͖ͳ͍͔ݕ౼
    461ߦ

    View Slide

  63. Atomic Designͱ͸
    ίϯϙʔωϯτΛ̑ͭͷϨΠϠʔʹ෼ྨ͠
    ίϯϙʔωϯτͷ૊Έ߹ΘͤͰ
    ϖʔδΛߏ੒͍ͯ͘͠ઃܭख๏

    Atomic Design
    http://atomicdesign.bradfrost.com/

    View Slide

  64. σΟϨΫτϦߏ੒

    View Slide

  65. ࠷ॳ͸ͱʹ͔͘ख୳Γ
    શһͰίϯϙʔωϯτ෼͚ͯ͠ೝࣝΛͦΖ͑Δ

    View Slide

  66. Atomsͷϧʔϧ
    • ಺෦ʹଞͷίϯϙʔωϯτΛؚ·ͳ͍
    • ࠶ར༻ੑΛՃຯ
    • Stateless
    • VuexϞδϡʔϧ΁ͷࢀরېࢭ
    • σʔλͷ఻೻͸emit

    View Slide

  67. Moleculesͷϧʔϧ
    • ಺෦ʹAtomsҎ֎ͷίϯϙʔωϯτΛؚ·ͳ͍
    • ࠶ར༻ੑΛՃຯ
    • Statelessਪ঑
    ▪ ঢ়گʹΑͬͯlocal state(data)͸Մ
    • VuexϞδϡʔϧ΁ͷࢀরېࢭ
    • σʔλͷ఻೻͸emit

    View Slide

  68. Organismsͷϧʔϧ
    • ಺෦ʹOrganismsҎ্ͷίϯϙʔωϯτΛؚ·
    ͳ͍ʢਪ঑ʣ
    • ࠶ར༻ੑ͸Ճຯ͠ͳͯ͘΋ྑ͍
    • StatefulͰ΋Α͍
    • VuexϞδϡʔϧΛࢀরͰ͖Δ

    View Slide

  69. ෼ྨͨ͠ίϯϙʔωϯτͷҰྫ
    Atoms
    Molecules
    Organisms

    View Slide

  70. ΠϯεύΠΞ
    Atomic Design ʙݎ࿚Ͱ࢖͍΍͍͢UIΛޮ཰ྑ͘ઃܭ͢Δ
    https://www.amazon.co.jp/dp/B07CJ5TLK2/
    Vue.js ͔ΒΈͨ AtomicDesign
    https://medium.com/@t_sugawara/vue-js-
    %E3%81%8B%E3%82%89%E3%81%BF%E3%81%9F-atomicdesign-
    e90517842801

    View Slide

  71. Atomic DesignͷಋೖޮՌ
    • ֤ϨΠϠʔͷ੹຿͕͋Δఔ౓໌֬ʹ
    • ֤ϨΠϠʔʹ໊শ͕͋Δ͜ͱͰίϛϡχέʔγϣ
    ϯ͕ԁ׈ʹ

    ͜Εͬͯ.PMFDVMFTͰ
    ͋Δ΂͖͡Όͳ͍ʁ
    ͏ʔΜɺOrganisms
    Ͱ΋Αͦ͞͏͚ͩͲ

    View Slide

  72. ίϯϙʔωϯτͷࢹೝੑ໰୊
    ୭΋೺ѲͰ͖͓ͯΒͣ

    View Slide

  73. Storybook
    https://storybook.js.org/

    View Slide

  74. ίϯϙʔωϯτͷՄࢹԽ
    • Ұ౓࠳ંͨ͠աڈ
    • Nuxt.jsͱͷઃఆपΓͷޓ׵ੑ
    • ֤ίϯϙʔωϯτͷमਖ਼ʹ߹Θͤͯετʔ
    ϦʔΛϝϯςφϯε͢Δͷ͕େม
    • VuexϞδϡʔϧ΍௨৴पΓͷελϒԽ

    View Slide

  75. ίϯϙʔωϯτͷՄࢹԽ
    • Ұ౓࠳ંͨ͠աڈ
    • Nuxt.jsͱͷઃఆपΓͷޓ׵ੑ
    • ֤ίϯϙʔωϯτͷमਖ਼ʹ߹Θͤͯετʔ
    ϦʔΛϝϯςφϯε͢Δͷ͕໘౗
    • VuexϞδϡʔϧ΍௨৴पΓͷελϒԽ
    Nuxt.jsͱͷઃఆपΓͷޓ׵ੑ
    Storybook v4.0.0͸
    Nuxt.js v2Ͱ͍͚Δ
    • ετʔϦʔΛϝϯςφϯε͢Δͷ͕େม
    • VuexϞδϡʔϧ΍௨৴पΓͷελϒԽ
    ର৅ΛAtomsͱMoleculesʹߜΔ

    View Slide

  76. ग़དྷ্͕ͬͨStorybook
    ڧ͍ؾ࣋ͪΛ΋ͬͯ΍͍ͬͯͧ͘

    View Slide

  77. ϢχόʔαϧJavaScript

    View Slide

  78. ϢχόʔαϧJavaScriptͱ͸
    • ΫϥΠΞϯτʢϒϥ΢βʣͱαʔό
    ʢNode.jsʣͷͲͪΒͰ΋࣮ߦͰ͖Δίʔυ
    • SSRʹ͓͍ͯ͸ରԠඞਢ

    View Slide

  79. SSR࣌ʹwindow, document͕
    undefined
    • DBʹอଘ͞ΕͨهࣄͷHTML
    ΛΫϥΠΞϯτͰDOMૢ࡞
    ▪ document.xxx࢖ͬͯΔ
    • ↑Λv-htmlͰల։
    ⾠هࣄϖʔδͰ࣮ࡍʹى͖ͨ໰୊
    ίί

    View Slide

  80. SSR࣌ʹwindow, document͕
    undefined
    DOMͷAPIͱޓ׵ੑͷ͋ΔHTMLύʔα
    jsdom/jsdom
    https://github.com/jsdom/jsodom

    View Slide

  81. SSR࣌ʹwindow, document͕
    undefined

    View Slide

  82. ແࣄSSR͕Ͱ͖ͨ

    View Slide

  83. SSRͷϥΠϑαΠΫϧ
    ੺࿮͸αʔόɺϒϥ΢βͲͪΒ΋௨ա͢Δ

    (ϢχόʔαϧରԠ͕ඞཁͳ)෦෼

    View Slide

  84. ϑΝΠϧαΠζͷѹॖ

    View Slide

  85. bundleϑΝΠϧͷ෼ੳ
    OVYUCVJMEŠBOBMZ[F

    View Slide

  86. ෼ੳ݁ՌΛड͚ͯ
    • highlight.js
    • codeͷγϯλοΫεϋΠϥΠτʹར༻
    • શ෦ೖΓͩͱ700KBͱ͔ͳΓͷॏྔڃ
    • ରԠݴޠΛߜͬͯ57KBʹ
    • moment.js
    • λΠϜκʔϯͷߟྀ͸ෆཁͩͬͨͷͰܰྔͳdate-fns΁
    • dayjs͸͞ΒʹܰྔͳͷͰͦͪΒͰ΋ྑ͍͔΋?
    • lodash.js
    • PolyfillͰे෼ΧόʔͰ͖ͦ͏ͳͷͰআ֎༧ఆ


    View Slide

  87. Polyfill

    View Slide

  88. Polyfill.io

    https://polyfill.io

    View Slide

  89. Polyfill.ioͱ͸
    • UserAgentຖʹඞཁͳPolyfill͚ͩΛ·ͱΊͯฦ
    ͯ͘͠ΕΔ
    • ඞཁͳPolyfill͸ΦϓγϣϯͰࡉ͔͘ௐ੔Մೳ
    • Fastly(CDN)͔Β഑৴͞ΕΔͷͰඇৗʹߴ଎

    View Slide

  90. Polyfill.ioͱ͸

    View Slide

  91. ࠾༻ͷϞνϕʔγϣϯ
    • ΋ͱ΋ͱ͸babel-preset-envͰઃఆ͍ͯͨ͠
    • ϒϥ΢βຖͷAPIରԠঢ়گΛ஫ࢹͯ͠؅ཧ͢Δ
    ͷ͸खؒ

    View Slide

  92. e.g. ChromeͱSafariͷPolyfill
    Chrome/69.0.3497.1 Safari/605.1.15

    View Slide

  93. Infrastructure

    View Slide

  94. Nuxt on Lambda

    View Slide

  95. AWS Lambda
    • αʔόͷϓϩϏδϣχϯάͳ͠ͰίʔυΛ࣮ߦ
    • Function as a Service
    • ରԠݴޠ: Node.js, Python, Go, Java, C#
    • ಛఆͷΠϕϯτΛτϦΨʔͱ࣮ͯ͠ߦՄೳ
    • ϦΫΤετ਺ʹԠͯ͡ΦʔτεέʔϦϯά
    • ैྔ՝ۚ

    View Slide

  96. Serverless Framework
    • ߏ੒؅ཧ΍σϓϩΠΛ୲͏
    • ΤίγεςϜ(plugin)͕๛෋
    • AWSͷଞɺAzure Functions, Google Cloud
    Functionʹ΋ରԠ͍ͯ͠Δ

    View Slide

  97. ࠾༻ͷϞνϕʔγϣϯ
    • ౰ॳ͸EC2 + Node.js + pm2Ͱӡ༻͍ͯͨ͠
    ◦ Node.jsͷӡ༻ϊ΢ϋ΢0
    ◦ Կ౓͔ಥવpm2͕མͪͨΓͱෆ҆Λ๊͍͑ͯͨ
    ◦ AWS LambdaͷػӡͰ͸ʁͱ͍͏ࡶஊ͔Βελʔτ

    View Slide

  98. ͬ͘͟ΓLambda্ͷಈ࡞ͷ࢓૊Έ
    • awslabs/aws-serverless-express Λར༻͠

    expressΛಈ͔͢
    • Nuxt.jsΛexpressͷmiddlewareͱͯ͠ಈ͔͢
    • ref: API: nuxt.render(req, res)

    View Slide

  99. ৄ͘͠͸mya-ake͞ΜͷϒϩάͰ
    Nuxt.js on AWS Lambda with Serverless Framework

    https://mya-ake.com/posts/nuxtjs-on-aws-lambda

    View Slide

  100. αʔόߏ੒
    https://note.mu/recommend
    https://note.mu/recommend_nuxt

    View Slide

  101. ӡ༻͸ָʹͳΔ
    …͕͍͔ͭ͘τϨʔυΦϑ΋

    View Slide

  102. τϨʔυΦϑ
    • Node.jsͷversion͕Lambdaʹґଘͯ͠͠·͏
    • ݱঢ়͸v8.10.0
    • Nuxt.jsͷ࠷৽versionʹ௥ैͰ͖ͳ͘ͳΔՄೳੑ
    • LambdaʹσϓϩΠग़དྷΔύοέʔδ༰ྔͷ

    ࠷େ͕50MB
    • ݱ࣌఺Ͱ32MB
    • cold start໰୊ʹΑΔϨΠςϯγͷѱԽ

    View Slide

  103. ࠓ೔͓࿩͢Δ͜ͱ
    1. Nuxt.jsҠߦͷϞνϕʔγϣϯ

    2. Nuxt.js΁ͷҠߦܭը

    3. ઃܭɾ࣮૷ͷτϐοΫ

    4. ·ͱΊ

    View Slide

  104. ·ͱΊ
    • ϝϦοτ
    • طଘͷݴޠ΍ϑϨʔϜϫʔΫͷ੍໿ʹറ
    ΒΕͳ͍
    • υοάϑʔσΟϯά͕༰қʹͰ͖Δ
    • ϩʔϧόοΫ͕༰қʹͰ͖Δ
    • σϝϦοτ
    • ׬શҠߦ͢Δ·Ͱ͸2ॏϝϯςʹͳΓ͏Δ
    ύε(URL)ϕʔεͰখ͘͞Ҡߦ͢Δͷ͸༗ޮ

    View Slide

  105. ·ͱΊ
    • SSR͕ඞཁͳΒಋೖ͠ͳ͍ख͸ͳ͍
    • ಋೖ͸؆୯ֶ͕ͩश/ӡ༻ίετ͸͕͋Δ
    • ϢχόʔαϧରԠ
    • Node.jsͷӡ༻
    • τϨʔυΦϑ͕ڐ༰Ͱ͖ΔͳΒAWS Lambda͸༗༻
    • SSR͕ຊ౰ʹඞཁ͔Ͳ͏͔͸ཁݕ౼
    • SPAϞʔυ (mode: ‘spa’)
    • ੩తαΠτ (nuxt generate)
    SSRͷಋೖ͸ຊ౰ʹ؆୯

    View Slide

  106. ·ͱΊ
    • ίετΛ͔͚ͣʹϞμϯͳ։ൃ؀ڥ͕खʹೖΔ

    ⇢ ͙͢ʹ૸Γग़ͤΔ
    • ᙱ͍ͱ͜Ζʹख͕ಧ͘ͷͰؾ࣋ͪΑ͘ίʔυΛ
    ॻ͚Δ ⇢ ຊ࣭తͳ։ൃʹूதͰ͖Δ
    • Vuexͷऔѻ΍ίϯϙʔωϯτͷཻ౓ͳͲ
    Nuxt.js͕ؔ༩͠ͳ͍෦෼ͷϧʔϧࡦఆ͸ผ్
    ඞཁ
    ؀ڥج൫ͷαϙʔτɺن໿͕ඇৗʹڧྗ

    View Slide

  107. ՝୊఺
    • ॳظදࣔ଎౓ͷ஗͞
    • εϖοΫͷ௿͍୺຤Ͱݦஶʹ
    • ٕज़త੍໿
    • Angular.js1ܥ͸SSRΛαϙʔτ͍ͯ͠ͳ͍
    • Railsͷ্ʹ৐ͬͨϑϩϯτΤϯυ
    • ٕज़తෛ࠴
    • ίʔσΟϯάن໿
    • ίϯϙʔωϯτઃܭ
    ॳظදࣔ଎౓ͷ஗͞
    ٕज़త੍໿
    ٕज़తෛ࠴
    Nuxt.jsʹཔΕΔ෦෼ͱ͍͏
    ҙຯͰ͸˓ɻΩϟογϡͱ͔ը
    ૾ͷ࠷దԽͱ͔…
    ViewΛRails͔Β੾Γ཭͠ɺ
    Nuxt.js(Vue.js)ʹΑΓϞμϯͳ
    ؀ڥΛ࣮ݱɻ
    Nuxt.jsʹΑΓن໿Λɻ
    VuexͱAtomic DesignʹΑΓઃܭ
    ϧʔϧΛɻ
    ݱ࣌఺ͰͷධՁ

    View Slide

  108. ·ͱΊ
    ࠾༻ͯ͠Α͔ͬͨ

    ʙ note Nuxt.jsҠߦνʔϜҰಉ ʙ

    View Slide

  109. ϦϦʔεϊʔτެ։த
    URL: https://note.mu/noteeng/m/me7637ba82821
    RSS: https://note.mu/noteeng/m/me7637ba82821/rss

    View Slide

  110. ͋Γ͕ͱ͏͍͟͝·ͨ͠
    ΤϯδχΞืूͯ͠·͢
    ٸ੒௕தͷʮnoteʯͷϑϩϯτΤϯυΛ࡮৽͢ΔΤϯδχΞΛืूʂ
    https://www.wantedly.com/projects/208206

    View Slide