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

όʔνʔ(.01&1"#0JOD 1)1ΧϯϑΝϨϯε 1)1FSͷͨΊͷ7VFKTೖ໳ͱ  7VFKTͷະདྷ

1)1FS (.0ϖύϘάʔϖνʔϜ ιϑτ΢ΣΞΤϯδχΞ Ξχϝ෦෦௕ όʔνʔ!IZQFSNLU IUUQCMPHIZQFSNLUKQ

ϗʔϜϖʔδ࡞੒αʔϏεάʔϖ IUUQTHPPQFKQ

ΞχϝͷϨϏϡʔαΠτʮ͋ʹ͜Εʯ IUUQTXXXBOJLPSFKQ

ࠓ೔࿩͢͜ͱ wഎܠ w7VFKTೖ໳ w֤छจ๏ͷ঺հ w7VFKTίϛϡχςΟ w7VFKTͷະདྷ w·ͱΊ

1)1ΧϯϑΝϨϯεͰͳͥ7VFKT

ཧ༝͕̎ͭ͋Γ·͢

ᶃ 1)1FSͱͯ͠7VFKTΛԠԉ͍ͨ͠ʂ ᶄૉ੖Β͍͠ϥΠϒϥϦͳͷͰօ͞Μʹ  ஌ͬͯ΄͍͠ʂ

-BSBWFM͔Β7VFKT͕ެࣜϑϩϯτΤϯυϥΠϒϥϦʹ ཧ༝̍

ϑϩϯτΤϯυॳ৺ऀ ࢲ Ͱ΋ษڧΛ࢝Ίͯ ͙͢ʹίʔυΛॻ͖࢝ΊΔ͜ͱ͕ग़དྷͨ ཧ༝̎

ࢲͷ+BWB4DSJQUϨϕϧ w೥݄౰࣌ wK2VFSZͰ͔͠+BWB4DSJQUΛॻ͍ͨ͜ͱ͕ͳ͘ɺ࠷ۙͷ໨·͙Δ͠ ͍มԽʹযΓΛײ͡Δ ؾͮ͘ͷ஗͍ w೥݄ɿ+BWB4DSJQUͷجૅΛษڧ͠௚ͨ͢ΊຊΛങ͍ړΔ w೥݄ɿ"OHVMBS+4YͷษڧΛຊΛݟͳ͕Β࢝ΊΔ͕࠳ંPS[

೥݄ʹ7VFKTͱग़ձ͏

7VFKTͷษڧΛ࢝ΊΔ wಥવόϦσʔγϣϯϥΠϒϥϦWVFWBMJEBUPSυΩϡϝϯτͷ࿨༁Λ ͢Δ w೥݄຤7VFKT5PLZP.FFUVQlzͰʮ຋༁͔Β࢝ΊΔ 7VFKTೖ໳ʯΛൃද IUUQXXXTMJEFTIBSFOFUIZQFSNLUWVFKT

೥݄ձࣾͷ։ൃ߹॓Ͱࣾ಺೔ใγεςϜΛ7VFKTͰ։ൃ w೔ใͷӾཡɾ౤ߘɺ͍͍ͶɺԻ੠ಡΈ্͛ػೳ w։ൃ౰࣌͸7VFKTܥ WVFSPVUFS WVFSFTPVSDF WVFJGZ wϦϦʔεޙʹ΁όʔδϣϯΞοϓ

7VFKTͱ͸

7VFKTͱ͸ wϢʔβʔΠϯλʔϑΣΠεΛߏங͢ΔͨΊͷϓϩάϨογϒϑϨʔϜ ϫʔΫ wن໛ʹԠͯ͡௥ՃͰ͖Δؔ࿈ϥΠϒϥϦ wγϯϓϧͳ"1* wϑϧελοΫͰ͸ͳ͍

ਓؾͷཧ༝ wγϯϓϧͳ"1*͔ͭ؆୯ͳςϯϓϨʔτͰֶशίετ͕௿͍ wίϯϙʔωϯτࢦ޲ͷ6* wߴ଎͔ͭܰྔ LCNJO H[JQ࣌ wϨϯμϦϯά͕଎͍

7VFKTೖ໳ ରԠ൛

͜Ε͚֮ͩ͑Ε͹͍͍ͩͨ0,ʂ wಋೖํ๏ wσʔλόΠϯσΟϯά w૒ํ޲όΠϯσΟϯά wϦετϨϯμϦϯά wϝιουͱΠϕϯτϨϯμϦϯά w৚݅෇͖ϨϯμϦϯά wΫϥεͱελΠϧͷόΠϯσΟϯά wίϯϙʔωϯτ wͷ஫ҙ఺

ಋೖํ๏

Ұ൪؆୯ͳಋೖํ๏ // index.html   <script
type="text/javascript" src="https://cdnjs.cloudflare.com/ ajax/libs/vue/2.0.3/vue.js"></script>

σʔλόΠϯσΟϯάͱ7VFͷجૅ

ม਺ల։͸Ϛελογϡه๏Ͱ \\NFTTBHF^^

σʔλόΠϯσΟϯά // main.js new Vue({ // ର৅ΤϨϝϯτΛࢦఆ͠·͢ el: '#app', //
Vue ΠϯελϯεͷͨΊͷσʔλΦϒδΣΫτ data: { message: 'Hello PHPΧϯϑΝϨϯε2016ʂ' } }); // index.html <div id="app"> {{ message }} </div> ᶃ7VFΠϯελϯεΛ࡞੒ ᶄର৅ΤϨϝϯτΛࢦఆ ᶅσʔλΦϒδΣΫτΛઃఆ ᶆςΩετల։͞ΕΔ

ϒϥ΢βදࣔ݁Ռ

૒ํ޲όΠϯσΟϯά

WNPEFMσΟϨΫςΟϒ // index.html <div id="app"> {{ message }}  <input type=”text”
v-model=”message”> </div> 'PSNͷJOQVU΍UFYUBSFBΛEBUBΦϒδΣΫτͱ૒ํ޲ʹσʔλόΠϯ σΟϯά͕ग़དྷΔ

૒ํ޲όΠϯσΟϯά // 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> ಉظ͞ΕΔ ಺༰͸൓ө͞ΕΔ

࣮ߦ͢Δͱ ςΩετϘοΫε಺ͷจࣈΛมߋ͢Δͱ  ϦΞϧλΠϜͰ্ʹ൓ө͞ΕΔ

ϦετϨϯμϦϯά ͜ΕΛ֮͑Δͱ̋̋Ұཡ͕ԿͰ΋࣮૷Մೳʹ

ϦετϨϯμϦϯά // 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> ᶃ഑ྻΛࢦఆ͢Δ ᶄϦετల։͞ΕΔ

ϒϥ΢βදࣔ݁Ռ

WGPSσΟϨΫςΟϒ // index.html <div id="app"> <ul> <li v-for="item in items">
{{ item.title }} </li> </ul> </div> JUFNJOJUFNTܗࣜͰ഑ྻͷத਎ Λల։ͭͭ͠܁Γฦ͠ॲཧΛ࣮ߦ ͢Δ

7VFKTͰར༻Ͱ͖ΔσΟϨΫςΟϒҰཡ WUFYU WIUNM WJG WTIPX WFMTF WGPS WFM WPO WCJOE
WNPEFM WQSF WDMPBL WPODF WSFG EFQSFDBUFE EFQSFDBUFE OFX

Α͘ར༻͢ΔσΟϨΫςΟϒҰཡ WUFYU WIUNM WJG WTIPX WFMTF WGPS WFM WPO WCJOE
WNPEFM WQSF WDMPBL WPODF WSFG EFQSFDBUFE EFQSFDBUFE OFX

ϝιουͱΠϕϯτϨϯμϦϯά ͔͜͜Β΍ͬͱಈ͖͕ग़ͯ͘Δʂ

WPOσΟϨΫςΟϒ )5.-ཁૉʹΠϕϯτΛઃఆ͢Δ ͜ͱ͕ग़དྷ·͢ <div id="app"> {{ message }}<br /> <button
v-on:click=“sayHi()"> Hi! </button> </div>

ϝιουͱΠϕϯτϨϯμϦϯά // 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> ϥΠϑαΠΫϧϑοΫ Πϯελϯε͕࡞੒͞Εͨޙʹݺ͹Ε·͢ɻ

ϝιουͱΠϕϯτϨϯμϦϯά // 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 ಺ͱܾ·͍ͬͯ·͢ɻ ͜͜Ͱએݴͨ͠ϝιου͸Πϯελϯε಺ɺ ςϯϓϨʔτ಺͔Βݺͼग़ͤ·͢ɻ

࣮ߦ͢Δͱ ඵޙʹදࣔ͞ΕΔ ϘλϯΛԡ͢ͱϝοηʔδ͕มΘΔ

৚݅෇͖ϨϯμϦϯά

WJGσΟϨΫςΟϒ ৚݅ʹԠͯ͡ΤϨϝϯτͷදࣔɾ ඇදࣔΛ੾Γସ͑ΒΕΔ <p v-if=“isActive"> ༗ޮͳΞΧ΢ϯτͰ͢ </p> <p v-if="age >=
20”> ੒ਓͰ͢ </p>

WFMTFσΟϨΫςΟϒ͕ศརʂʂ WJGͷ௚ޙʹ഑ஔ͢Δ͜ͱͰɺ௚ લͷWJGͷFMTFCMPDLͱͯ͠දࣔ ͞Ε·͢ <p v-if="age >= 20”> ੒ਓͰ͢ </p>
<p v-else> ະ੒೥Ͱ͢ </p>

৚݅෇͖ϨϯμϦϯά // 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> ϝιουͱม਺ఆٛ

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> Πϕϯτઃఆ

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ม਺ͷ஋ʹԠͯ͡ ϦΞΫςΟϒʹද͕ࣔ ੾Γସ͑ΒΕΔ

࣮ߦ͢Δͱ

ΫϥεͱελΠϧͷόΠϯσΟϯά σβΠϯ͢Δ࣌ʹඞཁͱͳΓ·͢

WCJOEσΟϨΫςΟϒ Ϋϥε΍ελΠϧΛಈతʹ੾Γସ͑Δ͜ͱ͕ग़དྷ·͢ɻ <div class=“static" v-bind:class="{ ‘class-a’: isA, ‘class-b’: isB }">

ΫϥεͱελΠϧͷόΠϯσΟϯά // 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> ΫϥεͷόΠϯσΟϯάઃఆ

ϒϥ΢βදࣔ݁Ռ

Ϋϥε͕௥Ճ͞ΕΔ

ίϯϙʔωϯτ ಠࣗͷλά͕࡞ΕΔڧྗػೳ

ίϯϙʔωϯτ 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>

ίϯϙʔωϯτ // 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>

ϒϥ΢βදࣔ݁Ռ

7VFKTͷ஫ҙ఺ ࣗ෼͕ϋϚͬͨ͜ͱͰ͢

ϋϚͬͨՕॴ ϏϧυϑΝΠϧ͕̎छྨ͋Δ໰୊

CSPXTFSJGZFTSDKTNBJOKTPQVCMJDBQQKTΛ࣮ߦʂ // 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>

ϒϥ΢βͰݟΔͱ UFNQMBUFຢ͸SFOEFSϑΝϯΫγϣϯ͕ఆٛ͞Ε͍ͯͳ͍ͱ ౖΒΕͯ͠·͏ɾɾɾɾ

ϏϧυϑΝΠϧ͕̎ͭ͋Δ w͔Β̎ͭʹ෼͔Εͨ wελϯυΞϩϯ൛ɿ)5.-ίϯύΠϥ಺ଂɺ7VFYܥͱಉ͡ɻ wϥϯλΠϜݶఆϏϧυ൛ɿ)5.-ίϯύΠϥແ͠ɻOQNͰ͸σϑΥ ϧτͰͪ͜ΒΛग़ྗɻ

ճආํ๏͸ެ͔ࣜΒఏࣔ͞Ε͍ͯΔ

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" } } ͕͜͜ϙΠϯτʂ

࠶౓Ϗϧυ͠௚͢ͱΤϥʔແ͘දࣔ͞Ε·͢

جຊจ๏͸෼͔͚ͬͨͲɺ  Ͳ͜Ͱ৘ใऩू͢Ε͹͍͍ͷ͔ʁ

৘ใݯ w೔ຊޠެࣜαΠτ wIUUQTKQWVFKTPSH w7VFKTೖ໳ʕ࠷଎Ͱ࡞Δγϯϓϧͳ8FCΞϓ Ϧέʔγϣϯ IUUQHJIZPKQEFWTFSJBMWVFKT

7VFKTίϛϡχςΟ͕͋Γ·͢ʂ

7VFKTίϛϡχςΟ w4MBDLίϛϡχςΟWVFKTKQ wIUUQTWVFKTKQTMBDLJOIFSPLVBQQDPN w7VFKT.FFUVQ wIUUQWVFKTNFFUVQDPOOQBTTDPN

7VFKTͷະདྷ

ͷ৽ػೳ wੑೳ w3FOEFSؔ਺ wαʔόʔαΠυϨϯμϦϯά wαϙʔτϥΠϒϥϦ wίϛϡχςΟϓϩδΣΫτ IUUQTKQWVFKTPSHIFSF

αʔόʔαΠυϨϯμϦϯά

αʔόʔαΠυϨϯμϦϯά ൪ʹϦΫΤετ αʔόʔαΠυϨϯμϦϯά Ϩεϙϯε wจࣈ௨ΓαʔόʔαΠυଆͰ)5.-ΛϨϯμϦϯάͯ͠ฦ͢

αʔόʔαΠυϨϯμϦϯάͷඞཁੑ w4&0ରࡦ wΫϩʔϥʔͷ"KBY౳ʹΑΔඇಉظίϯςϯπ ͷΠϯσοΫεରࡦ wߴ଎Խ wॳظϩʔυ࣌ؒͷ୹ॖ

αϯϓϧίʔυΛݟͯΈΑ͏

αʔόʔαΠυϨϯμϦϯάͷϙΠϯτᶃ var renderer = require(‘vue-server-renderer').createRenderer() wWVFTFSWFSSFOEFSFS7VFKT޲͚αʔόʔαΠ υϨϯμϦϯάOQNύοέʔδ wDSFBUF3FOEFSFSϝιουͰSFOEFSFSΠϯελϯεΛ ੜ੒

αʔόʔαΠυϨϯμϦϯάͷϙΠϯτᶄ renderer.renderToString(ViewModelObject, callback) w7VFͷ7JFX.PEFMΦϒδΣΫτ͔Β)5.-Λੜ੒͢ Δؔ਺ɻ w)5.-จࣈྻͷੜ੒݁Ռ͕ίʔϧόοΫͰ౉͞ΕΔɻ

̏ϑΝΠϧ༻ҙ͠·͢ wJOEFYIUNM w ςϯϓϨʔτϑΝΠϧ wBTTFUTBQQKT w 7VFKTએݴ෦ wTFSWFSKT w αʔόʔαΠυΤϯτϦʔϙΠϯτ
w &YQSFTTͰ)551αʔόʔએݴ

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.-Λ४උ

BTTFUTBQQKT module.exports = function () { return new Vue({ template:
'<div id="app">Hello PHP Confference{{ year }}!</div>', data: { year: 2016 } }) }

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') }) ςϯϓϨϑΝΠϧΛಡΈࠐΉ

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ΠϯελϯεΛੜ੒

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') }) ᶃɹͷϦΫΤετΛड͚Δ

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.-ม׵

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') }) ᶅϨεϙϯεͰฦ͢

ςϯϓϨʔτϑΝΠϧͷҰ෦ͱஔ׵ <div id="app" server-rendered="true">Hello, PHP Confference 2016!</div> layout.replace('<div id="app"></div>', html)
SFOEFS5P4USJOHͷίʔϧόοΫ͔Βฦͬͯ͘ΔIUNMͷத਎ ϨΠΞ΢τશମͷςϯϓϨϑΝΠϧͷҰ෦ͱஔ͖׵͑

ϒϥ΢βͰදࣔ͢Δͱ

7VFKT͕αʔόʔ͔ΒϨϯμϦϯά͞ΕͯฦΔ αʔόʔαΠυϨϯμϦϯά͞Ε͍ͯΔʂʂʂ

ײ૝ wਖ਼௚ͳॴ·ͩ·ͩෆ໌఺͸ଟ͍ wαʔόʔαΠυϨϯμϦϯάͷҰൠతͳඞཁੑ͸ཧղͰ͖Δ w443Λར༻࣮ͯ͠૷͢Δʹ΋ίετ͕͔͔ΔͷͰɺαʔϏεͷಛੑ΍ ඞཁੑΛཧղ্͍ͨ͠Ͱબ୒͢Δඞཁ͕͋Δ

࠷ޙʹ·ͱΊͰ͢

·ͱΊ wجૅΛ֮͑Ε͹͙͢ʹίʔυΛॻ͚ͯಈ͖͕ग़ͤΔͷͰ໘ന͍ʂ w֤छϚχϡΞϧ͕೔ຊޠͰ༻ҙ͞Ε͍ͯΔͷͰɺڵຯͷ͋Δํ͸ΨΠ υΛಡΜͰΈΔ͜ͱΛΦεεϝ͠·͢ w·ͩ·ͩࣗ෼΋7VFKTษڧதͰ͋Γ൒෼΋ཧղͰ͖͍ͯͳ͍ͷͰɺҾ ͖ଓ͖Ξ΢τϓοτ͍͖ͯ͠·͢ɻ

༧ࠂ ˞7VFKTͷίʔυωʔϜ͸&WBOHFMJPO

:"1$)PLLBJEP 4BU ʮ7VFKT쎂쎟쎢8FC쎬쏡쏴쎻썗쏁쏱쏽։ൃʯ

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ

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

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

More Decks by hypermkt

Other Decks in Programming

Featured

Transcript