Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

hypermkt
November 03, 2016

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

hypermkt

November 03, 2016
Tweet

More Decks by hypermkt

Other Decks in Programming

Transcript

  1. Ұ൪؆୯ͳಋೖํ๏ // 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ίʔυ͸͜͜ʹॻ͘ -->
  2. σʔλόΠϯσΟϯά // main.js new Vue({ // ର৅ΤϨϝϯτΛࢦఆ͠·͢ el: '#app', //

    Vue ΠϯελϯεͷͨΊͷσʔλΦϒδΣΫτ data: { message: 'Hello PHPΧϯϑΝϨϯε2016ʂ' } }); // index.html <div id="app"> {{ message }} </div> ᶃ7VFΠϯελϯεΛ࡞੒ ᶄର৅ΤϨϝϯτΛࢦఆ ᶅσʔλΦϒδΣΫτΛઃఆ ᶆςΩετల։͞ΕΔ
  3. WNPEFMσΟϨΫςΟϒ // index.html <div id="app"> {{ message }}
 <input type=”text”

    v-model=”message”> </div> 'PSNͷJOQVU΍UFYUBSFBΛEBUBΦϒδΣΫτͱ૒ํ޲ʹσʔλόΠϯ σΟϯά͕ग़དྷΔ
  4. ૒ํ޲όΠϯσΟϯά // 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> ಉظ͞ΕΔ ಺༰͸൓ө͞ΕΔ
  5. ϦετϨϯμϦϯά // 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> ᶃ഑ྻΛࢦఆ͢Δ ᶄϦετల։͞ΕΔ
  6. WGPSσΟϨΫςΟϒ // index.html <div id="app"> <ul> <li v-for="item in items">

    {{ item.title }} </li> </ul> </div> JUFNJOJUFNTܗࣜͰ഑ྻͷத਎ Λల։ͭͭ͠܁Γฦ͠ॲཧΛ࣮ߦ ͢Δ
  7. Α͘ར༻͢ΔσΟϨΫςΟϒҰཡ WUFYU WIUNM WJG WTIPX WFMTF WGPS WFM WPO WCJOE

    WNPEFM WQSF WDMPBL WPODF WSFG EFQSFDBUFE EFQSFDBUFE OFX
  8. ϝιουͱΠϕϯτϨϯμϦϯά // 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> ϥΠϑαΠΫϧϑοΫ Πϯελϯε͕࡞੒͞Εͨޙʹݺ͹Ε·͢ɻ
  9. ϝιουͱΠϕϯτϨϯμϦϯά // 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 ಺ͱܾ·͍ͬͯ·͢ɻ ͜͜Ͱએݴͨ͠ϝιου͸Πϯελϯε಺ɺ ςϯϓϨʔτ಺͔Βݺͼग़ͤ·͢ɻ
  10. ৚݅෇͖ϨϯμϦϯά // 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> ϝιουͱม਺ఆٛ
  11. ৚݅෇͖ϨϯμϦϯά // 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> Πϕϯτઃఆ
  12. ৚݅෇͖ϨϯμϦϯά // 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ม਺ͷ஋ʹԠͯ͡ ϦΞΫςΟϒʹද͕ࣔ ੾Γସ͑ΒΕΔ
  13. ΫϥεͱελΠϧͷόΠϯσΟϯά // 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> ΫϥεͷόΠϯσΟϯάઃఆ
  14. ίϯϙʔωϯτ 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>
  15. ίϯϙʔωϯτ // 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>
  16. 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>
  17. 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" } } ͕͜͜ϙΠϯτʂ
  18. 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.-Λ४උ
  19. BTTFUTBQQKT module.exports = function () { return new Vue({ template:

    '<div id="app">Hello PHP Confference{{ year }}!</div>', data: { year: 2016 } }) }
  20. 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') }) ςϯϓϨϑΝΠϧΛಡΈࠐΉ
  21. 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ΠϯελϯεΛੜ੒
  22. 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') }) ᶃɹͷϦΫΤετΛड͚Δ
  23. 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.-ม׵
  24. 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') }) ᶅϨεϙϯεͰฦ͢
  25. ςϯϓϨʔτϑΝΠϧͷҰ෦ͱஔ׵ <div id="app" server-rendered="true">Hello, PHP Confference 2016!</div> layout.replace('<div id="app"></div>', html)

    SFOEFS5P4USJOHͷίʔϧόοΫ͔Βฦͬͯ͘ΔIUNMͷத਎ ϨΠΞ΢τશମͷςϯϓϨϑΝΠϧͷҰ෦ͱஔ͖׵͑