Vueはいいぞ！ハンズオン風味

Vue布教のためのインストールから小さく始めるコツ、意外な罠、ステップアップをまとめました。Vueはいいぞ！

Transcript

1. 2018/4/28 Ռ෺Ϧϯ@FruitRiin Vue.js ͸͍͍ͧʂ ϋϯζΦϯ෩ຯฤ
2. Ռ෺Ϧϯ@FruitRiin • ORATTA, inc. - Server Engineer • ۀ຿PHPer 3೥͘Β͍ʁ΃ͪ΃ͪͯ͠·͢ 
 (ࠓͷձࣾ͸ೖࣾ൒೥) • झຯJSer, Vue.jsͷճ͠ऀ
3. Vue.js ͸͍͍ͧ એڭ͠ʹ͖·ͨ͠
4. ͓͠ͳ͕͖ • Vue.js is Կʁ • Πϯετʔϧͯ͠ΈΑ͏ • ϥΠϒίʔσΟϯά • Vue.jsॳֶऀ΁ଃΔTips
5. What's Vue.js • ࠓ࣌ϑϩϯτΤϯυϑϨʔϜϫʔΫTOP3ͷ͏ͪ̍ͭ • ඳը༻ͷίʔυ͕ͱͬͯ΋γϯϓϧɻ
 HTML+vue.js֦ுଐੑ • ૒ํ޲σʔλόΠϯσΟϯάɻ
 ஋͕มΘΔͱඳը΋ҰॹʹมΘΔ • Progressive Framework εέʔϥϒϧʂ
6. ͳͥVue.jsͳͷ͔ • ಈ͘HTML͕ॻ͚ΔΠϝʔδ • React͸JavaScriptͷதʹHTMLΛॻ͘
 ʹΞϓϩʔν͕ٯ • σβΠφͱϓϩάϥϚͷ
 ෼ۀ͕͠΍͍͢Β͍͠ • ͞Βʹಋೖ͕؆୯ʂ
7. ΍ͬͯΈΑ͏ʂ ※npm ͕ಈ͘؀ڥ͸༻ҙ͍ͯͩ͘͠͞
8. Vue CLI Πϯετʔϧ #vue-cliΛΠϯετʔϧ͢Δ
 #vueίϚϯυ͕࢖͑Δ npm install -g vue-cli
9. VueͷϓϩδΣΫτΛ࡞Δ #৭ʑฉ͔ΕΔͷͰ౴͍͑ͯ͘ vue init webpack vuetest ? Project name > (ۭ) ? Project description (ۭ) ? Author (ۭ) ? Vue build (σϑΥͷ΍ͭ)→ standalone ? Install vue-router? No ? Use ESLint to lint your code? No ? Set up unit tests No ? Setup e2e tests with Nightwatch? No ? Should we run `npm install` for you after the project has been created? (recommended) npm
10. ։ൃ൛ىಈʂ #࡞ͬͨϓϩδΣΫτʹҠಈ cd vuetest #ॳճͷΈ npm install #αʔόʔىಈʂ npm run dev #ࢭΊΔͱ͖͸Cmd(Ctrl) + C #ϒϥ΢βͰ http://localhost:8080/
11. Ͱ͖ͨʂ
12. ੡඼൛࡞੒ #distͷԼʹίϯύΠϧ݁Ռ͕࡞੒͞ΕΔ npm run prod
13. …ٯʹී௨ʁ͍͍͑͑ Let’s ϥΠϒίʔσΟϯά
14. Ͱ͖ͳ͔ͬͨͱ͖ͷϝϞ • Hot Module Reloading͕͍͢͝ • data binding(v-model) ͕͍͢͝ • v-if, v-for͕͍͢͝
15. ৭ʑ૊Έ߹ΘͤΔͱ͜͏ͳΔ
16. Vue.js ॳֶऀ΁ଃΔίπ
17. খ࢝͘͞ΊΔ • ཁΒͳ͍ϥΠϒϥϦ͸ೖΕͳ͍ • vue-router ΋ vuex΋࠷ॳ͸ཁΒͳ͍ • ίϯϙʔωϯτ΋෼ׂ͠ͳ͍ • ·ͣ࢝ΊͯงғؾΛ͔ͭΉ
18. ҙ֎ͳ࠷ॳͷ᠘ • data͸ઈରʹ function(){} Ͱॻ͘ • ΧοίΑ͘Arrowؔ਺Ͱॻ͘ͱ
 this͕windowΛࢦͯ͠͠͵ͷͰ஫ҙ
 ʢ಺ଆͰ͍ͬͺ͍࢖͓͏ʂʣ • methods, computed... ΋ಉ༷ͷཧ༝Ͱ function(){} Ͱॻ͘ • ΦϒδΣΫτͷϝιουͱͯ͠ॻ͍ͯ΋OKʂ
19. εςοϓΞοϓ • σβΠϯͷ౷ҰͲ͏͠Α͏ɺ൚༻ύʔπ͸͋Γ΋ͷ࢖͍͍ͨ
 ˠElementUI, Vuetify, Bootstrap-Vue͋ͨΓ͕Αͦ͞͏ • ίʔυ͕Ͱ͔͘ͳ͖ͬͯͨɺ࠶ར༻͍ͨ͠ 
 → ίϯϙʔωϯτΛ෼ׂ͠Α͏ • URLͰදࣔΛ෼͚͍ͨ
 ˠ vue-routerΛಋೖ͠Α͏ • ଞͷίϯϙʔωϯτͱͷσʔλͷड͚౉͕ͭ͠Β͍ 
 → VuexΛಋೖ͠Α͏ • SEOڧ͘ͳΓ͍ͨɺॳظද͕ࣔ஗͍
 ˠ nuxt.js ͱ͍͏SSRϑϨʔϜϫʔΫ͕͋ΔΑʂ
    
20. ίϯϙʔωϯτ෼ׂTips • ີ݁߹ͳίϯϙʔωϯτͰ
 props down, event up ͕μϧ͍ 
 → propsʹobjectΛ౉ͯ͠͠·͏ͷ΋ΞϦʁ • ίϯϙʔωϯτͷ෼ׂઃܭ͸
 Atomic Design͕ࢀߟʹͳΔ͔΋
21. ·ͱΊ • ಋೖ͕؆୯ʂ • εςοϓΞοϓ͠ͳ͕ΒͳΒ
 ֮͑Δͷ΋ΘΓͱ؆୯ʂ • ࢓্͕Γ΋ͱͬͯ΋ΠΠײ͡ʂ
22. Vue.js ͸͍͍ͧ Why Not Try Now!
23. Thank you