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

by INOUE Takuya

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

೥݄๭೔

Slide 5

Slide 5 text

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

ຊ೔ͷΰʔϧ

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

ݕ౼ͷେ࿮

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

ϓϦϨϯμϦϯά

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

/VYUKTWT WVFTFSWFSSFOEFSFS

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

/VYUKTΛ࢖͏ϝϦοτ

Slide 21

Slide 21 text

WVFIBDLFSOFXT IUUQTWVFIOOPXTI

Slide 22

Slide 22 text

[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 

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

WVFʹूத͍ͨ͠

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

QBHFTJOEFYWVF QBHFTBCPVUWVFBCPVU

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

/VYUKTσϝϦοτ͸ʁ

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

[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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

ͱ͍͏τϨʔυΦϑ

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

·ͱΊ

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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