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

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

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

Transcript

1. ͍ͷ͏͑ͨ͘΍ʢ͓͍ͪΌΜʣ
   (.0
   ϖύϘגࣜձࣾ
   
   7VFKT
   5PLZP
   WNFFUVQlz ͓࢓ࣄͰ
   /VYUKT
   Λ ࢖͏͔ݕ౼ͨ͠࿩
2. ϑϩϯτΤϯυΤϯδχΞ ͍ͷ͏͑ͨ͘΍
   
   ͓͍ͪΌΜ
   !JOPVFUBLVZB 7VFKT
   "OHVMBS
   3BJMT ൴ঁ͔Β͸ɺ͓͍ͪΌΜͱݺ͹Ε͍ͯ·͢
4. ೥݄๭೔
5. Y
6. Ͳ͏΍ܾͬͯΊͨΒ
   ͍͍ΜͩΖ͏ʁ
7. ຊ೔ͷΰʔϧ
8. ຊ೔ͷΰʔϧ αʔόʔαΠυϨϯμϦϯάΛͲͷΑ͏ʹ ͢Δ͔ΛܾΊΔʹࢸͬͨɺݕ౼ͷେ࿮͕ڞ ༗͞ΕΔ͜ͱ
   /VYUKT
   ͷϝϦοτɾσϝϦοτΛؚΉɺ ݕ౼ͷৄࡉ͕ڞ༗͞ΕΔ͜ͱ
9. ݕ౼ͷେ࿮
10. ݕ౼ͷେ࿮ w443ʢαʔόʔαΠυϨϯμϦϯάʣඞཁʁ
    wڱٛͷ
    443
    WT
    ϓϦϨϯμϦϯά
    w/VYUKT
    WT
    WVFTFSWFSSFOEFSFS
11. ຊ౰ʹ
    443
    ͕ඞཁʁ w4&0
    wιʔγϟϧωοτϫʔΫ
    wʢॳظදࣔͷύϑΥʔϚϯεӠʑ͸Ұ୴ແࢹͨ͠ʣ
12. ϓϦϨϯμϦϯά
13. QSFSFOEFSTQBQMVHJO w8FCQBDL
    ͷϓϥάΠϯ
    w7VFKT
    αʔόʔαΠυϨϯμϦϯάΨΠυ ʢIUUQTTTSWVFKTPSHʣͰ΋঺հ
    wTTSWVFKTPSH
    ͸຋༁΋׬ྃؒۙ
14. QSFSFOEFSJP w1SFSFOEFSJOH
    ͯ͘͠ΕΔ΢ΣϒαʔϏε
    wIUUQTFSWFDFQSFSFOEFSJPIUUQT XXXHPPHMFDPN
15. OFUMJGZ w1SFSFOEFSJOH
    ͯ͘͠ΕΔ
    $%/
    wIUUQTWVFKTUFNQMBUFTHJUIVCJP XFCQBDLQSFSFOEFSIUNM
    Ͱ঺հ͞Ε͍ͯͨ
16. 443
    WT
    ϓϦϨϯμϦϯά w
    BCPVU
    ͳͲ͚ͩͳΒϓϦϨϯμϦϯάͰे෼
    wଟ਺ͷ঎඼σʔλͷߋ৽Λ͙͢ʹ൓ө͍ͤͨ͞
    wಉ͡঎඼ϖʔδͰ΋ϢʔβʔʹΑͬͯݟͤΔ಺༰ ͕ҟͳΔ
17. /VYUKT
    WT
    WVFTFSWFSSFOEFSFS
18. ݕ౼ͷେ࿮ʢ࠶ܝʣ w443ʢαʔόʔαΠυϨϯμϦϯάʣඞཁʁ
    wڱٛͷ
    443
    WT
    ϓϦϨϯμϦϯά
    w/VYUKT
    WT
    WVFTFSWFSSFOEFSFSʢΠϚίίʣ
19. /VYUKT
    WT
    WVFTFSWFSSFOEFSFS 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
    ʹूத͍ͨ͠
26. QBHFTJOEFYWVF
    
    
    QBHFTBCPVUWVF
    
    BCPVU
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
    ͕ղܾͯ͘͠ ΕΔ໰୊ͱͦͷτϨʔυΦ ϑΛۛຯ