Slide 1
Slide 1 text
όʔνʔ(.01&1"#0JOD
1)1ΧϯϑΝϨϯε
1)1FSͷͨΊͷ7VFKTೖͱ
7VFKTͷະདྷ
Slide 2
Slide 2 text
1)1FS
(.0ϖύϘάʔϖνʔϜ
ιϑτΣΞΤϯδχΞ
Ξχϝ෦෦
όʔνʔ!IZQFSNLU
IUUQCMPHIZQFSNLUKQ
Slide 3
Slide 3 text
ϗʔϜϖʔδ࡞αʔϏεάʔϖ
IUUQTHPPQFKQ
Slide 4
Slide 4 text
ΞχϝͷϨϏϡʔαΠτʮ͋ʹ͜Εʯ
IUUQTXXXBOJLPSFKQ
Slide 5
Slide 5 text
ࠓ͢͜ͱ
wഎܠ
w7VFKTೖ
w֤छจ๏ͷհ
w7VFKTίϛϡχςΟ
w7VFKTͷະདྷ
w·ͱΊ
Slide 6
Slide 6 text
എܠ
Slide 7
Slide 7 text
1)1ΧϯϑΝϨϯεͰͳͥ7VFKT
Slide 8
Slide 8 text
ཧ༝͕̎ͭ͋Γ·͢
Slide 9
Slide 9 text
ᶃ 1)1FSͱͯ͠7VFKTΛԠԉ͍ͨ͠ʂ
ᶄૉΒ͍͠ϥΠϒϥϦͳͷͰօ͞Μʹ
ͬͯ΄͍͠ʂ
Slide 10
Slide 10 text
-BSBWFM͔Β7VFKT͕ެࣜϑϩϯτΤϯυϥΠϒϥϦʹ
ཧ༝̍
Slide 11
Slide 11 text
ϑϩϯτΤϯυॳ৺ऀ ࢲ
ͰษڧΛ࢝Ίͯ
͙͢ʹίʔυΛॻ͖࢝ΊΔ͜ͱ͕ग़དྷͨ
ཧ༝̎
Slide 12
Slide 12 text
ࢲͷ+BWB4DSJQUϨϕϧ
w݄࣌
wK2VFSZͰ͔͠+BWB4DSJQUΛॻ͍ͨ͜ͱ͕ͳ͘ɺ࠷ۙͷ·͙Δ͠
͍มԽʹযΓΛײ͡Δ ؾͮ͘ͷ͍
w݄ɿ+BWB4DSJQUͷجૅΛษڧͨ͢͠ΊຊΛങ͍ړΔ
w݄ɿ"OHVMBS+4YͷษڧΛຊΛݟͳ͕Β࢝ΊΔ͕࠳ંPS[
Slide 13
Slide 13 text
݄ʹ7VFKTͱग़ձ͏
Slide 14
Slide 14 text
7VFKTͷษڧΛ࢝ΊΔ
wಥવόϦσʔγϣϯϥΠϒϥϦWVFWBMJEBUPSυΩϡϝϯτͷ༁Λ
͢Δ
w݄7VFKT5PLZP.FFUVQlzͰʮ༁͔Β࢝ΊΔ
7VFKTೖʯΛൃද
IUUQXXXTMJEFTIBSFOFUIZQFSNLUWVFKT
Slide 15
Slide 15 text
݄ձࣾͷ։ൃ߹॓ͰࣾใγεςϜΛ7VFKTͰ։ൃ
wใͷӾཡɾߘɺ͍͍ͶɺԻಡΈ্͛ػೳ
w։ൃ࣌7VFKTܥWVFSPVUFSWVFSFTPVSDFWVFJGZ
wϦϦʔεޙʹόʔδϣϯΞοϓ
Slide 16
Slide 16 text
%FNP
Slide 17
Slide 17 text
7VFKTͱ
Slide 18
Slide 18 text
7VFKTͱ
wϢʔβʔΠϯλʔϑΣΠεΛߏங͢ΔͨΊͷϓϩάϨογϒϑϨʔϜ
ϫʔΫ
wنʹԠͯ͡ՃͰ͖Δؔ࿈ϥΠϒϥϦ
wγϯϓϧͳ"1*
wϑϧελοΫͰͳ͍
Slide 19
Slide 19 text
ਓؾͷཧ༝
wγϯϓϧͳ"1*͔ͭ؆୯ͳςϯϓϨʔτͰֶशίετ͕͍
wίϯϙʔωϯτࢦͷ6*
wߴ͔ͭܰྔ LCNJOH[JQ࣌
wϨϯμϦϯά͕͍
Slide 20
Slide 20 text
7VFKTೖ ରԠ൛
Slide 21
Slide 21 text
͜Ε͚֮ͩ͑Ε͍͍ͩͨ0,ʂ
wಋೖํ๏
wσʔλόΠϯσΟϯά
wํόΠϯσΟϯά
wϦετϨϯμϦϯά
wϝιουͱΠϕϯτϨϯμϦϯά
w͖݅ϨϯμϦϯά
wΫϥεͱελΠϧͷόΠϯσΟϯά
wίϯϙʔωϯτ
wͷҙ
Slide 22
Slide 22 text
ಋೖํ๏
Slide 23
Slide 23 text
Ұ൪؆୯ͳಋೖํ๏
// index.html
Slide 24
Slide 24 text
σʔλόΠϯσΟϯάͱ7VFͷجૅ
Slide 25
Slide 25 text
มల։Ϛελογϡه๏Ͱ
\\NFTTBHF^^
Slide 26
Slide 26 text
σʔλόΠϯσΟϯά
// main.js
new Vue({
// ରΤϨϝϯτΛࢦఆ͠·͢
el: '#app',
// Vue ΠϯελϯεͷͨΊͷσʔλΦϒδΣΫτ
data: {
message: 'Hello PHPΧϯϑΝϨϯε2016ʂ'
}
});
// index.html
{{ message }}
ᶃ7VFΠϯελϯεΛ࡞
ᶄରΤϨϝϯτΛࢦఆ
ᶅσʔλΦϒδΣΫτΛઃఆ
ᶆςΩετల։͞ΕΔ
Slide 27
Slide 27 text
ϒϥβදࣔ݁Ռ
Slide 28
Slide 28 text
ํόΠϯσΟϯά
Slide 29
Slide 29 text
WNPEFMσΟϨΫςΟϒ
// index.html
{{ message }}
'PSNͷJOQVUUFYUBSFBΛEBUBΦϒδΣΫτͱํʹσʔλόΠϯ
σΟϯά͕ग़དྷΔ
Slide 30
Slide 30 text
ํόΠϯσΟϯά
// main.js
new Vue({
// ରΤϨϝϯτΛࢦఆ͠·͢
el: '#app',
// Vue ΠϯελϯεͷͨΊͷσʔλΦϒδΣΫτ
data: {
message: 'Hello PHPΧϯϑΝϨϯε2016ʂ'
}
});
// index.html
{{ message }}
ಉظ͞ΕΔ
༰ө͞ΕΔ
Slide 31
Slide 31 text
࣮ߦ͢Δͱ
ςΩετϘοΫεͷจࣈΛมߋ͢Δͱ
ϦΞϧλΠϜͰ্ʹө͞ΕΔ
Slide 32
Slide 32 text
ϦετϨϯμϦϯά
͜ΕΛ֮͑Δͱ̋̋Ұཡ͕ԿͰ࣮Մೳʹ
Slide 33
Slide 33 text
ϦετϨϯμϦϯά
// main.js
new Vue({
el: '#app',
data: {
items: [
{ title: 'PHP' },
{ title: 'Conference2016' },
{ title: '201611݄3ʢʣ' },
{ title: 'େా۠࢈ۀϓϥβ PiO' }
]
}
});
// index.html
ᶃྻΛࢦఆ͢Δ
ᶄϦετల։͞ΕΔ
- {{ item.title }}
Slide 34
Slide 34 text
ϒϥβදࣔ݁Ռ
Slide 35
Slide 35 text
WGPSσΟϨΫςΟϒ
// index.html
JUFNJOJUFNTܗࣜͰྻͷத
Λల։ͭͭ͠܁Γฦ͠ॲཧΛ࣮ߦ
͢Δ
- {{ item.title }}
Slide 36
Slide 36 text
7VFKTͰར༻Ͱ͖ΔσΟϨΫςΟϒҰཡ
WUFYU
WIUNM
WJG
WTIPX
WFMTF
WGPS
WFM
WPO
WCJOE
WNPEFM
WQSF
WDMPBL
WPODF
WSFG
EFQSFDBUFE EFQSFDBUFE
OFX
Slide 37
Slide 37 text
Α͘ར༻͢ΔσΟϨΫςΟϒҰཡ
WUFYU
WIUNM
WJG
WTIPX
WFMTF
WGPS
WFM
WPO
WCJOE
WNPEFM
WQSF
WDMPBL
WPODF
WSFG
EFQSFDBUFE EFQSFDBUFE
OFX
Slide 38
Slide 38 text
ϝιουͱΠϕϯτϨϯμϦϯά
͔͜͜Βͬͱಈ͖͕ग़ͯ͘Δʂ
Slide 39
Slide 39 text
WPOσΟϨΫςΟϒ
)5.-ཁૉʹΠϕϯτΛઃఆ͢Δ
͜ͱ͕ग़དྷ·͢
{{ message }}
Hi!
Hi!
Slide 40
Slide 40 text
ϝιουͱΠϕϯτϨϯμϦϯά
// main.js
new Vue({
el: '#app',
data: {
message: '∥౬෩࿊∥'
},
created: function() {
setTimeout(function() {
alert('ԡͤΑʔʂ');
}, 5000);
},
methods: {
push: function() {
this.message = 'ૌ͑ͯΔʂ';
}
}
});
// index.html
{{ message }}
ઈରʹԡ͢ͳΑʂ
ϥΠϑαΠΫϧϑοΫ
Πϯελϯε͕࡞͞ΕͨޙʹݺΕ·͢ɻ
ઈରʹԡ͢ͳΑʂ
Slide 41
Slide 41 text
ϝιουͱΠϕϯτϨϯμϦϯά
// main.js
new Vue({
el: '#app',
data: {
message: '∥౬෩࿊∥'
},
created: function() {
setTimeout(function() {
alert('ԡͤΑʔʂ');
}, 5000);
},
methods: {
push: function() {
this.message = 'ૌ͑ͯΔʂ';
}
}
});
// index.html
{{ message }}
ઈରʹԡ͢ͳΑʂ
ϝιουఆٛՕॴ
7VFKTͰϝιουఆٛ͜ͷNFUPET
ͱܾ·͍ͬͯ·͢ɻ
͜͜Ͱએݴͨ͠ϝιουΠϯελϯεɺ
ςϯϓϨʔτ͔Βݺͼग़ͤ·͢ɻ
ઈରʹԡ͢ͳΑʂ
Slide 42
Slide 42 text
࣮ߦ͢Δͱ
ඵޙʹදࣔ͞ΕΔ
ϘλϯΛԡ͢ͱϝοηʔδ͕มΘΔ
Slide 43
Slide 43 text
͖݅ϨϯμϦϯά
Slide 44
Slide 44 text
WJGσΟϨΫςΟϒ
݅ʹԠͯ͡ΤϨϝϯτͷදࣔɾ
ඇදࣔΛΓସ͑ΒΕΔ
༗ޮͳΞΧϯτͰ͢
Slide 45
Slide 45 text
WFMTFσΟϨΫςΟϒ͕ศརʂʂ
WJGͷޙʹஔ͢Δ͜ͱͰɺ
લͷWJGͷFMTFCMPDLͱͯ͠දࣔ
͞Ε·͢
Slide 46
Slide 46 text
͖݅ϨϯμϦϯά
// main.js
new Vue({
el: '#app',
data: {
isHandRaised: false
},
methods: {
raiseHand: function() {
this.isHandRaised = true;
}
}
});
// index.html
ϝιουͱมఆٛ
Ͳ͏ͧͲ͏ͧ
͓લΒͳ͍ͷ?͡Ό͋Զ͕ΔΑ!
͍͜͜Զ͕ΔΑ!
ɾɾɾ͡Ό͋Զ
͕ΔΑɻ
Slide 47
Slide 47 text
͖݅ϨϯμϦϯά
// main.js
new Vue({
el: '#app',
data: {
isHandRaised: false
},
methods: {
raiseHand: function() {
this.isHandRaised = true;
}
}
});
// index.html
Πϕϯτઃఆ
Ͳ͏ͧͲ͏ͧ
͓લΒͳ͍ͷ?͡Ό͋Զ͕ΔΑ!
͍͜͜Զ͕ΔΑ!
ɾɾɾ͡Ό͋Զ
͕ΔΑɻ
Slide 48
Slide 48 text
͖݅ϨϯμϦϯά
// main.js
new Vue({
el: '#app',
data: {
isHandRaised: false
},
methods: {
raiseHand: function() {
this.isHandRaised = true;
}
}
});
// index.html
EBUBมͷʹԠͯ͡
ϦΞΫςΟϒʹද͕ࣔ
Γସ͑ΒΕΔ
Ͳ͏ͧͲ͏ͧ
͓લΒͳ͍ͷ?͡Ό͋Զ͕ΔΑ!
͍͜͜Զ͕ΔΑ!
ɾɾɾ͡Ό͋Զ
͕ΔΑɻ
Slide 49
Slide 49 text
࣮ߦ͢Δͱ
Slide 50
Slide 50 text
ΫϥεͱελΠϧͷόΠϯσΟϯά
σβΠϯ͢Δ࣌ʹඞཁͱͳΓ·͢
Slide 51
Slide 51 text
WCJOEσΟϨΫςΟϒ
ΫϥεελΠϧΛಈతʹΓସ͑Δ͜ͱ͕ग़དྷ·͢ɻ
Slide 52
Slide 52 text
ΫϥεͱελΠϧͷόΠϯσΟϯά
// main.js
new Vue({
el: '#app',
data: {
isEvening: false
}
});
html, body { padding: 0px; margin: 0px; height:
100%; }
.container { width: 100%; height: 100%; }
.orange {
background-color: orange;
}
ݩʹ͢
ΫϥεͷόΠϯσΟϯάઃఆ
Slide 53
Slide 53 text
ϒϥβදࣔ݁Ռ
Slide 54
Slide 54 text
Ϋϥε͕Ճ͞ΕΔ
Slide 55
Slide 55 text
ίϯϙʔωϯτ
ಠࣗͷλά͕࡞ΕΔڧྗػೳ
Slide 56
Slide 56 text
ίϯϙʔωϯτ
w࠶ར༻ՄೳͳίʔυͷΧϓηϧԽ͕ग़དྷ·͢
{{ message }}
ϔομʔؔ࿈ͷ͍ιʔείʔυ
{{ message }}
ϑολʔؔ࿈ͷ͍ιʔείʔυ
Slide 57
Slide 57 text
ίϯϙʔωϯτ
// main.js
Vue.component('header-component', {
template: '
phpcon 2016
' }); Vue.component('footer-component', { template: '\
\ All Rights Reserved.\
'
});
new Vue({
el: '#app',
data: {
message: '?> NEXT'
}
});
// index.html
\ All Rights Reserved.\
{{ message }}
Slide 58
Slide 58 text
ϒϥβදࣔ݁Ռ
Slide 59
Slide 59 text
7VFKTͷҙ
͕ࣗϋϚͬͨ͜ͱͰ͢
Slide 60
Slide 60 text
ϋϚͬͨՕॴ
ϏϧυϑΝΠϧ͕̎छྨ͋Δ
Slide 61
Slide 61 text
CSPXTFSJGZFTSDKTNBJOKTPQVCMJDBQQKTΛ࣮ߦʂ
// src/js/main.js
var Vue = require('vue');
new Vue({
el: '#app',
data: {
message: 'Hello PHP Confference
2016!'
}
});
// index.html
{{ message }}
Slide 62
Slide 62 text
ϒϥβͰݟΔͱ
UFNQMBUFຢSFOEFSϑΝϯΫγϣϯ͕ఆٛ͞Ε͍ͯͳ͍ͱ
ౖΒΕͯ͠·͏ɾɾɾɾ
Slide 63
Slide 63 text
ϏϧυϑΝΠϧ͕̎ͭ͋Δ
w͔Β̎ͭʹ͔Εͨ
wελϯυΞϩϯ൛ɿ)5.-ίϯύΠϥଂɺ7VFYܥͱಉ͡ɻ
wϥϯλΠϜݶఆϏϧυ൛ɿ)5.-ίϯύΠϥແ͠ɻOQNͰσϑΥ
ϧτͰͪ͜ΒΛग़ྗɻ
Slide 64
Slide 64 text
ճආํ๏ެ͔ࣜΒఏࣔ͞Ε͍ͯΔ
Slide 65
Slide 65 text
BMJBTJGZͰSFRVJSF࣌ʹελϯυΞϩϯ൛Λ༻͢ΔΑ͏ʹௐ
{
"scripts": {
"build": "browserify -e src/js/main.js -o public/app.js"
},
"browserify": {
"transform": [
"aliasify"
]
},
"aliasify": {
"aliases": {
"vue": "vue/dist/vue.js"
}
},
"dependencies": {
"vue": "^2.0.3"
},
"devDependencies": {
"aliasify": "^2.0.0"
}
}
͕͜͜ϙΠϯτʂ
Slide 66
Slide 66 text
࠶Ϗϧυ͢͠ͱΤϥʔແ͘දࣔ͞Ε·͢
Slide 67
Slide 67 text
جຊจ๏͔͚ͬͨͲɺ
Ͳ͜Ͱใऩू͢Ε͍͍ͷ͔ʁ
Slide 68
Slide 68 text
ใݯ
wຊޠެࣜαΠτ
wIUUQTKQWVFKTPSH
w7VFKTೖʕ࠷Ͱ࡞Δγϯϓϧͳ8FCΞϓ
Ϧέʔγϣϯ
IUUQHJIZPKQEFWTFSJBMWVFKT
Slide 69
Slide 69 text
7VFKTίϛϡχςΟ͕͋Γ·͢ʂ
Slide 70
Slide 70 text
7VFKTίϛϡχςΟ
w4MBDLίϛϡχςΟWVFKTKQ
wIUUQTWVFKTKQTMBDLJOIFSPLVBQQDPN
w7VFKT.FFUVQ
wIUUQWVFKTNFFUVQDPOOQBTTDPN
Slide 71
Slide 71 text
7VFKTͷະདྷ
Slide 72
Slide 72 text
ͷ৽ػೳ
wੑೳ
w3FOEFSؔ
wαʔόʔαΠυϨϯμϦϯά
wαϙʔτϥΠϒϥϦ
wίϛϡχςΟϓϩδΣΫτ
IUUQTKQWVFKTPSHIFSF
Slide 73
Slide 73 text
αʔόʔαΠυϨϯμϦϯά
Slide 74
Slide 74 text
αʔόʔαΠυϨϯμϦϯά
൪ʹϦΫΤετ
αʔόʔαΠυϨϯμϦϯά
Ϩεϙϯε
wจࣈ௨ΓαʔόʔαΠυଆͰ)5.-ΛϨϯμϦϯάͯ͠ฦ͢
Slide 75
Slide 75 text
αʔόʔαΠυϨϯμϦϯάͷඞཁੑ
w4&0ରࡦ
wΫϩʔϥʔͷ"KBYʹΑΔඇಉظίϯςϯπ
ͷΠϯσοΫεରࡦ
wߴԽ
wॳظϩʔυ࣌ؒͷॖ
Slide 76
Slide 76 text
αϯϓϧίʔυΛݟͯΈΑ͏
Slide 77
Slide 77 text
αʔόʔαΠυϨϯμϦϯάͷϙΠϯτᶃ
var renderer = require(‘vue-server-renderer').createRenderer()
wWVFTFSWFSSFOEFSFS7VFKT͚αʔόʔαΠ
υϨϯμϦϯάOQNύοέʔδ
wDSFBUF3FOEFSFSϝιουͰSFOEFSFSΠϯελϯεΛ
ੜ
Slide 78
Slide 78 text
αʔόʔαΠυϨϯμϦϯάͷϙΠϯτᶄ
renderer.renderToString(ViewModelObject, callback)
w7VFͷ7JFX.PEFMΦϒδΣΫτ͔Β)5.-Λੜ͢
Δؔɻ
w)5.-จࣈྻͷੜ݁Ռ͕ίʔϧόοΫͰ͞ΕΔɻ
Slide 79
Slide 79 text
̏ϑΝΠϧ༻ҙ͠·͢
wJOEFYIUNM
w ςϯϓϨʔτϑΝΠϧ
wBTTFUTBQQKT
w 7VFKTએݴ෦
wTFSWFSKT
w αʔόʔαΠυΤϯτϦʔϙΠϯτ
w &YQSFTTͰ)551αʔόʔએݴ
Slide 80
Slide 80 text
JOEFYIUNM
My Vue App
ۭͷ)5.-Λ४උ
Slide 81
Slide 81 text
BTTFUTBQQKT
module.exports = function () {
return new Vue({
template: '
Hello
PHP Confference{{ year }}!
',
data: {
year: 2016
}
})
}
Slide 82
Slide 82 text
TFSWFSKT
'use strict'
var fs = require('fs')
var path = require('path')
// αʔόαΠυͰར༻͢ΔͨΊɺάϩʔόϧมʹ Vue Λ
ఆٛ͢Δ
global.Vue = require('vue')
var layout = fs.readFileSync('./index.html',
'utf8')
var renderer = require('vue-server-
renderer').createRenderer()
var express = require('express')
var server = express()
// assets σΟϨΫτϦ੩తʹϑΝΠϧΛసૹ͢Δɻ
server.use('/assets', express.static(
path.resolve(__dirname, 'assets')
))
server.get('/', function (request, response) {
renderer.renderToString(
require('./assets/app')(),
function (error, html) {
response.send(layout.replace('', html))
}
)
})
// 5000൪ϙʔτͰػ
server.listen(5000, function (error) {
if (error) throw error
console.log('Server is running at localhost:
5000')
})
ςϯϓϨϑΝΠϧΛಡΈࠐΉ
Slide 83
Slide 83 text
TFSWFSKT
'use strict'
var fs = require('fs')
var path = require('path')
// αʔόαΠυͰར༻͢ΔͨΊɺάϩʔόϧมʹ Vue Λ
ఆٛ͢Δ
global.Vue = require('vue')
var layout = fs.readFileSync('./index.html',
'utf8')
var renderer = require('vue-server-
renderer').createRenderer()
var express = require('express')
var server = express()
// assets σΟϨΫτϦ੩తʹϑΝΠϧΛసૹ͢Δɻ
server.use('/assets', express.static(
path.resolve(__dirname, 'assets')
))
server.get('/', function (request, response) {
renderer.renderToString(
require('./assets/app')(),
function (error, html) {
response.send(layout.replace('', html))
}
)
})
// 5000൪ϙʔτͰػ
server.listen(5000, function (error) {
if (error) throw error
console.log('Server is running at localhost:
5000')
})
SFOEFSFS
FYQSFTTΠϯελϯεΛੜ
Slide 84
Slide 84 text
TFSWFSKT
'use strict'
var fs = require('fs')
var path = require('path')
// αʔόαΠυͰར༻͢ΔͨΊɺάϩʔόϧมʹ Vue Λ
ఆٛ͢Δ
global.Vue = require('vue')
var layout = fs.readFileSync('./index.html',
'utf8')
var renderer = require('vue-server-
renderer').createRenderer()
var express = require('express')
var server = express()
// assets σΟϨΫτϦ੩తʹϑΝΠϧΛసૹ͢Δɻ
server.use('/assets', express.static(
path.resolve(__dirname, 'assets')
))
server.get('/', function (request, response) {
renderer.renderToString(
require('./assets/app')(),
function (error, html) {
response.send(layout.replace('', html))
}
)
})
// 5000൪ϙʔτͰػ
server.listen(5000, function (error) {
if (error) throw error
console.log('Server is running at localhost:
5000')
})
ᶃɹͷϦΫΤετΛड͚Δ
Slide 85
Slide 85 text
TFSWFSKT
'use strict'
var fs = require('fs')
var path = require('path')
// αʔόαΠυͰར༻͢ΔͨΊɺάϩʔόϧมʹ Vue Λ
ఆٛ͢Δ
global.Vue = require('vue')
var layout = fs.readFileSync('./index.html',
'utf8')
var renderer = require('vue-server-
renderer').createRenderer()
var express = require('express')
var server = express()
// assets σΟϨΫτϦ੩తʹϑΝΠϧΛసૹ͢Δɻ
server.use('/assets', express.static(
path.resolve(__dirname, 'assets')
))
server.get('/', function (request, response) {
renderer.renderToString(
require('./assets/app')(),
function (error, html) {
response.send(layout.replace('', html))
}
)
})
// 5000൪ϙʔτͰػ
server.listen(5000, function (error) {
if (error) throw error
console.log('Server is running at localhost:
5000')
})
ᶄBTTFUTBQQKTΛ)5.-ม
Slide 86
Slide 86 text
TFSWFSKT
'use strict'
var fs = require('fs')
var path = require('path')
// αʔόαΠυͰར༻͢ΔͨΊɺάϩʔόϧมʹ Vue Λ
ఆٛ͢Δ
global.Vue = require('vue')
var layout = fs.readFileSync('./index.html',
'utf8')
var renderer = require('vue-server-
renderer').createRenderer()
var express = require('express')
var server = express()
// assets σΟϨΫτϦ੩తʹϑΝΠϧΛసૹ͢Δɻ
server.use('/assets', express.static(
path.resolve(__dirname, 'assets')
))
server.get('/', function (request, response) {
renderer.renderToString(
require('./assets/app')(),
function (error, html) {
response.send(layout.replace('', html))
}
)
})
// 5000൪ϙʔτͰػ
server.listen(5000, function (error) {
if (error) throw error
console.log('Server is running at localhost:
5000')
})
ᶅϨεϙϯεͰฦ͢
Slide 87
Slide 87 text
ςϯϓϨʔτϑΝΠϧͷҰ෦ͱஔ
Hello, PHP
Confference 2016!
layout.replace('', html)
SFOEFS5P4USJOHͷίʔϧόοΫ͔Βฦͬͯ͘ΔIUNMͷத
ϨΠΞτશମͷςϯϓϨϑΝΠϧͷҰ෦ͱஔ͖͑
Slide 88
Slide 88 text
ϒϥβͰදࣔ͢Δͱ
Slide 89
Slide 89 text
7VFKT͕αʔόʔ͔ΒϨϯμϦϯά͞ΕͯฦΔ
αʔόʔαΠυϨϯμϦϯά͞Ε͍ͯΔʂʂʂ
Slide 90
Slide 90 text
ײ
wਖ਼ͳॴ·ͩ·ͩෆ໌ଟ͍
wαʔόʔαΠυϨϯμϦϯάͷҰൠతͳඞཁੑཧղͰ͖Δ
w443Λར༻࣮ͯ͢͠Δʹίετ͕͔͔ΔͷͰɺαʔϏεͷಛੑ
ඞཁੑΛཧղ্͍ͨ͠Ͱબ͢Δඞཁ͕͋Δ
Slide 91
Slide 91 text
࠷ޙʹ·ͱΊͰ͢
Slide 92
Slide 92 text
·ͱΊ
wجૅΛ֮͑Ε͙͢ʹίʔυΛॻ͚ͯಈ͖͕ग़ͤΔͷͰ໘ന͍ʂ
w֤छϚχϡΞϧ͕ຊޠͰ༻ҙ͞Ε͍ͯΔͷͰɺڵຯͷ͋ΔํΨΠ
υΛಡΜͰΈΔ͜ͱΛΦεεϝ͠·͢
w·ͩ·ͩࣗ7VFKTษڧதͰ͋ΓཧղͰ͖͍ͯͳ͍ͷͰɺҾ
͖ଓ͖Ξτϓοτ͍͖ͯ͠·͢ɻ
Slide 93
Slide 93 text
༧ࠂ
˞7VFKTͷίʔυωʔϜ&WBOHFMJPO
Slide 94
Slide 94 text
:"1$)PLLBJEP
4BU
ʮ7VFKT쎂쎟쎢8FC쎬쏡쏴쎻썗쏁쏱쏽։ൃʯ
Slide 95
Slide 95 text
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ