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

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

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

೥݄๭೔

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

ຊ೔ͷΰʔϧ

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

ݕ౼ͷେ࿮

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

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

ϓϦϨϯμϦϯά

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

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

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

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

/VYUKTWT WVFTFSWFSSFOEFSFS

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

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

/VYUKTΛ࢖͏ϝϦοτ

WVFIBDLFSOFXT IUUQTWVFIOOPXTI

[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 

├── 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 

WVFʹूத͍ͨ͠

QBHFTJOEFYWVF QBHFTBCPVUWVFBCPVU

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

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

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

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

/VYUKTσϝϦοτ͸ʁ

ͦͷલʹ/VYUKTͷ ࢓૊ΈΛཧղ͠Α͏

[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

// .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" } ] 

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

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

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

ͱ͍͏τϨʔυΦϑ

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

·ͱΊ

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

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

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

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

More Decks by INOUE Takuya

Other Decks in Programming

Featured

Transcript