Nuxt.js とは何か / What is nuxtjs

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

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

/VYUKTJTԿʁ

<OⓞLTU> )PXUPQSPOPVODF/VYU u*TTVFuOVYUOVYUKT IUUQTHJUIVCDPNOVYUOVYUKTJTTVFT

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

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

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

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

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

WVFʹूத͍ͨ͠

/VYUKTͷొ৔

[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

QBHFTJOEFYWVF QBHFTBCPVUWVFBCPVU

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

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

WVFʹूதͰ͖Δ

ຊ೔ͷΰʔϧ

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

/VYUKTͷओͳػೳ

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

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

OVYUHFOFSBUF

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

QBHFTJOEFYWVF QBHFTBCPVUWVF EJTUJOEFYIUNM EJTUBCPVUJOEFYIUNM

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

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

$PNJOHTPPO BCPVUXIFOJUDBOCFSFMFBTFE 5IBOLZPVu*TTVFuOVYUOVYUKT IUUQTHJUIVCDPNOVYUOVYUKTJTTVFT

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

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

·ͱΊ

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

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

Nuxt.js とは何か / What is nuxtjs

Nuxt.js とは何か / What is nuxtjs

More Decks by INOUE Takuya

Other Decks in Programming

Featured

Transcript