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

Transcript

1. ໦ଜ
   ޿ւ
   
   (.0
   1FQBCP
   *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. )FMMP
   7VF <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> OFX
    7VF 
    7VFΠϯελϯεΛ࡞੒ )FMMP
    7VF

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Λࢦఆ )FMMP
    7VF

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> EBUB
    7VFΠϯελϯε಺ʹอ࣋͢ΔσʔλΛએݴ )FMMP
    7VF

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Πϯελϯε಺Ͱ΋ݺͼग़͠Մೳ )FMMP
    7VF

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> )FMMP
    7VF

15. IUUQTUFDIQFQBCPDPNNVVNVVTIPQQJOHDBSU

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

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

18. ཧ༝ wσβΠφʔͱڠۀͩͬͨ
    w3VCZ
    PO
    3BJMTͷ্Ͱ࢖ͬͨ 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.-͔ΒಡΈऔΕΔ৘ใ͕ଟ͍ʂ )FMMP
    7VF

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>