Vue.jsでクロス集計表を作る

第三回浜松IT合同勉強会でLTした資料です

Transcript

1. Hamamatsu / Kanazawa IT LT 2017.6.10 Hamamatsu / Kanazawa IT 1
2. Vue.jsͰΫϩεूܭςʔϒϧΛ࡞ͬͨ࿩ @jacoyutorius Hamamatsu / Kanazawa IT 2
3. About me Hamamatsu / Kanazawa IT 3
4. About me • Yuto Ogi (খ໦ ༔ే) • @jacoyutorius • Ruby / Javascript / AWS / Vue.js / React Na@ve • (೥಺தʹAWSιϦϡʔγϣϯΞʔΩςΫτऔΓ͍ͨ) Hamamatsu / Kanazawa IT 4
5. ίϛϡχςΟͳͲ JAWS-UG Hamamatsu Hamamatsu.rb Hamamatsu / Kanazawa IT 5
6. Kanazawa • Ұճ͚ͩߦͬͨ͜ͱ͕͋Γ·͢ • খদ໻ॿ • ۚ୔21ੈلඒज़ؗ • ͨ·ͨ·௨Γ͔͔ͬͨϥΠϒΧϑΣͰϦϋΛ΍͍ͬͯͨͷ͕ THEATRE BROOKͷϕʔγετͷόϯυͰ֎Ͱ͠͹Β͘ฉ͖ ࠍΕ͍ͯͨࢥ͍ग़ Hamamatsu / Kanazawa IT 6
7. Vue.js Hamamatsu / Kanazawa IT 7
8. Vue.jsͷಛ௃ • ୯ํ޲όΠϯσΟϯά • طଘͷHTML΁ͷ૊ΈࠐΈ͕؆୯ Hamamatsu / Kanazawa IT 8
9. طଘͷHTML΁ͷ૊ΈࠐΈ͕༰қ • Reactͱ͔ͩͱ४උେม • Gulpͱ͔webpackͱ͔ઃఆͯ͠jsxͰॻ͍ͯϏϧυͯ͠ʔ • <script src="vue.js"> ͰಡΈࠐΊ͹ͱΓ͋͑ͣಈ͘ Hamamatsu / Kanazawa IT 9
10. <div id="app"> <h2>{{message}}</h2> </div> <script type="text/javascript"> new Vue({ el: "#app", data: { message: "Hi, vue.js!" } }) </script> Hamamatsu / Kanazawa IT 10
11. h"ps:/ /codepen.io/jacoyutorius/pen/GEoNbJ Hamamatsu / Kanazawa IT 11
12. σʔλόΠϯσΟϯά h"ps:/ /codepen.io/jacoyutorius/pen/GEoNbJ?editors=1010 Hamamatsu / Kanazawa IT 12
13. ࡞ͬͨ΋ͷ • ۙʑؔΘΓͦ͏ͳҊ݅ • ExcelͷϐϘοτςʔϒϧͰ࡞ۀ͍ͯͨ͠ࡏݿॲཧͷγεςϜ Խ (஍ཕष) • ΦʔμʔॲཧΛखೖྗ => γεςϜԽ ͢Δ౎߹ͰɺExcelͰͷࡏ ݿॲཧ΋WebϕʔεͰߦ͏ඞཁ͕ − (·ͨ͸Excel VBAͰطଘExcelΛվम͢Δ͔) Hamamatsu / Kanazawa IT 13
14. Demo Hamamatsu / Kanazawa IT 14
15. Hamamatsu / Kanazawa IT 15
16. Vueίϯϙʔωϯτ ࠶ར༻ՄೳͳHTMLͷ෦඼Λ·ͱΊͨ΋ͷɻ Hamamatsu / Kanazawa IT 16
17. Hamamatsu / Kanazawa IT 17
18. جຊܗ Vue.component('cell', { // ίϯϙʔωϯτͷ໊લ name: "cell", // ਌͔Β౉͞ΕͨϓϩύςΟ props: ["itemstock", "itemsum"], // දࣔ͢ΔHTML template: '<p v-bind:class="cellStyle">{{ this.itemOrderRemain() }}</p>', // Πϕϯτ methods: { itemOrderRemain: function(){ return parseInt(this.itemstock) - parseInt(this.itemsum); } } ) Hamamatsu / Kanazawa IT 18
19. // inputcell: Φʔμʔ਺ೖྗηϧ Vue.component('inputCell', { name: "inputCell", props: ["username", "itemname", "userlevel", "itemprice", "order"], data: function(){ return { orderQty: this.order } }, template: '<div>' + '<input type="number" min="0" v-model="orderQty">' + '<button class="btn btn-sm btn-primary" v-on:click="onSave"></button>' + '</div>', methods: { onSave: function(){ app.updateOrder(this.itemname, this.username, this.orderQty); } } }) Hamamatsu / Kanazawa IT 19
20. Vue.js devtools for Chrome Hamamatsu / Kanazawa IT 20
21. Hamamatsu / Kanazawa IT 21
22. ՝୊ • ϋʔυίʔυ͕ଟ͘࠶ར༻ͣ͠Β͍ • templateʹHTML͕ϕλॻ͖ • ίϯϙʔωϯτຖʹ.vueϑΝΠϧʹ෼ׂ͢Δͷ͕ྑ͍͕ɺͦ ͏͢ΔͱϏϧυ͕ඞཁʹͳͬͯ͘Δ Hamamatsu / Kanazawa IT 22
23. Vue.jsͷؔ࿈ϥΠϒϥϦ • vue-router • vue-cli • Vue-fy.js Hamamatsu / Kanazawa IT 23
24. vue-router Vue.jsެࣜͷϧʔςΟϯάϥΠϒϥϦɻ Hamamatsu / Kanazawa IT 24
25. vue-cli Vue.jsͷίϚϯυϥΠϯπʔϧɻ npm install -g vue-cli Hamamatsu / Kanazawa IT 25
26. vue-cli browserifyͱwebpackͰΞϓϦέʔγϣϯͷϘΠϥʔϓϨʔτΛ࡞ ͬͯ͘ΕΔ vue list Available official templates: ˒ browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing. ˒ browserify-simple - A simple Browserify + vueify setup for quick prototyping. ˒ pwa - PWA template for vue-cli based on the webpack template ˒ simple - The simplest possible Vue setup in a single HTML file ˒ webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction. ˒ webpack-simple - A simple Webpack + vue-loader setup for quick prototyping. Hamamatsu / Kanazawa IT 26
27. Vue$fy.js Vue༻ʹΠΠײ͡σβΠϯ͞Εͨίϯϙʔωϯτूɻ vue-cliͰ࡞੒͞ΕͨϘΠϥʔϓϨʔτ΁ͷ૊ΈࠐΈ΋༰қɻ h"ps:/ /vue*fyjs.com/ Hamamatsu / Kanazawa IT 27
28. Hamamatsu / Kanazawa IT 28
29. Code • Github • h(ps:/ /github.com/jacoyutorius/vue-pivot-table • Codepen • h(ps:/ /codepen.io/jacoyutorius/pen/XgXKvr Hamamatsu / Kanazawa IT 29
30. Hamamatsu / Kanazawa IT 30