PHPerのためのVue.js入門とVue.js 2.0の未来

Transcript

1. όʔνʔ
   
   (.0
   1&1"#0
   JOD
   
   1)1ΧϯϑΝϨϯε 1)1FSͷͨΊͷ7VFKTೖ໳ͱ
 7VFKT
   ͷະདྷ
2. 1)1FS
   (.0ϖύϘ
   άʔϖνʔϜ
   ιϑτ΢ΣΞΤϯδχΞ
   Ξχϝ෦෦௕ όʔνʔ
   
   !IZQFSNLU IUUQCMPHIZQFSNLUKQ
3. ϗʔϜϖʔδ࡞੒αʔϏεάʔϖ IUUQTHPPQFKQ
4. ΞχϝͷϨϏϡʔαΠτʮ͋ʹ͜Εʯ IUUQTXXXBOJLPSFKQ
5. ࠓ೔࿩͢͜ͱ wഎܠ
   w7VFKT
   ೖ໳
   w֤छจ๏ͷ঺հ
   w7VFKT
   ίϛϡχςΟ
   w7VFKT
   
   ͷະདྷ
   w·ͱΊ
6. എܠ
7. 1)1ΧϯϑΝϨϯεͰͳͥ7VFKT
8. ཧ༝͕̎ͭ͋Γ·͢
9. ᶃ 1)1FSͱͯ͠7VFKTΛԠԉ͍ͨ͠ʂ
   ᶄૉ੖Β͍͠ϥΠϒϥϦͳͷͰօ͞Μʹ
 ஌ͬͯ΄͍͠ʂ
10. -BSBWFM͔Β7VFKT͕ެࣜϑϩϯτΤϯυϥΠϒϥϦʹ ཧ༝̍
11. ϑϩϯτΤϯυॳ৺ऀ ࢲ Ͱ΋ษڧΛ࢝Ίͯ
    ͙͢ʹίʔυΛॻ͖࢝ΊΔ͜ͱ͕ग़དྷͨ ཧ༝̎
12. ࢲͷ+BWB4DSJQUϨϕϧ w೥݄౰࣌
    wK2VFSZͰ͔͠+BWB4DSJQUΛॻ͍ͨ͜ͱ͕ͳ͘ɺ࠷ۙͷ໨·͙Δ͠ ͍มԽʹযΓΛײ͡Δ ؾͮ͘ͷ஗͍
    w೥݄ɿ+BWB4DSJQUͷجૅΛษڧ͠௚ͨ͢ΊຊΛങ͍ړΔ
    w೥݄ɿ"OHVMBS+4
    YͷษڧΛຊΛݟͳ͕Β࢝ΊΔ͕࠳ંPS[
13. ೥݄ʹ7VFKTͱग़ձ͏
14. 7VFKTͷษڧΛ࢝ΊΔ wಥવόϦσʔγϣϯϥΠϒϥϦ
    WVFWBMJEBUPSυΩϡϝϯτͷ࿨༁Λ ͢Δ
    w೥݄຤
    7VFKT
    5PLZP
    .FFUVQlzͰʮ຋༁͔Β࢝ΊΔ 7VFKT
    ೖ໳ʯΛൃද IUUQXXXTMJEFTIBSFOFUIZQFSNLUWVFKT
15. ೥݄
    ձࣾͷ։ൃ߹॓Ͱࣾ಺೔ใγεςϜΛ7VFKTͰ։ൃ w೔ใͷӾཡɾ౤ߘɺ͍͍ͶɺԻ੠ಡΈ্͛ػೳ
    w։ൃ౰࣌͸7VFKT
    ܥ
    WVFSPVUFS
    
    WVFSFTPVSDF
    
    WVFJGZ
    wϦϦʔεޙʹ
    
    ΁όʔδϣϯΞοϓ
16. %FNP
17. 7VFKTͱ͸
18. 7VFKTͱ͸ wϢʔβʔΠϯλʔϑΣΠεΛߏங͢ΔͨΊͷϓϩάϨογϒϑϨʔϜ ϫʔΫ
    wن໛ʹԠͯ͡௥ՃͰ͖Δؔ࿈ϥΠϒϥϦ
    wγϯϓϧͳ"1*
    wϑϧελοΫͰ͸ͳ͍
19. ਓؾͷཧ༝ wγϯϓϧͳ"1*͔ͭ؆୯ͳςϯϓϨʔτͰֶशίετ͕௿͍
    wίϯϙʔωϯτࢦ޲ͷ6*
    wߴ଎͔ͭܰྔ LC
    NJO H[JQ࣌
    wϨϯμϦϯά͕଎͍
20. 7VFKT
    ೖ໳
    ରԠ൛
21. ͜Ε͚֮ͩ͑Ε͹͍͍ͩͨ0,ʂ wಋೖํ๏
    wσʔλόΠϯσΟϯά
    w૒ํ޲όΠϯσΟϯά
    wϦετϨϯμϦϯά
    wϝιουͱΠϕϯτϨϯμϦϯά
    w৚݅෇͖ϨϯμϦϯά
    wΫϥεͱελΠϧͷόΠϯσΟϯά wίϯϙʔωϯτ
    wͷ஫ҙ఺
22. ಋೖํ๏
23. Ұ൪؆୯ͳಋೖํ๏ // index.html <!-- Vue.js͔Βར༻͢ΔHTML͸͜͜ʹॻ͘ --> <!-- Vue.jsຊདྷΛCDN͔ΒಡΈࠐΉ --> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ ajax/libs/vue/2.0.3/vue.js"></script> <!-- Vue.jsΛར༻ͨ͠JavaScriptίʔυ͸͜͜ʹॻ͘ -->
24. σʔλόΠϯσΟϯάͱ7VFͷجૅ
25. ม਺ల։͸Ϛελογϡه๏Ͱ \\
    NFTTBHF
    ^^
26. σʔλόΠϯσΟϯά // main.js new Vue({ // ର৅ΤϨϝϯτΛࢦఆ͠·͢ el: '#app', // Vue ΠϯελϯεͷͨΊͷσʔλΦϒδΣΫτ data: { message: 'Hello PHPΧϯϑΝϨϯε2016ʂ' } }); // index.html <div id="app"> {{ message }} </div> ᶃ7VFΠϯελϯεΛ࡞੒ ᶄ
    ର৅ΤϨϝϯτΛࢦఆ ᶅ
    σʔλΦϒδΣΫτΛઃఆ ᶆ
    ςΩετల։͞ΕΔ
27. ϒϥ΢βදࣔ݁Ռ
28. ૒ํ޲όΠϯσΟϯά
29. WNPEFM
    σΟϨΫςΟϒ // index.html <div id="app"> {{ message }}
 <input type=”text” v-model=”message”> </div> 'PSNͷJOQVU΍UFYUBSFBΛEBUBΦϒδΣΫτͱ૒ํ޲ʹσʔλόΠϯ σΟϯά͕ग़དྷΔ
30. ૒ํ޲όΠϯσΟϯά // main.js new Vue({ // ର৅ΤϨϝϯτΛࢦఆ͠·͢ el: '#app', // Vue ΠϯελϯεͷͨΊͷσʔλΦϒδΣΫτ data: { message: 'Hello PHPΧϯϑΝϨϯε2016ʂ' } }); // index.html <div id="app"> {{ message }}
 <input type=”text” v-model=”message”> </div> ಉظ͞ΕΔ ಺༰͸൓ө͞ΕΔ
31. ࣮ߦ͢Δͱ ςΩετϘοΫε಺ͷจࣈΛมߋ͢Δͱ
 ϦΞϧλΠϜͰ্ʹ൓ө͞ΕΔ
32. ϦετϨϯμϦϯά ͜ΕΛ֮͑Δͱ̋̋Ұཡ͕ԿͰ΋࣮૷Մೳʹ
33. ϦετϨϯμϦϯά // main.js new Vue({ el: '#app', data: { items: [ { title: 'PHP' }, { title: 'Conference2016' }, { title: '2016೥11݄3೔ʢ໦ʣ' },
 { title: 'େా۠࢈ۀϓϥβ PiO' } ] } }); // index.html <div id="app"> <ul> <li v-for="item in items"> {{ item.title }} </li> </ul> </div> ᶃ഑ྻΛࢦఆ͢Δ ᶄϦετల։͞ΕΔ
34. ϒϥ΢βදࣔ݁Ռ
35. WGPS
    σΟϨΫςΟϒ // index.html <div id="app"> <ul> <li v-for="item in items"> {{ item.title }} </li> </ul> </div> JUFN
    JO
    JUFNTܗࣜͰ഑ྻͷத਎ Λల։ͭͭ͠܁Γฦ͠ॲཧΛ࣮ߦ ͢Δ
36. 7VFKT
    Ͱར༻Ͱ͖ΔσΟϨΫςΟϒҰཡ WUFYU
    WIUNM
    WJG
    WTIPX
    WFMTF
    WGPS
    WFM WPO
    WCJOE
    WNPEFM
    WQSF
    WDMPBL
    WPODF
    WSFG EFQSFDBUFE EFQSFDBUFE OFX
37. Α͘ར༻͢ΔσΟϨΫςΟϒҰཡ WUFYU
    WIUNM
    WJG
    WTIPX
    WFMTF
    WGPS
    WFM WPO
    WCJOE
    WNPEFM
    WQSF
    WDMPBL
    WPODF
    WSFG EFQSFDBUFE EFQSFDBUFE OFX
38. ϝιουͱΠϕϯτϨϯμϦϯά ͔͜͜Β΍ͬͱಈ͖͕ग़ͯ͘Δʂ
39. WPO
    σΟϨΫςΟϒ )5.-ཁૉʹΠϕϯτΛઃఆ͢Δ ͜ͱ͕ग़དྷ·͢ <div id="app"> {{ message }}<br /> <button v-on:click=“sayHi()"> Hi! </button> </div>
40. ϝιουͱΠϕϯτϨϯμϦϯά // main.js new Vue({ el: '#app', data: { message: '∥೤౬෩࿊∥' }, created: function() { setTimeout(function() { alert('ԡͤΑʔʂ'); }, 5000); }, methods: { push: function() { this.message = 'ૌ͑ͯ΍Δʂ'; } } }); // index.html
 <div id="app"> {{ message }}<br /> <button v-on:click=“push()"> ઈରʹԡ͢ͳΑʂ </button> </div> ϥΠϑαΠΫϧϑοΫ Πϯελϯε͕࡞੒͞Εͨޙʹݺ͹Ε·͢ɻ
41. ϝιουͱΠϕϯτϨϯμϦϯά // main.js
 new Vue({ el: '#app', data: { message: '∥೤౬෩࿊∥' }, created: function() { setTimeout(function() { alert('ԡͤΑʔʂ'); }, 5000); }, methods: { push: function() { this.message = 'ૌ͑ͯ΍Δʂ'; } } }); // index.html
 <div id="app"> {{ message }}<br /> <button v-on:click=“push()"> ઈରʹԡ͢ͳΑʂ </button> </div> ϝιουఆٛՕॴ 7VFKTͰ͸ϝιουఆٛ͸͜ͷNFUPET ಺ͱܾ·͍ͬͯ·͢ɻ
    ͜͜Ͱએݴͨ͠ϝιου͸Πϯελϯε಺ɺ ςϯϓϨʔτ಺͔Βݺͼग़ͤ·͢ɻ
42. ࣮ߦ͢Δͱ ඵޙʹදࣔ͞ΕΔ ϘλϯΛԡ͢ͱϝοηʔδ͕มΘΔ
43. ৚݅෇͖ϨϯμϦϯά
44. WJG
    σΟϨΫςΟϒ ৚݅ʹԠͯ͡ΤϨϝϯτͷදࣔɾ ඇදࣔΛ੾Γସ͑ΒΕΔ <p v-if=“isActive"> ༗ޮͳΞΧ΢ϯτͰ͢ </p> <p v-if="age >= 20”> ੒ਓͰ͢ </p>
45. WFMTF
    σΟϨΫςΟϒ͕ศརʂʂ WJGͷ௚ޙʹ഑ஔ͢Δ͜ͱͰɺ௚ લͷWJGͷFMTF
    CMPDLͱͯ͠දࣔ ͞Ε·͢ <p v-if="age >= 20”> ੒ਓͰ͢ </p> <p v-else> ະ੒೥Ͱ͢ </p>
46. ৚݅෇͖ϨϯμϦϯά // main.js
 new Vue({ el: '#app', data: { isHandRaised: false }, methods: { raiseHand: function() { this.isHandRaised = true; } } }); // index.html
 <div id="app">
 <p v-if=“isHandRaised”>Ͳ͏ͧͲ͏ͧ</p> <p v-else> ͓લ΍Βͳ͍ͷ?͡Ό͋Զ͕΍ΔΑ!<br /> ͍΍͜͜͸Զ͕΍ΔΑ! <br /> <button v-on:click=“raiseHand">ɾɾɾ͡Ό͋Զ ͕΍ΔΑɻ</button>
 </p> </div> ϝιουͱม਺ఆٛ
47. ৚݅෇͖ϨϯμϦϯά // main.js
 new Vue({ el: '#app', data: { isHandRaised: false }, methods: { raiseHand: function() { this.isHandRaised = true; } } }); // index.html
 <div id="app">
 <p v-if=“isHandRaised”>Ͳ͏ͧͲ͏ͧ</p> <p v-else> ͓લ΍Βͳ͍ͷ?͡Ό͋Զ͕΍ΔΑ!<br /> ͍΍͜͜͸Զ͕΍ΔΑ! <br /> <button v-on:click=“raiseHand">ɾɾɾ͡Ό͋Զ ͕΍ΔΑɻ</button>
 </p> </div> Πϕϯτઃఆ
48. ৚݅෇͖ϨϯμϦϯά // main.js
 new Vue({ el: '#app', data: { isHandRaised: false }, methods: { raiseHand: function() { this.isHandRaised = true; } } }); // index.html
 <div id="app">
 <p v-if=“isHandRaised”>Ͳ͏ͧͲ͏ͧ</p> <p v-else> ͓લ΍Βͳ͍ͷ?͡Ό͋Զ͕΍ΔΑ!<br /> ͍΍͜͜͸Զ͕΍ΔΑ! <br /> <button v-on:click=“raiseHand">ɾɾɾ͡Ό͋Զ ͕΍ΔΑɻ</button>
 </p> </div> EBUBม਺ͷ஋ʹԠͯ͡
    ϦΞΫςΟϒʹද͕ࣔ
    ੾Γସ͑ΒΕΔ
49. ࣮ߦ͢Δͱ
50. ΫϥεͱελΠϧͷόΠϯσΟϯά σβΠϯ͢Δ࣌ʹඞཁͱͳΓ·͢
51. WCJOE
    σΟϨΫςΟϒ Ϋϥε΍ελΠϧΛಈతʹ੾Γସ͑Δ͜ͱ͕ग़དྷ·͢ɻ <div class=“static" v-bind:class="{ ‘class-a’: isA, ‘class-b’: isB }">
52. ΫϥεͱελΠϧͷόΠϯσΟϯά // main.js new Vue({ el: '#app', data: { isEvening: false } }); <style type="text/css"> html, body { padding: 0px; margin: 0px; height: 100%; } .container { width: 100%; height: 100%; } .orange { background-color: orange; } </style> <div id=“app" class=“container" v-bind:class="{ orange: isEvening }"> <button v-on:click="isEvening = true”> ༦ম͚ʹ͢Δ </button>
 <button v-on:click="isEvening = false”> ݩʹ໭͢ </button> </div> ΫϥεͷόΠϯσΟϯάઃఆ
53. ϒϥ΢βදࣔ݁Ռ
54. Ϋϥε͕௥Ճ͞ΕΔ
55. ίϯϙʔωϯτ ಠࣗͷλά͕࡞ΕΔڧྗػೳ
56. ίϯϙʔωϯτ w࠶ར༻ՄೳͳίʔυͷΧϓηϧԽ͕ग़དྷ·͢ <div id="app"> <header-component></header-component> {{ message }} <footer-component></footer-component> </div> <div id="app"> <div id=“header”>ϔομʔؔ࿈ͷ௕͍ιʔείʔυ</div> {{ message }} <div id=“footer”>ϑολʔؔ࿈ͷ௕͍ιʔείʔυ</div> </div>
57. ίϯϙʔωϯτ // main.js Vue.component('header-component', { template: '<h1>phpcon 2016</h1>' }); Vue.component('footer-component', { template: '<div>\ <hr>\ <center>All Rights Reserved.</center>\ </div>' }); new Vue({ el: '#app', data: { message: '?> NEXT' } }); // index.html <div id="app"> <header-component></header-component> {{ message }} <footer-component></footer-component> </div>
58. ϒϥ΢βදࣔ݁Ռ
59. 7VFKT
    ͷ஫ҙ఺ ࣗ෼͕ϋϚͬͨ͜ͱͰ͢
60. ϋϚͬͨՕॴ
    ϏϧυϑΝΠϧ͕̎छྨ͋Δ໰୊
61. CSPXTFSJGZ
    F
    TSDKTNBJOKT
    P
    QVCMJDBQQKT
    Λ࣮ߦʂ // src/js/main.js
 var Vue = require('vue'); new Vue({ el: '#app', data: { message: 'Hello PHP Confference 2016!' } }); // index.html <div id="app"> <div> {{ message }} </div> </div> <script type="text/javascript" src="app.js"></script>
62. ϒϥ΢βͰݟΔͱ UFNQMBUF
    ຢ͸SFOEFS
    ϑΝϯΫγϣϯ͕ఆٛ͞Ε͍ͯͳ͍ͱ
    ౖΒΕͯ͠·͏ɾɾɾɾ
63. ϏϧυϑΝΠϧ͕̎ͭ͋Δ w͔Β̎ͭʹ෼͔Εͨ
    wελϯυΞϩϯ൛ɿ)5.-ίϯύΠϥ಺ଂɺ7VFYܥͱಉ͡ɻ
    wϥϯλΠϜݶఆϏϧυ൛ɿ)5.-ίϯύΠϥແ͠ɻOQNͰ͸σϑΥ ϧτͰͪ͜ΒΛग़ྗɻ
64. ճආํ๏͸ެ͔ࣜΒఏࣔ͞Ε͍ͯΔ
65. 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" } } ͕͜͜ϙΠϯτʂ
66. ࠶౓Ϗϧυ͠௚͢ͱΤϥʔແ͘දࣔ͞Ε·͢
67. جຊจ๏͸෼͔͚ͬͨͲɺ
 Ͳ͜Ͱ৘ใऩू͢Ε͹͍͍ͷ͔ʁ
68. ৘ใݯ w೔ຊޠެࣜαΠτ
    wIUUQTKQWVFKTPSH
    w7VFKTೖ໳
    ʕ࠷଎Ͱ࡞Δγϯϓϧͳ8FCΞϓ Ϧέʔγϣϯ
    IUUQHJIZPKQEFWTFSJBMWVFKT
69. 7VFKT
    ίϛϡχςΟ͕͋Γ·͢ʂ
70. 7VFKT
    ίϛϡχςΟ w4MBDLίϛϡχςΟ
    WVFKTKQ
    wIUUQTWVFKTKQTMBDLJOIFSPLVBQQDPN
    w7VFKT
    .FFUVQ
    wIUUQWVFKTNFFUVQDPOOQBTTDPN
71. 7VFKT
    ͷະདྷ
72. ͷ৽ػೳ wੑೳ
    w3FOEFSؔ਺
    wαʔόʔαΠυϨϯμϦϯά
    wαϙʔτϥΠϒϥϦ
    wίϛϡχςΟϓϩδΣΫτ IUUQTKQWVFKTPSHIFSF
73. αʔόʔαΠυϨϯμϦϯά
74. αʔόʔαΠυϨϯμϦϯά ൪ʹϦΫΤετ αʔόʔαΠυϨϯμϦϯά Ϩεϙϯε wจࣈ௨ΓαʔόʔαΠυଆͰ)5.-ΛϨϯμϦϯάͯ͠ฦ͢
75. αʔόʔαΠυϨϯμϦϯάͷඞཁੑ w4&0ରࡦ
    wΫϩʔϥʔͷ"KBY౳ʹΑΔඇಉظίϯςϯπ ͷΠϯσοΫεରࡦ
    wߴ଎Խ
    wॳظϩʔυ࣌ؒͷ୹ॖ
76. αϯϓϧίʔυΛݟͯΈΑ͏
77. αʔόʔαΠυϨϯμϦϯάͷϙΠϯτᶃ var renderer = require(‘vue-server-renderer').createRenderer() wWVFTFSWFSSFOEFSFS
    7VFKT
    ޲͚αʔόʔαΠ υϨϯμϦϯάOQNύοέʔδ
    wDSFBUF3FOEFSFSϝιουͰSFOEFSFSΠϯελϯεΛ ੜ੒
78. αʔόʔαΠυϨϯμϦϯάͷϙΠϯτᶄ renderer.renderToString(ViewModelObject, callback) w7VFͷ7JFX.PEFMΦϒδΣΫτ͔Β)5.-Λੜ੒͢ Δؔ਺ɻ
    w)5.-จࣈྻͷੜ੒݁Ռ͕ίʔϧόοΫͰ౉͞ΕΔɻ
79. ̏ϑΝΠϧ༻ҙ͠·͢ wJOEFYIUNM
    w ςϯϓϨʔτϑΝΠϧ
    wBTTFUTBQQKT
    w 7VFKT
    એݴ෦
    wTFSWFSKT
    w αʔόʔαΠυΤϯτϦʔϙΠϯτ
    w &YQSFTTͰ)551αʔόʔએݴ
80. 
    JOEFYIUNM <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>My Vue App</title> </head> <body> <div id="app"></div> <script type="text/javascript" src="assets/app.js"></script> </body> </html> ۭͷ)5.-Λ४උ
81. 
    BTTFUTBQQKT module.exports = function () { return new Vue({ template: '<div id="app">Hello PHP Confference{{ year }}!</div>', data: { year: 2016 } }) }
82. 
    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('<div id="app"></div>', html)) } ) })
 // 5000൪ϙʔτͰ଴ػ server.listen(5000, function (error) { if (error) throw error console.log('Server is running at localhost: 5000') }) ςϯϓϨϑΝΠϧΛಡΈࠐΉ
83. 
    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('<div id="app"></div>', html)) } ) })
 // 5000൪ϙʔτͰ଴ػ server.listen(5000, function (error) { if (error) throw error console.log('Server is running at localhost: 5000') }) SFOEFSFS
    FYQSFTTΠϯελϯεΛੜ੒
84. 
    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('<div id="app"></div>', html)) } ) })
 // 5000൪ϙʔτͰ଴ػ server.listen(5000, function (error) { if (error) throw error console.log('Server is running at localhost: 5000') }) ᶃɹ
    ͷϦΫΤετΛड͚Δ
85. 
    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('<div id="app"></div>', html)) } ) })
 // 5000൪ϙʔτͰ଴ػ server.listen(5000, function (error) { if (error) throw error console.log('Server is running at localhost: 5000') }) ᶄ
    BTTFUTBQQKTΛ)5.-ม׵
86. 
    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('<div id="app"></div>', html)) } ) })
 // 5000൪ϙʔτͰ଴ػ server.listen(5000, function (error) { if (error) throw error console.log('Server is running at localhost: 5000') }) ᶅ
    ϨεϙϯεͰฦ͢
87. ςϯϓϨʔτϑΝΠϧͷҰ෦ͱஔ׵ <div id="app" server-rendered="true">Hello, PHP Confference 2016!</div> layout.replace('<div id="app"></div>', html) 
    SFOEFS5P4USJOHͷίʔϧόοΫ͔Βฦͬͯ͘ΔIUNMͷத਎ 
    ϨΠΞ΢τશମͷςϯϓϨϑΝΠϧͷҰ෦ͱஔ͖׵͑
88. ϒϥ΢βͰදࣔ͢Δͱ
89. 7VFKT͕αʔόʔ͔ΒϨϯμϦϯά͞ΕͯฦΔ αʔόʔαΠυϨϯμϦϯά͞Ε͍ͯΔʂʂʂ
90. ײ૝ wਖ਼௚ͳॴ·ͩ·ͩෆ໌఺͸ଟ͍
    wαʔόʔαΠυϨϯμϦϯάͷҰൠతͳඞཁੑ͸ཧղͰ͖Δ
    w443Λར༻࣮ͯ͠૷͢Δʹ΋ίετ͕͔͔ΔͷͰɺαʔϏεͷಛੑ΍ ඞཁੑΛཧղ্͍ͨ͠Ͱબ୒͢Δඞཁ͕͋Δ
91. ࠷ޙʹ·ͱΊͰ͢
92. ·ͱΊ wجૅΛ֮͑Ε͹͙͢ʹίʔυΛॻ͚ͯಈ͖͕ग़ͤΔͷͰ໘ന͍ʂ
    w֤छϚχϡΞϧ͕೔ຊޠͰ༻ҙ͞Ε͍ͯΔͷͰɺڵຯͷ͋Δํ͸ΨΠ υΛಡΜͰΈΔ͜ͱΛΦεεϝ͠·͢
    w·ͩ·ͩࣗ෼΋7VFKTษڧதͰ͋Γ൒෼΋ཧղͰ͖͍ͯͳ͍ͷͰɺҾ ͖ଓ͖Ξ΢τϓοτ͍͖ͯ͠·͢ɻ
93. ༧ࠂ ˞
    7VFKT
    ͷίʔυωʔϜ͸&WBOHFMJPO
94. :"1$)PLLBJEP
    
    4BU
    ʮ7VFKT쎂쎟쎢8FC쎬쏡쏴쎻썗쏁쏱쏽։ൃʯ
    
95. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ