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. ෱Ҫ ྽ (@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
  2. ։ൃ౰࣌ͷϑϩϯτΤϯυ৘੎ 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͕ओྲྀ)
  3. ݱࡏͷٕज़ελοΫ • Frontend • Angular.js 1ܥ • CoffeeScript • HAML

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

    • Backend • Ruby on Rails 4.2ܥ • Capistrano • Infrastructure • AWS Client Side Rendering only
 Single Page Application
  5. ՝୊఺ • ॳظදࣔ଎౓ͷ஗͞ • εϖοΫͷ௿͍୺຤Ͱݦஶʹ • ٕज़త੍໿ • Angular.js1ܥ͸SSRΛαϙʔτ͍ͯ͠ͳ͍ •

    Railsͷ্ʹ৐ͬͨϑϩϯτΤϯυ • ٕज़తෛ࠴ • ίʔσΟϯάن໿ • ίϯϙʔωϯτઃܭ
  6. ٕज़બఆཁ݅ͷચ͍ग़͠ • Server Side Rendering (Ҏ߱SSR) • ֶश/ӡ༻ίετ • σβΠφʔ΁ͷ഑ྀ

    • ΨνͳϑϩϯτΤϯυΤϯδχΞͰͳͯ͘΋ϝϯςφ ϒϧʹ • ։ൃ/ίϛϡχςΟͷ׆ൃ͞
  7. Vue.jsΛ࠾༻ͨ͠ཧ༝ᶇ • ͱ͋Δ@kitak͞Μͱ͍͏ํ • ࣮૷ͷQ & A • ઃܭͷαϙʔτ •

    ϋϯζΦϯ։࠵ʹΑΔجૅ஌ࣝ޲্ Vue.jsͷΤΩεύʔτ͕ίϯαϧʹ
  8. Nuxt.jsΛ࠾༻ͨ͠ཧ༝ᶄ • Vue.jsͷΤίγεςϜΛϏϧτΠϯ • Vue Router, Vuex, Vue Server Renderer,

    vue-meta • Ϗϧυ(webpack)͸Α͠ͳʹ • minify, jsϑΝΠϧ෼ׂ, cssͷΠϯϥΠϯԽ, 
 τϥϯεύΠϧ, preload etc… Ϟμϯͳ؀ڥ͕खʹೖΔ
  9. 2018೥11݄3೔ஈ֊Ͱͷਐḿ • શମͷن໛ײ • ίϯϙʔωϯτ਺: 216 • LOC: 43672 •

    *.vue: 36153 • *.js: 6823 • *.scss: 696 more... (2018/4 ~)
  10. WebPageTestͷൺֱ Angular.js൛ Nuxt.js൛ ৚݅ From: Tokyo, Japan - EC2 -

    Chrome - Emulated iPhone X - 3GFast - Mobile Start Render = ϨϯμϦϯά͕։࢝͞ΕΔ·Ͱʹ͔͔Δ࣌ؒ Speed Index = ίϯςϯπ͕໨ʹݟ͑Δঢ়ଶʹͳΔ·Ͱͷ࣌ؒ
  11. Vuexͷओͳϧʔϧ • ϞδϡʔϧϞʔυΛ࠾༻ • mutaions/actions/getttersͷλΠϓʹ͸ఆ਺Λ࢖༻ • grepability • ΤσΟλͷิ׬ •

    ετΞʹঢ়ଶΛ࣋ͨͤΔ͔Ͳ͏͔ͷ൑அج४ A. ίϯϙʔωϯτΛ௒͑ͯڞ༗͍ͨ͠΋ͷ͕͋Δ
 (͍ΘΏΔόέπϦϨʔରࡦ) B. Serviceత(ॲཧΛ·ͱΊΔ)ͳ࢖͍ํ C. APIݺͼग़͠
  12. ίϯϙʔωϯτͷՄࢹԽ • Ұ౓࠳ંͨ͠աڈ • Nuxt.jsͱͷઃఆपΓͷޓ׵ੑ • ֤ίϯϙʔωϯτͷमਖ਼ʹ߹Θͤͯετʔ ϦʔΛϝϯςφϯε͢Δͷ͕໘౗ • VuexϞδϡʔϧ΍௨৴पΓͷελϒԽ

    Nuxt.jsͱͷઃఆपΓͷޓ׵ੑ Storybook v4.0.0͸ Nuxt.js v2Ͱ͍͚Δ • ετʔϦʔΛϝϯςφϯε͢Δͷ͕େม • VuexϞδϡʔϧ΍௨৴पΓͷελϒԽ ର৅ΛAtomsͱMoleculesʹߜΔ
  13. ෼ੳ݁ՌΛड͚ͯ • highlight.js • codeͷγϯλοΫεϋΠϥΠτʹར༻ • શ෦ೖΓͩͱ700KBͱ͔ͳΓͷॏྔڃ • ରԠݴޠΛߜͬͯ57KBʹ •

    moment.js • λΠϜκʔϯͷߟྀ͸ෆཁͩͬͨͷͰܰྔͳdate-fns΁ • dayjs͸͞ΒʹܰྔͳͷͰͦͪΒͰ΋ྑ͍͔΋? • lodash.js • PolyfillͰे෼ΧόʔͰ͖ͦ͏ͳͷͰআ֎༧ఆ

  14. AWS Lambda • αʔόͷϓϩϏδϣχϯάͳ͠ͰίʔυΛ࣮ߦ • Function as a Service •

    ରԠݴޠ: Node.js, Python, Go, Java, C# • ಛఆͷΠϕϯτΛτϦΨʔͱ࣮ͯ͠ߦՄೳ • ϦΫΤετ਺ʹԠͯ͡ΦʔτεέʔϦϯά • ैྔ՝ۚ
  15. ࠾༻ͷϞνϕʔγϣϯ • ౰ॳ͸EC2 + Node.js + pm2Ͱӡ༻͍ͯͨ͠ ◦ Node.jsͷӡ༻ϊ΢ϋ΢0 ◦

    Կ౓͔ಥવpm2͕མͪͨΓͱෆ҆Λ๊͍͑ͯͨ ◦ AWS LambdaͷػӡͰ͸ʁͱ͍͏ࡶஊ͔Βελʔτ
  16. ·ͱΊ • ϝϦοτ • طଘͷݴޠ΍ϑϨʔϜϫʔΫͷ੍໿ʹറ ΒΕͳ͍ • υοάϑʔσΟϯά͕༰қʹͰ͖Δ • ϩʔϧόοΫ͕༰қʹͰ͖Δ

    • σϝϦοτ • ׬શҠߦ͢Δ·Ͱ͸2ॏϝϯςʹͳΓ͏Δ ύε(URL)ϕʔεͰখ͘͞Ҡߦ͢Δͷ͸༗ޮ
  17. ·ͱΊ • SSR͕ඞཁͳΒಋೖ͠ͳ͍ख͸ͳ͍ • ಋೖ͸؆୯ֶ͕ͩश/ӡ༻ίετ͸͕͋Δ • ϢχόʔαϧରԠ • Node.jsͷӡ༻ •

    τϨʔυΦϑ͕ڐ༰Ͱ͖ΔͳΒAWS Lambda͸༗༻ • SSR͕ຊ౰ʹඞཁ͔Ͳ͏͔͸ཁݕ౼ • SPAϞʔυ (mode: ‘spa’) • ੩తαΠτ (nuxt generate) SSRͷಋೖ͸ຊ౰ʹ؆୯
  18. ·ͱΊ • ίετΛ͔͚ͣʹϞμϯͳ։ൃ؀ڥ͕खʹೖΔ
 ⇢ ͙͢ʹ૸Γग़ͤΔ • ᙱ͍ͱ͜Ζʹख͕ಧ͘ͷͰؾ࣋ͪΑ͘ίʔυΛ ॻ͚Δ ⇢ ຊ࣭తͳ։ൃʹूதͰ͖Δ

    • Vuexͷऔѻ΍ίϯϙʔωϯτͷཻ౓ͳͲ Nuxt.js͕ؔ༩͠ͳ͍෦෼ͷϧʔϧࡦఆ͸ผ్ ඞཁ ؀ڥج൫ͷαϙʔτɺن໿͕ඇৗʹڧྗ
  19. ՝୊఺ • ॳظදࣔ଎౓ͷ஗͞ • εϖοΫͷ௿͍୺຤Ͱݦஶʹ • ٕज़త੍໿ • Angular.js1ܥ͸SSRΛαϙʔτ͍ͯ͠ͳ͍ •

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