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

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