Nuxt.js とは何か / What is nuxtjs

by INOUE Takuya

Slide 1

Slide 1 text

6OJWFSTBM7VFKT"QQMJDBUJPOT ͍ͷ͏͑ͨ͘΍ʢ͓͍ͪΌΜʣ(.0ϖύϘגࣜձࣾ 7VFKT5PLZPWNFFUVQlz /VYUKT

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

/VYUKTJTԿʁ

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

)PXUPQSPOPVODF/VYU u*TTVFuOVYUOVYUKT IUUQTHJUIVCDPNOVYUOVYUKTJTTVFT

Slide 6

Slide 6 text

/VYUKT͸Ϣχόʔαϧͳ 7VFKTΞϓϦέʔγϣϯΛߏங ͢ΔͨΊͷϑϨʔϜϫʔΫͰ͢

Slide 7

Slide 7 text

Ϣχόʔαϧͳ7VFKT ΞϓϦέʔγϣϯͷྫ

Slide 8

Slide 8 text

WVFIBDLFSOFXT IUUQTWVFIOOPXTI

Slide 9

Slide 9 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  │ ├── client-entry.js  │ ├── server-entry.js  │ ├── components  │ │ ├── Foo.vue 

Slide 10

Slide 10 text

├── src  │ ├── App.vue  │ ├── app.js  │ ├── client-entry.js  │ ├── server-entry.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 11

Slide 11 text

ຊདྷ΍Γ͔ͨͬͨ ͜ͱ͸ʁ

Slide 12

Slide 12 text

WVFʹूத͍ͨ͠

Slide 13

Slide 13 text

/VYUKTͷొ৔

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

%&.0

Slide 16

Slide 16 text

[nuxt-starter]$ tree -I node_modules  ├── assets  ├── components  │ └── Footer.vue  ├── layouts  │ ├── default.vue  │ └── error.vue  ├── nuxt.config.js  ├── pages ├── pages  │ ├── about.vue  │ └── index.vue  └── static  └── favicon.ico

Slide 17

Slide 17 text

QBHFTJOEFYWVF QBHFTBCPVUWVFBCPVU

Slide 18

Slide 18 text

├── pages  │ ├── about.vue  │ └── index.vue  └── static  └── favicon.ico [nuxt-starter]$ tree -I node_modules  ├── assets  ├── components  │ └── Footer.vue  ├── layouts  │ ├── default.vue  │ └── error.vue  ├── nuxt.config.js  ├── pages

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

WVFʹूதͰ͖Δ

Slide 21

Slide 21 text

ຊ೔ͷΰʔϧ

Slide 22

Slide 22 text

ຊ೔ͷΰʔϧ /VYUKT͕ղܾ͢Δ໰୊ʹ͍ͭͯڞ༗͞ΕΔ͜ͱ /VYUKTͰͰ͖Δ͜ͱ͕ڞ༗͞ΕΔ͜ͱ ʮ/VYUKTΑͦ͞͏ʯʮ࢖ͬͯΈ͍ͨʯͳͲ͕ɺ πΠʔτҎ্؍ଌ͞ΕΔ͜ͱ

Slide 23

Slide 23 text

/VYUKTͷओͳػೳ

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

OVYUHFOFSBUF

Slide 27

Slide 27 text

WVFΛ࢖ͬͨ ੩తϑΝΠϧδΣωϨʔλ

Slide 28

Slide 28 text

QBHFTJOEFYWVF QBHFTBCPVUWVF EJTUJOEFYIUNM EJTUBCPVUJOEFYIUNM

Slide 29

Slide 29 text

OVYUHFOFSBUFͷྫʢOVYUKTPSHʣ "1*͔ΒσʔλΛऔಘ ͯ͠ɺͦͷσʔλΛ༻ ͍ͯ੩తϑΝΠϧΛੜ ੒͢Δ౳ͷ༻్ʹ͸ద ͍ͯͦ͠͏

Slide 30

Slide 30 text

'"2

Slide 31

Slide 31 text

2όʔδϣϯ͸ ͍ͭϦϦʔε༧ఆͰ͔͢ʁ

Slide 32

Slide 32 text

$PNJOHTPPO BCPVUXIFOJUDBOCFSFMFBTFE 5IBOLZPVu*TTVFuOVYUOVYUKT IUUQTHJUIVCDPNOVYUOVYUKTJTTVFT

Slide 33

Slide 33 text

2ެࣜυΩϡϝϯτͷ ೔ຊޠ༁͸͋Γ·͔͢ʁ

Slide 34

Slide 34 text

຋༁͠ͱ͖·ͨ͠ <8*1>+BQBOFTFUSBOTMBUJPOCZJOPVFUBLVZBu1VMM3FRVFTUuOVYUEPDT IUUQTHJUIVCDPNOVYUEPDTQVMM

Slide 35

Slide 35 text

·ͱΊ

Slide 36

Slide 36 text

·ͱΊ w೥ʹͳͬͯ΋443͕ඞཁͳέʔε͕͋Δ wϢχόʔαϧΞϓϦέʔγϣϯΛͭ͘Δͷ͸໘౗ͳ͜ ͱ͕ଟ͍ w/VYUKTͷϨʔϧʹ৐Ε͹ɺ໘౗͔Βղ์͞Εͯɺ 7VFίϯϙʔωϯτͷ࡞੒ʹूதͰ͖Δ

Slide 37

Slide 37 text

·ͱΊ w/VYUKTʹ͸੩తϑΝΠϧੜ੒ػೳ΋͋Δ w(JUIVC1BHFTͳͲͷ੩తϑΝΠϧͷϗεςΟϯά αʔϏε΋ར༻Ͱ͖Δ wόʔδϣϯ͕΋͏͙͢ϦϦʔε͞Εͦ͏ wެࣜυΩϡϝϯτͷ೔ຊޠ༁΋ۙ೔ϦϦʔε༧ఆ