Vue.js 大規模アプリケーションの構築

Transcript

1. Vue.js େن໛ΞϓϦέʔγϣϯͷߏங Gotanda.js #2 2016-01-08 @kazupon
2. ࣗݾ঺հ • @kazupon • ॴଐɿCUUSOO SYSTEM • ໾৬ɿCTO
3. Vue.jsͱͷؔΘΓ • Vue.js organizationϝϯόͷҰਓ • Vue.js ೔ຊޠެࣜαΠτͷ্ཱ͛ݴ͍ग़ͬ͠΃
 http://jp.vuejs.org • Vue.js ެࣜؔ࿈ϦϙδτϦͷԼهΛϝϯς • vuejs/vue-validator • vuejs/jp.vuejs.org
4. Vue.jsͱͷؔΘΓ • Vue.js ؔ࿈ϦϙδτϦͷυΩϡϝϯτ΋຋༁ • vuejs/vue-router • vuejs/vuex • ͦͷଞ • kazupon/vue-i18n

5. Vue.jsʹ͍ͭͯ
6. Vue.js • MVVM (Model-View-ViewModel)ͳύλʔϯ • γϯϓϧͳ View ϨΠϠʹಛԽͨ͠ϥΠϒϥϦ
7. σʔλόΠϯσΟϯά • WatcherͱObserverͰϦΞΫςΟϒͳσʔλόΠϯ σΟϯάΛ࣮ݱ
8. ίϯϙʔωϯτγεςϜ • UIߏ଄ΛίϯϙʔωϯτπϦʔͰ؅ཧ
9. ֶशίετ͕௿͍ • Vue.jsެࣜαΠτʹ͋ΔυΩϡϝϯτɺ͋Δఔ౓ಡΊ ͹ɺͬ͘͞ͱָʹΞϓϦΛ࡞Εͯ͠·͏ • ϓϩτλΠϓɺখن໛ΞϓϦ޲͚ʹ͸͏͚ͬͯͭ
10. Vue.js͕ए͔Γ͠ࠒʙ
 (0.10ɺ0.11ͷࠒʙ)
11. ʮFlux react ݱঢ়֬ೝձʯ (2014/12/25) ΑΓ http://www.slideshare.net/VOYAGE_GROUP/flux-react
12. ࠷ۙɺ๭ֶԂࡇͰ΋
13. ʮϑϩϯτΤϯυʹடংΛऔΓ໭͢ํ๏ʯ (2015/11/07) ΑΓ https://speakerdeck.com/fand/hurontoendonizhi-xu-woqu-rili-sufang-fa
14. ͱ͔ɺΑ͘ݴΘΕͯ େن໛ΞϓϦʹ޲͔ͳ͍ͱ Α͘ݴΘΕͨ΋ͷͰͨ͠
15. ͔͠͠ɺࠓ͸ҧ͏
16. 0.12: Dragon Ball (2015-06-13)
17. 1.0: Evangelion (2015-10-27) https://twitter.com/hashedrock/status/660148402584326144
18. ͍͔ͭ͘ͷϦϦʔεΛܦͯ େن໛ΞϓϦΛ࡞Δ͜ͱ͕ ༰қʹͳ͖͍ͬͯͯΔ
19. ΄͏ɺͦ͏͔ɻ ͳͥͦ͏ͳͷ͔ڭ͑ͯ͘Ε
20. େن໛ΞϓϦ͕ՄೳͳཁҼ • ެࣜϓϥάΠϯͷॆ࣮ • ΤίγεςϜͷ੒௕ • αʔόαΠυϨϯμϦϯά • ։ൃ؀ڥαϙʔτͷॆ࣮ • ΞϓϦέʔγϣϯΞʔΩςΫνϟ
21. ެࣜϓϥάΠϯͷॆ࣮
22. ఏڙ͢ΔެࣜϓϥάΠϯ • ϧʔλ: vue-router • ௨৴: vue-resource • ϑΥʔϜ޲͚όϦσʔλ: vue-validator • ඇಉظσʔλಡࠐ: vue-async-data • RxJS όΠϯσΟϯά: vue-rx ͳͲ
23. ΤίγεςϜͷ੒௕
24. awesome-vue • ϢʔβʔίϛϡχςΟʹΑΔϓϥάΠϯɺϥΠϒϥϦɺ νϡʔτϦΞϧ͕ॆ࣮͠ɺ·ͱΊΒΕ͍ͯΔ
 https://github.com/vuejs/awesome-vue
25. αʔόαΠυϨϯμϦϯά
26. VueServer.js • ϩγΞͷNGS.RUࣾͱ͍͏ αʔυϕϯμ͕ఏڙ͢Δ OSSʹΑͬͯαʔόαΠυϨ ϯμϦϯά΋Մೳʹͳͬͨ
 https://github.com/ ngsru/vue-server • αʔόαΠυͰ΋ΫϥΠΞ ϯταΠυͷVue.jsΛ΄΅ ಉ͡I/F var vueServer = require('vue-server') var Vue = new vueServer.renderer() var vm = new Vue({ template: '<my-component></my-component>', components: { myComponent: { template: '<div>hello world</div>' } } }) vm.$on('vueServer.htmlReady', function (html) { console.log(html) })
27. VueServer.js • SEOɺisomorphic/universal΋ରԠ༰қʹͳͬͨ • ؔ࿈هࣄ • VueServer.js ͷ঺հ
 http://qiita.com/kazupon/items/e401e9d6d07a74e6297d • Vue-ServerͰVue.js SPAͷSEOରԠ
 http://qiita.com/tejitak/items/cc9d835f5eaecb4291a3
28. ։ൃ؀ڥαϙʔτͷॆ࣮
29. ϞδϡʔϧԽ • vue-loader/vuerify ʹΑΔvueϑΝΠϧͰίϯϙʔ ωϯτ؅ཧ
30. σόοΪϯά • vue-devtools (Chrome֦ு)
31. γϯλοΫεϋΠϥΠτ • Sublime text
 vue-syntax-highlight
 https://github.com/vuejs/vue-syntax-highlight • Atom
 language-vue-component
 https://github.com/CYBAI/language-vue-component
 ଞʹɺVimɺVisualStudioCodeͳͲ͕͋Δ
32. υΩϡϝϯτ • ӳޠ
 http://vuejs.org • ೔ຊޠ
 http://jp.vuejs.org • தࠃޠ
 http://cn.vuejs.org • ΠλϦΞޠ (WIP)
33. JavaScriptർ࿑໰୊ • JavaScriptք۾ɺܹม͢ΔΤίγεςϜʹΑͬͯଟ࢈ ͞ΕΔπʔϧɺංେԽ͢ΔઃఆϑΝΠϧΑͬͯർ࿑ऀଓ ग़ https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4#.jqxo59evz
34. vue-cli • ͳΔ΂͘ർ࿑͠ͳ͍Α͏ʹ͢ΔͨΊɺ͍ͭ࠷ۙ(2015- 12-28)ɺVue.js ϓϩδΣΫτ޲͚ʹ Scaffolding πʔϧΛఏڙ
 https://github.com/vuejs/vue-cli $ npm install -g vue-cli $ vue init webpack my-project # ϓϩϯϓτ΁ճ౴ $ cd my-project $ npm install $ npm run dev # υδϟʔϯ!
35. vue-cli • Webpack / Browserify ޲͚ʹԼهΛ2छྨʹΑͬͯ։ൃ؀ڥ ηοτΞοϓΛࢧԉ • γϯϓϧόʔδϣϯ (খن໛ΞϓϦɺϓϩτλΠϓ޲͖)
 τϥϯεύΠϥɺvue-loader/vuerifyɺ։ൃ༻؆қαʔό • ϑϧελοΫόʔδϣϯ (େن໛ΞϓϦ޲͖)
 ্هγϯϓϧόʔδϣϯʴϗοτϦϩʔσΟϯάɺϦϯλɺς ετ • ScaffoldingςϯϓϨʔτ͸ϢʔβʔʹΑΔΧελϚΠζ΋Մೳ
36. ΞϓϦέʔγϣϯ ΞʔΩςΫνϟ
37. ঢ়ଶ؅ཧ • ঢ়ଶΛҰݩ؅ཧ͢ΔFluxͷstoreύλʔϯΛਪ঑
 http://vuejs.org/guide/application.html#State_Management
38. vuex • FluxΛεΫϥον͔Β࣮૷͢Δͷ͕μϧ͍ਓͷͨΊʹɺ ReduxΛΠϯεύΠΞ͠Vueʹ࠷దԽͨ͠ެࣜϓϥάΠϯ Λఏڙ σʔλͷྲྀΕ ͸Ұํ޲
39. vuex • vuexͷొ৔ਓ෺΋Reduxಉ༷γϯϓϧ • State: ΞϓϦέʔγϣϯͷঢ়ଶΛද͢ϓϨʔϯͳΦ ϒδΣΫτ • Mutation: ΞϓϦέʔγϣϯͷঢ়ଶΛมߋͤ͞Δؔ ਺ • Action: Mutation ΛσΟεύον͢Δؔ਺
40. vuex • vuexͷAPI΋γϯϓϧ • Vuex.StoreίϯετϥΫλ
 state, mutations, actions, middlewares, strict • Vuex.StoreΦϒδΣΫτϓϩύςΟ
 - state
 - actions • Vuex.StoreΦϒδΣΫτϝιου
 - dispatch
 - hotUpdate
41. ͱ͍͏༁ͰҎ্ʂ
42. Vue.js͕େن໛ΞϓϦʹ͸޲ ͔ͳ͍ͱ͍͏ͷ͸աڈͷ΋ͷ
43. “Progressive Framework” ͱͯ͠ࠓޙ΋վળ͠ͳ͕Β ੒௕͍ͯ͘͠ http://blog.evanyou.me/2015/12/20/vuejs-2015-in-review/ ʮVUE.JS: 2015 IN REVIEWʯ
44. େن໛ΞϓϦ࡞Δࡍ͸ɺݕ ౼ͯ͠Έͯ͸Ͳ͏Ͱ͠ΐ͏͔ʁ
45. ͝੩ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ