2018/4/28 Ռ෺Ϧϯ@FruitRiin Vue.js ͸͍͍ͧʂ ϋϯζΦϯ෩ຯฤ

Ռ෺Ϧϯ@FruitRiin • ORATTA, inc. - Server Engineer • ۀ຿PHPer 3೥͘Β͍ʁ΃ͪ΃ͪͯ͠·͢ 
 (ࠓͷձࣾ͸ೖࣾ൒೥) • झຯJSer, Vue.jsͷճ͠ऀ

Vue.js ͸͍͍ͧ એڭ͠ʹ͖·ͨ͠

͓͠ͳ͕͖ • Vue.js is Կʁ • Πϯετʔϧͯ͠ΈΑ͏ • ϥΠϒίʔσΟϯά • Vue.jsॳֶऀ΁ଃΔTips

What's Vue.js • ࠓ࣌ϑϩϯτΤϯυϑϨʔϜϫʔΫTOP3ͷ͏ͪ̍ͭ • ඳը༻ͷίʔυ͕ͱͬͯ΋γϯϓϧɻ
 HTML+vue.js֦ுଐੑ • ૒ํ޲σʔλόΠϯσΟϯάɻ
 ஋͕มΘΔͱඳը΋ҰॹʹมΘΔ • Progressive Framework εέʔϥϒϧʂ

ͳͥVue.jsͳͷ͔ • ಈ͘HTML͕ॻ͚ΔΠϝʔδ • React͸JavaScriptͷதʹHTMLΛॻ͘
 ʹΞϓϩʔν͕ٯ • σβΠφͱϓϩάϥϚͷ
 ෼ۀ͕͠΍͍͢Β͍͠ • ͞Βʹಋೖ͕؆୯ʂ

΍ͬͯΈΑ͏ʂ ※npm ͕ಈ͘؀ڥ͸༻ҙ͍ͯͩ͘͠͞

Vue CLI Πϯετʔϧ #vue-cliΛΠϯετʔϧ͢Δ
 #vueίϚϯυ͕࢖͑Δ npm install -g vue-cli

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

։ൃ൛ىಈʂ #࡞ͬͨϓϩδΣΫτʹҠಈ cd vuetest #ॳճͷΈ npm install #αʔόʔىಈʂ npm run dev #ࢭΊΔͱ͖͸Cmd(Ctrl) + C #ϒϥ΢βͰ http://localhost:8080/

Ͱ͖ͨʂ

੡඼൛࡞੒ #distͷԼʹίϯύΠϧ݁Ռ͕࡞੒͞ΕΔ npm run prod

…ٯʹී௨ʁ͍͍͑͑ Let’s ϥΠϒίʔσΟϯά

Ͱ͖ͳ͔ͬͨͱ͖ͷϝϞ • Hot Module Reloading͕͍͢͝ • data binding(v-model) ͕͍͢͝ • v-if, v-for͕͍͢͝

৭ʑ૊Έ߹ΘͤΔͱ͜͏ͳΔ

Vue.js ॳֶऀ΁ଃΔίπ

খ࢝͘͞ΊΔ • ཁΒͳ͍ϥΠϒϥϦ͸ೖΕͳ͍ • vue-router ΋ vuex΋࠷ॳ͸ཁΒͳ͍ • ίϯϙʔωϯτ΋෼ׂ͠ͳ͍ • ·ͣ࢝ΊͯงғؾΛ͔ͭΉ

ҙ֎ͳ࠷ॳͷ᠘ • data͸ઈରʹ function(){} Ͱॻ͘ • ΧοίΑ͘Arrowؔ਺Ͱॻ͘ͱ
 this͕windowΛࢦͯ͠͠͵ͷͰ஫ҙ
 ʢ಺ଆͰ͍ͬͺ͍࢖͓͏ʂʣ • methods, computed... ΋ಉ༷ͷཧ༝Ͱ function(){} Ͱॻ͘ • ΦϒδΣΫτͷϝιουͱͯ͠ॻ͍ͯ΋OKʂ

εςοϓΞοϓ • σβΠϯͷ౷ҰͲ͏͠Α͏ɺ൚༻ύʔπ͸͋Γ΋ͷ࢖͍͍ͨ
 ˠElementUI, Vuetify, Bootstrap-Vue͋ͨΓ͕Αͦ͞͏ • ίʔυ͕Ͱ͔͘ͳ͖ͬͯͨɺ࠶ར༻͍ͨ͠ 
 → ίϯϙʔωϯτΛ෼ׂ͠Α͏ • URLͰදࣔΛ෼͚͍ͨ
 ˠ vue-routerΛಋೖ͠Α͏ • ଞͷίϯϙʔωϯτͱͷσʔλͷड͚౉͕ͭ͠Β͍ 
 → VuexΛಋೖ͠Α͏ • SEOڧ͘ͳΓ͍ͨɺॳظද͕ࣔ஗͍
 ˠ nuxt.js ͱ͍͏SSRϑϨʔϜϫʔΫ͕͋ΔΑʂ

ίϯϙʔωϯτ෼ׂTips • ີ݁߹ͳίϯϙʔωϯτͰ
 props down, event up ͕μϧ͍ 
 → propsʹobjectΛ౉ͯ͠͠·͏ͷ΋ΞϦʁ • ίϯϙʔωϯτͷ෼ׂઃܭ͸
 Atomic Design͕ࢀߟʹͳΔ͔΋

·ͱΊ • ಋೖ͕؆୯ʂ • εςοϓΞοϓ͠ͳ͕ΒͳΒ
 ֮͑Δͷ΋ΘΓͱ؆୯ʂ • ࢓্͕Γ΋ͱͬͯ΋ΠΠײ͡ʂ

Vue.js ͸͍͍ͧ Why Not Try Now!

Thank you