Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

38bee248082f6071230de65e9d74a944?s=47 kazupon
January 08, 2016

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

38bee248082f6071230de65e9d74a944?s=128

kazupon

January 08, 2016
Tweet

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. ͝੩ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ