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

お仕事で Nuxt.js を使うか検討した話 / decision about whether to use nuxtjs

お仕事で Nuxt.js を使うか検討した話 / decision about whether to use nuxtjs

Vue.js Tokyo v-meetup="#4" の発表資料

ブログにこの発表を補足するエントリーを書きました
http://blog.inouetakuya.info/entry/2017/07/11/211829

Af07bd495bf9d1c5ada34ed221671624?s=128

INOUE Takuya

July 07, 2017
Tweet

Transcript

  1. ͍ͷ͏͑ͨ͘΍ʢ͓͍ͪΌΜʣ(.0ϖύϘגࣜձࣾ 7VFKT5PLZPWNFFUVQlz ͓࢓ࣄͰ/VYUKTΛ ࢖͏͔ݕ౼ͨ͠࿩

  2. ϑϩϯτΤϯυΤϯδχΞ ͍ͷ͏͑ͨ͘΍͓͍ͪΌΜ!JOPVFUBLVZB 7VFKT "OHVMBS 3BJMT ൴ঁ͔Β͸ɺ͓͍ͪΌΜͱݺ͹Ε͍ͯ·͢

  3. None
  4. ೥݄๭೔

  5. Y

  6. Ͳ͏΍ܾͬͯΊͨΒ ͍͍ΜͩΖ͏ʁ

  7. ຊ೔ͷΰʔϧ

  8. ຊ೔ͷΰʔϧ αʔόʔαΠυϨϯμϦϯάΛͲͷΑ͏ʹ ͢Δ͔ΛܾΊΔʹࢸͬͨɺݕ౼ͷେ࿮͕ڞ ༗͞ΕΔ͜ͱ /VYUKTͷϝϦοτɾσϝϦοτΛؚΉɺ ݕ౼ͷৄࡉ͕ڞ༗͞ΕΔ͜ͱ

  9. ݕ౼ͷେ࿮

  10. ݕ౼ͷେ࿮ w443ʢαʔόʔαΠυϨϯμϦϯάʣඞཁʁ wڱٛͷ443WTϓϦϨϯμϦϯά w/VYUKTWTWVFTFSWFSSFOEFSFS

  11. ຊ౰ʹ443͕ඞཁʁ w4&0 wιʔγϟϧωοτϫʔΫ wʢॳظදࣔͷύϑΥʔϚϯεӠʑ͸Ұ୴ແࢹͨ͠ʣ

  12. ϓϦϨϯμϦϯά

  13. QSFSFOEFSTQBQMVHJO w8FCQBDLͷϓϥάΠϯ w7VFKTαʔόʔαΠυϨϯμϦϯάΨΠυ ʢIUUQTTTSWVFKTPSHʣͰ΋঺հ wTTSWVFKTPSH͸຋༁΋׬ྃؒۙ

  14. QSFSFOEFSJP w1SFSFOEFSJOHͯ͘͠ΕΔ΢ΣϒαʔϏε wIUUQTFSWFDFQSFSFOEFSJPIUUQT XXXHPPHMFDPN

  15. OFUMJGZ w1SFSFOEFSJOHͯ͘͠ΕΔ$%/ wIUUQTWVFKTUFNQMBUFTHJUIVCJP XFCQBDLQSFSFOEFSIUNMͰ঺հ͞Ε͍ͯͨ

  16. 443WTϓϦϨϯμϦϯά w BCPVUͳͲ͚ͩͳΒϓϦϨϯμϦϯάͰे෼ wଟ਺ͷ঎඼σʔλͷߋ৽Λ͙͢ʹ൓ө͍ͤͨ͞ wಉ͡঎඼ϖʔδͰ΋ϢʔβʔʹΑͬͯݟͤΔ಺༰ ͕ҟͳΔ

  17. /VYUKTWT WVFTFSWFSSFOEFSFS

  18. ݕ౼ͷେ࿮ʢ࠶ܝʣ w443ʢαʔόʔαΠυϨϯμϦϯάʣඞཁʁ wڱٛͷ443WTϓϦϨϯμϦϯά w/VYUKTWTWVFTFSWFSSFOEFSFSʢΠϚίίʣ

  19. /VYUKTWTWVFTFSWFSSFOEFSFS w/VYUKTΛ࢖͏ϝϦοτ w/VYUKTΛ࢖͏σϝϦοτ

  20. /VYUKTΛ࢖͏ϝϦοτ

  21. WVFIBDLFSOFXT IUUQTWVFIOOPXTI

  22. [vue-hackernews-2.0]$ tree -I node_modules
 ├── build
 │ ├── setup-dev-server.js
 │

    ├── vue-loader.config.js
 │ ├── webpack.base.config.js
 │ ├── webpack.client.config.js
 │ └── webpack.server.config.js
 ├── package.json
 ├── server.js
 ├── src
 ├── src
 │ ├── App.vue
 │ ├── app.js
 │ ├── entry-client.js
 │ ├── entry-server.js
 │ ├── components
 │ │ ├── Foo.vue

  23. ├── src
 │ ├── App.vue
 │ ├── app.js
 │ ├──

    entry-client.js
 │ ├── entry-server.js
 │ ├── components
 │ │ ├── Foo.vue
 [vue-hackernews-2.0]$ tree -I node_modules
 ├── build
 │ ├── setup-dev-server.js
 │ ├── vue-loader.config.js
 │ ├── webpack.base.config.js
 │ ├── webpack.client.config.js
 │ └── webpack.server.config.js
 ├── package.json
 ├── server.js
 ├── src

  24.  WVFʹूத͍ͨ͠

  25. None
  26. QBHFTJOEFYWVF QBHFTBCPVUWVFBCPVU

  27. ֤ϥΠϒϥϦΛڠௐͯ͠ಈ͔͢໾ ׂ΋୲ͬͯ͘ΕΔ

  28. /VYUKTͷओͳػೳ wαʔόʔαΠυϨϯμϦϯά wϧʔςΟϯάʢ7VF3PVUFSʣ w7VFYετΞʢඞਢͰ͸ͳ͍ʣ wඇಉظσʔλͷऔΓѻ͍ w)FBEཁૉͷ؅ཧʢ7VF.FUBʣ

  29. /VYUKTͷओͳػೳ wͦͷଞ8FCQBDLͱ૊Έ߹Θͤͯ΍ΔΞϨίϨ wίʔυΛࣗಈతʹ෼ׂ͢Δ͜ͱ w&4&4ͷτϥϯεύΠϨʔγϣϯ w4"44 -&44 4UZMVTͳͲͷαϙʔτ w։ൃϞʔυʹ͓͚ΔϗοτϦϩʔσΟϯά

  30. Ϩʔϧʹ৐͓͚ͬͯ͹ɺ ͋ͱ͸ΠΠײ͡ʹ /VYUKT͕΍ͬͯ͘ΕΔ

  31. /VYUKTσϝϦοτ͸ʁ

  32. ͦͷલʹ/VYUKTͷ ࢓૊ΈΛཧղ͠Α͏

  33. [nuxt-starter]$ tree .nuxt .nuxt/
 ├── App.vue ├── client.js
 ├── components/


    ├── dist/
 │ ├── img/ │ ├── style.css
 │ └── nuxt.bundle.js
 ├── index.js ├── middleware.js ├── router.js ├── server.js
 └── utils.js
  34. // .nuxt/router.js import Vue from 'vue' import Router from 'vue-router'

    Vue.use(Router) export default new Router({ routes: [ { path: “/", component: _66d962ba, name: "index" }, { path: “/about", component: _a6491844, name: “about" } ]

  35. /VYUKTͷ࢓૊Έ wϑΝΠϧߏ଄΍ઃఆΛಡΈऔΔ wϏϧυ࣌ʹOVYUʹग़ྗ w΄ͱΜͲͷઃఆ͸্ॻ͖Ͱ͖Δ

  36. /VYUKT͕࠾༻͍ͯ͠Δ ϥΠϒϥϦΛ·Δͬͱஔ ͖׵͑Δͱ͔͸ΩϏ͍͠ ʢྫMSVDBDIFʣ

  37. ෆ۩߹΍ҙਤ͠ͳ͍ڍಈ Λ͢Δͱ͖ʹ͸/VYUKT ͷࡉ෦Λ௥͏ඞཁ͕͋Δ

  38. ͱ͍͏τϨʔυΦϑ

  39. ݁Ռɺ/VYUKTͷ ࠾༻Λݟૹͬͨ

  40. ·ͱΊ

  41. ຊ౰ʹ443͕ඞཁͳͷ͔ɺ ϓϦϨϯμϦϯά౳ͷ ଞͷखஈͰ୅ସͰ͖ͳ͍͔

  42. /VYUKTͷ࢓૊ΈΛཧղ͠ ͭͭɺ/VYU͕ղܾͯ͘͠ ΕΔ໰୊ͱͦͷτϨʔυΦ ϑΛۛຯ