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. όʔνʔ(.01&1"#0JOD
    1)1ΧϯϑΝϨϯε
    1)1FSͷͨΊͷ7VFKTೖ໳ͱ

    7VFKTͷະདྷ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  5. ࠓ೔࿩͢͜ͱ
    wഎܠ
    w7VFKTೖ໳
    w֤छจ๏ͷ঺հ
    w7VFKTίϛϡχςΟ
    w7VFKTͷະདྷ
    w·ͱΊ

    View Slide

  6. എܠ

    View Slide

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

    View Slide

  8. ཧ༝͕̎ͭ͋Γ·͢

    View Slide

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

    ஌ͬͯ΄͍͠ʂ

    View Slide

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

    View Slide

  11. ϑϩϯτΤϯυॳ৺ऀ ࢲ
    Ͱ΋ษڧΛ࢝Ίͯ
    ͙͢ʹίʔυΛॻ͖࢝ΊΔ͜ͱ͕ग़དྷͨ
    ཧ༝̎

    View Slide

  12. ࢲͷ+BWB4DSJQUϨϕϧ
    w೥݄౰࣌
    wK2VFSZͰ͔͠+BWB4DSJQUΛॻ͍ͨ͜ͱ͕ͳ͘ɺ࠷ۙͷ໨·͙Δ͠
    ͍มԽʹযΓΛײ͡Δ ؾͮ͘ͷ஗͍

    w೥݄ɿ+BWB4DSJQUͷجૅΛษڧ͠௚ͨ͢ΊຊΛങ͍ړΔ
    w೥݄ɿ"OHVMBS+4YͷษڧΛຊΛݟͳ͕Β࢝ΊΔ͕࠳ંPS[

    View Slide

  13. ೥݄ʹ7VFKTͱग़ձ͏

    View Slide

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

    View Slide

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

    View Slide

  16. %FNP

    View Slide

  17. 7VFKTͱ͸

    View Slide

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

    View Slide

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

    wϨϯμϦϯά͕଎͍

    View Slide

  20. 7VFKTೖ໳ ରԠ൛

    View Slide

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

    View Slide

  22. ಋೖํ๏

    View Slide

  23. Ұ൪؆୯ͳಋೖํ๏
    // index.html




    View Slide

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

    View Slide

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

    View Slide

  26. σʔλόΠϯσΟϯά
    // main.js
    new Vue({
    // ର৅ΤϨϝϯτΛࢦఆ͠·͢
    el: '#app',
    // Vue ΠϯελϯεͷͨΊͷσʔλΦϒδΣΫτ
    data: {
    message: 'Hello PHPΧϯϑΝϨϯε2016ʂ'
    }
    });
    // index.html

    {{ message }}

    ᶃ7VFΠϯελϯεΛ࡞੒
    ᶄର৅ΤϨϝϯτΛࢦఆ
    ᶅσʔλΦϒδΣΫτΛઃఆ
    ᶆςΩετల։͞ΕΔ

    View Slide

  27. ϒϥ΢βදࣔ݁Ռ

    View Slide

  28. ૒ํ޲όΠϯσΟϯά

    View Slide

  29. WNPEFMσΟϨΫςΟϒ
    // index.html

    {{ message }}



    'PSNͷJOQVU΍UFYUBSFBΛEBUBΦϒδΣΫτͱ૒ํ޲ʹσʔλόΠϯ
    σΟϯά͕ग़དྷΔ

    View Slide

  30. ૒ํ޲όΠϯσΟϯά
    // main.js
    new Vue({
    // ର৅ΤϨϝϯτΛࢦఆ͠·͢
    el: '#app',
    // Vue ΠϯελϯεͷͨΊͷσʔλΦϒδΣΫτ
    data: {
    message: 'Hello PHPΧϯϑΝϨϯε2016ʂ'
    }
    });
    // index.html

    {{ message }}

    v-model=”message”>

    ಉظ͞ΕΔ
    ಺༰͸൓ө͞ΕΔ

    View Slide

  31. ࣮ߦ͢Δͱ
    ςΩετϘοΫε಺ͷจࣈΛมߋ͢Δͱ

    ϦΞϧλΠϜͰ্ʹ൓ө͞ΕΔ

    View Slide

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

    View Slide

  33. ϦετϨϯμϦϯά
    // main.js
    new Vue({
    el: '#app',
    data: {
    items: [
    { title: 'PHP' },
    { title: 'Conference2016' },
    { title: '2016೥11݄3೔ʢ໦ʣ' },

    { title: 'େా۠࢈ۀϓϥβ PiO' }
    ]
    }
    });
    // index.html



    {{ item.title }}



    ᶃ഑ྻΛࢦఆ͢Δ
    ᶄϦετల։͞ΕΔ

    View Slide

  34. ϒϥ΢βදࣔ݁Ռ

    View Slide

  35. WGPSσΟϨΫςΟϒ
    // index.html



    {{ item.title }}



    JUFNJOJUFNTܗࣜͰ഑ྻͷத਎
    Λల։ͭͭ͠܁Γฦ͠ॲཧΛ࣮ߦ
    ͢Δ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  39. WPOσΟϨΫςΟϒ
    )5.-ཁૉʹΠϕϯτΛઃఆ͢Δ
    ͜ͱ͕ग़དྷ·͢

    {{ message }}


    Hi!


    View Slide

  40. ϝιουͱΠϕϯτϨϯμϦϯά
    // main.js
    new Vue({
    el: '#app',
    data: {
    message: '∥೤౬෩࿊∥'
    },
    created: function() {
    setTimeout(function() {
    alert('ԡͤΑʔʂ');
    }, 5000);
    },
    methods: {
    push: function() {
    this.message = 'ૌ͑ͯ΍Δʂ';
    }
    }
    });
    // index.html


    {{ message }}


    ઈରʹԡ͢ͳΑʂ


    ϥΠϑαΠΫϧϑοΫ
    Πϯελϯε͕࡞੒͞Εͨޙʹݺ͹Ε·͢ɻ

    View Slide

  41. ϝιουͱΠϕϯτϨϯμϦϯά
    // main.js

    new Vue({
    el: '#app',
    data: {
    message: '∥೤౬෩࿊∥'
    },
    created: function() {
    setTimeout(function() {
    alert('ԡͤΑʔʂ');
    }, 5000);
    },
    methods: {
    push: function() {
    this.message = 'ૌ͑ͯ΍Δʂ';
    }
    }
    });
    // index.html


    {{ message }}


    ઈରʹԡ͢ͳΑʂ


    ϝιουఆٛՕॴ
    7VFKTͰ͸ϝιουఆٛ͸͜ͷNFUPET
    ಺ͱܾ·͍ͬͯ·͢ɻ
    ͜͜Ͱએݴͨ͠ϝιου͸Πϯελϯε಺ɺ
    ςϯϓϨʔτ಺͔Βݺͼग़ͤ·͢ɻ

    View Slide

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

    View Slide

  43. ৚݅෇͖ϨϯμϦϯά

    View Slide

  44. WJGσΟϨΫςΟϒ
    ৚݅ʹԠͯ͡ΤϨϝϯτͷදࣔɾ
    ඇදࣔΛ੾Γସ͑ΒΕΔ

    ༗ޮͳΞΧ΢ϯτͰ͢

    View Slide

  45. WFMTFσΟϨΫςΟϒ͕ศརʂʂ
    WJGͷ௚ޙʹ഑ஔ͢Δ͜ͱͰɺ௚
    લͷWJGͷFMTFCMPDLͱͯ͠දࣔ
    ͞Ε·͢

    View Slide

  46. ৚݅෇͖ϨϯμϦϯά
    // main.js

    new Vue({
    el: '#app',
    data: {
    isHandRaised: false
    },
    methods: {
    raiseHand: function() {
    this.isHandRaised = true;
    }
    }
    });
    // index.html


    Ͳ͏ͧͲ͏ͧ

    ͓લ΍Βͳ͍ͷ?͡Ό͋Զ͕΍ΔΑ!

    ͍΍͜͜͸Զ͕΍ΔΑ!

    ɾɾɾ͡Ό͋Զ
    ͕΍ΔΑɻ



    ϝιουͱม਺ఆٛ

    View Slide

  47. ৚݅෇͖ϨϯμϦϯά
    // main.js

    new Vue({
    el: '#app',
    data: {
    isHandRaised: false
    },
    methods: {
    raiseHand: function() {
    this.isHandRaised = true;
    }
    }
    });
    // index.html


    Ͳ͏ͧͲ͏ͧ

    ͓લ΍Βͳ͍ͷ?͡Ό͋Զ͕΍ΔΑ!

    ͍΍͜͜͸Զ͕΍ΔΑ!

    ɾɾɾ͡Ό͋Զ
    ͕΍ΔΑɻ



    Πϕϯτઃఆ

    View Slide

  48. ৚݅෇͖ϨϯμϦϯά
    // main.js

    new Vue({
    el: '#app',
    data: {
    isHandRaised: false
    },
    methods: {
    raiseHand: function() {
    this.isHandRaised = true;
    }
    }
    });
    // index.html


    Ͳ͏ͧͲ͏ͧ

    ͓લ΍Βͳ͍ͷ?͡Ό͋Զ͕΍ΔΑ!

    ͍΍͜͜͸Զ͕΍ΔΑ!

    ɾɾɾ͡Ό͋Զ
    ͕΍ΔΑɻ



    EBUBม਺ͷ஋ʹԠͯ͡
    ϦΞΫςΟϒʹද͕ࣔ
    ੾Γସ͑ΒΕΔ

    View Slide

  49. ࣮ߦ͢Δͱ

    View Slide

  50. ΫϥεͱελΠϧͷόΠϯσΟϯά
    σβΠϯ͢Δ࣌ʹඞཁͱͳΓ·͢

    View Slide

  51. WCJOEσΟϨΫςΟϒ
    Ϋϥε΍ελΠϧΛಈతʹ੾Γସ͑Δ͜ͱ͕ग़དྷ·͢ɻ
    v-bind:class="{ ‘class-a’: isA, ‘class-b’: isB }">

    View Slide

  52. ΫϥεͱελΠϧͷόΠϯσΟϯά
    // main.js
    new Vue({
    el: '#app',
    data: {
    isEvening: false
    }
    });
    <br/>html, body { padding: 0px; margin: 0px; height:<br/>100%; }<br/>.container { width: 100%; height: 100%; }<br/>.orange {<br/>background-color: orange;<br/>}<br/>
    class=“container"
    v-bind:class="{ orange: isEvening }">
    v-on:click="isEvening = true”>
    ༦ম͚ʹ͢Δ

    v-on:click="isEvening = false”>
    ݩʹ໭͢


    ΫϥεͷόΠϯσΟϯάઃఆ

    View Slide

  53. ϒϥ΢βදࣔ݁Ռ

    View Slide

  54. Ϋϥε͕௥Ճ͞ΕΔ

    View Slide

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

    View Slide

  56. ίϯϙʔωϯτ
    w࠶ར༻ՄೳͳίʔυͷΧϓηϧԽ͕ग़དྷ·͢


    {{ message }}



    ϔομʔؔ࿈ͷ௕͍ιʔείʔυ
    {{ message }}
    ϑολʔؔ࿈ͷ௕͍ιʔείʔυ

    View Slide

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


    {{ message }}


    View Slide

  58. ϒϥ΢βදࣔ݁Ռ

    View Slide

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

    View Slide

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

    View Slide

  61. CSPXTFSJGZFTSDKTNBJOKTPQVCMJDBQQKTΛ࣮ߦʂ
    // src/js/main.js

    var Vue = require('vue');
    new Vue({
    el: '#app',
    data: {
    message: 'Hello PHP Confference
    2016!'
    }
    });
    // index.html


    {{ message }}


    src="app.js">

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  67. جຊจ๏͸෼͔͚ͬͨͲɺ

    Ͳ͜Ͱ৘ใऩू͢Ε͹͍͍ͷ͔ʁ

    View Slide

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

    View Slide

  69. 7VFKTίϛϡχςΟ͕͋Γ·͢ʂ

    View Slide

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

    View Slide

  71. 7VFKTͷະདྷ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  80. JOEFYIUNM




    My Vue App






    ۭͷ)5.-Λ४උ

    View Slide

  81. BTTFUTBQQKT
    module.exports = function () {
    return new Vue({
    template: 'Hello
    PHP Confference{{ year }}!',
    data: {
    year: 2016
    }
    })
    }

    View Slide

  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('id="app">', html))
    }
    )
    })

    // 5000൪ϙʔτͰ଴ػ
    server.listen(5000, function (error) {
    if (error) throw error
    console.log('Server is running at localhost:
    5000')
    })
    ςϯϓϨϑΝΠϧΛಡΈࠐΉ

    View Slide

  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('id="app">', html))
    }
    )
    })

    // 5000൪ϙʔτͰ଴ػ
    server.listen(5000, function (error) {
    if (error) throw error
    console.log('Server is running at localhost:
    5000')
    })
    SFOEFSFS FYQSFTTΠϯελϯεΛੜ੒

    View Slide

  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('id="app">', html))
    }
    )
    })

    // 5000൪ϙʔτͰ଴ػ
    server.listen(5000, function (error) {
    if (error) throw error
    console.log('Server is running at localhost:
    5000')
    })
    ᶃɹͷϦΫΤετΛड͚Δ

    View Slide

  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('id="app">', html))
    }
    )
    })

    // 5000൪ϙʔτͰ଴ػ
    server.listen(5000, function (error) {
    if (error) throw error
    console.log('Server is running at localhost:
    5000')
    })
    ᶄBTTFUTBQQKTΛ)5.-ม׵

    View Slide

  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('id="app">', html))
    }
    )
    })

    // 5000൪ϙʔτͰ଴ػ
    server.listen(5000, function (error) {
    if (error) throw error
    console.log('Server is running at localhost:
    5000')
    })
    ᶅϨεϙϯεͰฦ͢

    View Slide

  87. ςϯϓϨʔτϑΝΠϧͷҰ෦ͱஔ׵
    Hello, PHP
    Confference 2016!
    layout.replace('', html)
    SFOEFS5P4USJOHͷίʔϧόοΫ͔Βฦͬͯ͘ΔIUNMͷத਎
    ϨΠΞ΢τશମͷςϯϓϨϑΝΠϧͷҰ෦ͱஔ͖׵͑

    View Slide

  88. ϒϥ΢βͰදࣔ͢Δͱ

    View Slide

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

    View Slide

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

    View Slide

  91. ࠷ޙʹ·ͱΊͰ͢

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  95. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ

    View Slide