Slide 1
Slide 1 text
͍ͷ͏͑ͨ͘ʢ͓͍ͪΌΜʣ(.0ϖύϘגࣜձࣾ
7VFKT5PLZPWNFFUVQ lz
͓ࣄͰ/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
Y
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
QBHFTBCPVUWVF BCPVU
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͕ղܾͯ͘͠
ΕΔͱͦͷτϨʔυΦ
ϑΛۛຯ