本番環境にVue.jsを使った話 / Use Vue.js at production

Cbffd4d28c61bc35c2e9a7a5aca632c3?s=47 Hiromi Kimura
August 02, 2017
1.1k

本番環境にVue.jsを使った話 / Use Vue.js at production

Cbffd4d28c61bc35c2e9a7a5aca632c3?s=128

Hiromi Kimura

August 02, 2017
Tweet

Transcript

  1. ໦ଜ޿ւ(.01FQBCP *OD 'VLVPLBQIQ ຊ൪؀ڥʹ7VFKTΛ࢖ͬͨ࿩

  2. (.0ϖύϘϜʔϜʔυϝΠϯΤϯδχΞ ໦ଜ޿ւ!LJNSPNJ ࣇͷύύʢࡀͷஉͷࢠʣ IUUQLJNSPNJIBUFOBCMPHKQ

  3. IUUQTUFDIQFQBCPDPNNVVNVVTIPQQJOHDBSU

  4. 7VFKTʁ

  5. Α͚ͩ͞఻͑·͢

  6. IUUQTUSFOETHPPHMFDPNUSFOETFYQMPSF EBUFUPEBZZRWVFKT SFBDUKT BOHVMBSKT

  7. ಛ௃ wK2VFSZͷ୅ΘΓͱͯ͠খن໛ʹ w41"΍443΋Ͱ͖େن໛ʹ΋ w*&Ҏ߱ʹରԠ wެࣜͷ೔ຊޠυΩϡϝϯτ͕Θ͔Γ΍͍͢ wখ࢝͘͞Ί΍͘͢ͱ͖ͬͭ΍͍͢ʂ IUUQTKQWVFKTPSH

  8. )FMMP7VF <div id="vue-app"> <h1 v-show="isShow">hello!</h1> <button v-on:click="showHello()">show hello</button> </div> <script

    src="https://unpkg.com/vue"></script> <script> new Vue({ el: '#vue-app', data: { isShow: false, }, methods: { showHello: function () { this.isShow = true } } }) </script>
  9. ݁Ռ

  10. <div id="vue-app"> <h1 v-show="isShow">hello!</h1> <button v-on:click="showHello()">show hello</button> </div> <script src="https://unpkg.com/vue"></script>

    <script> new Vue({ el: '#vue-app', data: { isShow: false, }, methods: { showHello: function () { this.isShow = true } } }) </script> OFX7VF 7VFΠϯελϯεΛ࡞੒ )FMMP7VF
  11. <div id="vue-app"> <h1 v-show="isShow">hello!</h1> <button v-on:click="showHello()">show hello</button> </div> <script src="https://unpkg.com/vue"></script>

    <script> new Vue({ el: '#vue-app', data: { isShow: false, }, methods: { showHello: function () { this.isShow = true } } }) </script> FM؅ཧ͍ͨ͠%0.ͷJEΛࢦఆ )FMMP7VF
  12. <div id="vue-app"> <h1 v-show="isShow">hello!</h1> <button v-on:click="showHello()">show hello</button> </div> <script src="https://unpkg.com/vue"></script>

    <script> new Vue({ el: '#vue-app', data: { isShow: false, }, methods: { showHello: function () { this.isShow = true } } }) </script> EBUB7VFΠϯελϯε಺ʹอ࣋͢ΔσʔλΛએݴ )FMMP7VF
  13. <div id="vue-app"> <h1 v-show="isShow">hello!</h1> <button v-on:click="showHello()">show hello</button> </div> <script src="https://unpkg.com/vue"></script>

    <script> new Vue({ el: '#vue-app', data: { isShow: false, }, methods: { showHello: function () { this.isShow = true } } }) </script> NFUIPETॲཧΛ͢ΔϝιουΛ࣮૷ IUNMଆ͔Β΋7VFΠϯελϯε಺Ͱ΋ݺͼग़͠Մೳ )FMMP7VF
  14. <div id="vue-app"> <h1 v-show="isShow">hello!</h1> <button v-on:click="showHello()">show hello</button> </div> <script src="https://unpkg.com/vue"></script>

    <script> new Vue({ el: '#vue-app', data: { isShow: false, }, methods: { showHello: function () { this.isShow = true } } }) </script> )FMMP7VF
  15. IUUQTUFDIQFQBCPDPNNVVNVVTIPQQJOHDBSU

  16. ͖ͬ͞ͷײ͡Ͱ࢖͍ͬͯΔ 41"Ͱ΋ͳ͘443΋࢖͍ͬͯ·ͤΜ

  17. ཧ༝ wσβΠφʔͱڠۀͩͬͨ w3VCZPO3BJMTͷ্Ͱ࢖ͬͨ

  18. ཧ༝ wσβΠφʔͱڠۀͩͬͨ w3VCZPO3BJMTͷ্Ͱ࢖ͬͨ 3BJMTͷ7JFXϑΝΠϧͰ׬݁ͤ͞Δ )5.-ͷςϯϓϨʔτΛ+BWB4DSJQUଆʹ࣋ͨͳ͍ ˠίϯϙʔωϯτΛ࣋ͨͳ͍

  19. <div id="vue-app"> <h1 v-show="isShow">hello!</h1> <button v-on:click="showHello()">show hello</button> </div> <script src="https://unpkg.com/vue"></script>

    <script> new Vue({ el: '#vue-app', data: { isShow: false, }, methods: { showHello: function () { this.isShow = true } } }) </script> ɾid=“vue-app”͔ͩΒ7VFKT͔͍ͭͬͯΔͷͩͳ ɾv- Ͱ࢝·͍ͬͯΔ͔ΒԿ͔ॲཧʹ͔͍ͭͬͯΔͷͩͳ ɾv-show ͸දࣔ੾Γସ͑Λ͢Δ΍ͭͩͳ ɾv-on:click ΫϦοΫͨ࣌͠ʹԿ͔͍ͯ͠Δͳ )5.-͔ΒಡΈऔΕΔ৘ใ͕ଟ͍ʂ )FMMP7VF
  20. K2VFSZ <div> <h1 id="hidden-h1" style="display: none;">hello!</h1> <button id="h1-show">show hello</button> </div>

    <script src="https://unpkg.com/vue"></script> <script> new Vue({ el: '#vue-app', data: { isShow: false, }, methods: { showHello: function () { this.isShow = true } } }) </script> ɾid="hidden-h1"Կʹ࢖͍ͬͯΔJEͳͷͩΖ͏ ɾstyle="display: none;" DTTʹҠ͍͚ͨ͠ͲҠ͢ͱ
 ɹI͕࠷ॳ͔Βফ͑ͯΔ͜ͱ͕Θ͔Βͳ͘ͳΔͳ ɾid="h1-show" ͸ͨͿΜΫϦοΫͨ͠ΒIΛද͍ࣔͯ͠ΔΜͩΖ͏ +BWB4DSJQU΍$44Λ֬ೝ͠ͳ͍ͱΘ͔Βͳ͍ʂ ˠ։ൃεϐʔυ͕μ΢ϯɺอक΋͠ʹ͍͘
  21. ͚ͭͩۤ࿑ͨ͠఺

  22. BKBYΛ࢖͏৔߹ w7VFKTਪ঑ͷBYJPTͱ͍͏)551ΫϥΠΞϯτΛ࢖༻
 IUUQTHJUIVCDPNN[BCSJTLJFBYJPT w1SPNJTFϕʔε w*&͕ରԠͯ͠ͳ͔ͬͨɾɾɾ

  23. QPMZpMM͍ͭͰʹXFCQBDL CBCFM wCBCFMQPMZpMMͰQPMZpMMΛಉࠝ͢Δ͜ͱͰݹ͍ϒϥ΢β΋࢖͑Δ w&4ʹτϥϯεύΠϧ w&4 &4 Ͱιʔείʔυॻ͚ΔΑ͏ʹͳͬͨʂ wͦͯ͠&4΁ɾɾ

  24. ·ͱΊ w7VFKT੝Γ্͕͍ͬͯΔʢ੝Γ্͍͖͍͛ͯͨʂʣ wখ͔͘͞ΒͰ΋࢝ΊΒΕΔ w)5.-͔ΒಡΈऔΕΔ৘ใ͕ଟ͘อक͠΍͍͢ w+BWB4DSJQUΛϞμϯʹ͍ͯͧ͘͠ʂʂ

  25. ࠓ͙͢ʂ <script src="https://unpkg.com/vue"></script>