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

Slide 1

Slide 1 text

Vue.js େن໛ΞϓϦέʔγϣϯͷߏங Gotanda.js #2 2016-01-08 @kazupon

Slide 2

Slide 2 text

ࣗݾ঺հ • @kazupon • ॴଐɿCUUSOO SYSTEM • ໾৬ɿCTO

Slide 3

Slide 3 text

Vue.jsͱͷؔΘΓ • Vue.js organizationϝϯόͷҰਓ • Vue.js ೔ຊޠެࣜαΠτͷ্ཱ͛ݴ͍ग़ͬ͠΃  http://jp.vuejs.org • Vue.js ެࣜؔ࿈ϦϙδτϦͷԼهΛϝϯς • vuejs/vue-validator • vuejs/jp.vuejs.org

Slide 4

Slide 4 text

Vue.jsͱͷؔΘΓ • Vue.js ؔ࿈ϦϙδτϦͷυΩϡϝϯτ΋຋༁ • vuejs/vue-router • vuejs/vuex • ͦͷଞ • kazupon/vue-i18n 

Slide 5

Slide 5 text

Vue.jsʹ͍ͭͯ

Slide 6

Slide 6 text

Vue.js • MVVM (Model-View-ViewModel)ͳύλʔϯ • γϯϓϧͳ View ϨΠϠʹಛԽͨ͠ϥΠϒϥϦ

Slide 7

Slide 7 text

σʔλόΠϯσΟϯά • WatcherͱObserverͰϦΞΫςΟϒͳσʔλόΠϯ σΟϯάΛ࣮ݱ

Slide 8

Slide 8 text

ίϯϙʔωϯτγεςϜ • UIߏ଄ΛίϯϙʔωϯτπϦʔͰ؅ཧ

Slide 9

Slide 9 text

ֶशίετ͕௿͍ • Vue.jsެࣜαΠτʹ͋ΔυΩϡϝϯτɺ͋Δఔ౓ಡΊ ͹ɺͬ͘͞ͱָʹΞϓϦΛ࡞Εͯ͠·͏ • ϓϩτλΠϓɺখن໛ΞϓϦ޲͚ʹ͸͏͚ͬͯͭ

Slide 10

Slide 10 text

Vue.js͕ए͔Γ͠ࠒʙ  (0.10ɺ0.11ͷࠒʙ)

Slide 11

Slide 11 text

ʮFlux react ݱঢ়֬ೝձʯ (2014/12/25) ΑΓ http://www.slideshare.net/VOYAGE_GROUP/ﬂux-react

Slide 12

Slide 12 text

࠷ۙɺ๭ֶԂࡇͰ΋

Slide 13

Slide 13 text

ʮϑϩϯτΤϯυʹடংΛऔΓ໭͢ํ๏ʯ (2015/11/07) ΑΓ https://speakerdeck.com/fand/hurontoendonizhi-xu-woqu-rili-sufang-fa

Slide 14

Slide 14 text

ͱ͔ɺΑ͘ݴΘΕͯ େن໛ΞϓϦʹ޲͔ͳ͍ͱ Α͘ݴΘΕͨ΋ͷͰͨ͠

Slide 15

Slide 15 text

͔͠͠ɺࠓ͸ҧ͏

Slide 16

Slide 16 text

0.12: Dragon Ball (2015-06-13)

Slide 17

Slide 17 text

1.0: Evangelion (2015-10-27) https://twitter.com/hashedrock/status/660148402584326144

Slide 18

Slide 18 text

͍͔ͭ͘ͷϦϦʔεΛܦͯ େن໛ΞϓϦΛ࡞Δ͜ͱ͕ ༰қʹͳ͖͍ͬͯͯΔ

Slide 19

Slide 19 text

΄͏ɺͦ͏͔ɻ ͳͥͦ͏ͳͷ͔ڭ͑ͯ͘Ε

Slide 20

Slide 20 text

େن໛ΞϓϦ͕ՄೳͳཁҼ • ެࣜϓϥάΠϯͷॆ࣮ • ΤίγεςϜͷ੒௕ • αʔόαΠυϨϯμϦϯά • ։ൃ؀ڥαϙʔτͷॆ࣮ • ΞϓϦέʔγϣϯΞʔΩςΫνϟ

Slide 21

Slide 21 text

ެࣜϓϥάΠϯͷॆ࣮

Slide 22

Slide 22 text

ఏڙ͢ΔެࣜϓϥάΠϯ • ϧʔλ: vue-router • ௨৴: vue-resource • ϑΥʔϜ޲͚όϦσʔλ: vue-validator • ඇಉظσʔλಡࠐ: vue-async-data • RxJS όΠϯσΟϯά: vue-rx ͳͲ

Slide 23

Slide 23 text

ΤίγεςϜͷ੒௕

Slide 24

Slide 24 text

awesome-vue • ϢʔβʔίϛϡχςΟʹΑΔϓϥάΠϯɺϥΠϒϥϦɺ νϡʔτϦΞϧ͕ॆ࣮͠ɺ·ͱΊΒΕ͍ͯΔ  https://github.com/vuejs/awesome-vue

Slide 25

Slide 25 text

αʔόαΠυϨϯμϦϯά

Slide 26

Slide 26 text

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: '', components: { myComponent: { template: '

hello world

' } } }) vm.$on('vueServer.htmlReady', function (html) { console.log(html) })

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

։ൃ؀ڥαϙʔτͷॆ࣮

Slide 29

Slide 29 text

ϞδϡʔϧԽ • vue-loader/vuerify ʹΑΔvueϑΝΠϧͰίϯϙʔ ωϯτ؅ཧ

Slide 30

Slide 30 text

σόοΪϯά • vue-devtools (Chrome֦ு)

Slide 31

Slide 31 text

γϯλοΫεϋΠϥΠτ • 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ͳͲ͕͋Δ

Slide 32

Slide 32 text

υΩϡϝϯτ • ӳޠ  http://vuejs.org • ೔ຊޠ  http://jp.vuejs.org • தࠃޠ  http://cn.vuejs.org • ΠλϦΞޠ (WIP)

Slide 33

Slide 33 text

JavaScriptർ࿑໰୊ • JavaScriptք۾ɺܹม͢ΔΤίγεςϜʹΑͬͯଟ࢈ ͞ΕΔπʔϧɺංେԽ͢ΔઃఆϑΝΠϧΑͬͯർ࿑ऀଓ ग़ https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4#.jqxo59evz

Slide 34

Slide 34 text

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 # υδϟʔϯ!

Slide 35

Slide 35 text

vue-cli • Webpack / Browserify ޲͚ʹԼهΛ2छྨʹΑͬͯ։ൃ؀ڥ ηοτΞοϓΛࢧԉ • γϯϓϧόʔδϣϯ (খن໛ΞϓϦɺϓϩτλΠϓ޲͖)  τϥϯεύΠϥɺvue-loader/vuerifyɺ։ൃ༻؆қαʔό • ϑϧελοΫόʔδϣϯ (େن໛ΞϓϦ޲͖)  ্هγϯϓϧόʔδϣϯʴϗοτϦϩʔσΟϯάɺϦϯλɺς ετ • ScaffoldingςϯϓϨʔτ͸ϢʔβʔʹΑΔΧελϚΠζ΋Մೳ

Slide 36

Slide 36 text

ΞϓϦέʔγϣϯ ΞʔΩςΫνϟ

Slide 37

Slide 37 text

ঢ়ଶ؅ཧ • ঢ়ଶΛҰݩ؅ཧ͢ΔFluxͷstoreύλʔϯΛਪ঑  http://vuejs.org/guide/application.html#State_Management

Slide 38

Slide 38 text

vuex • FluxΛεΫϥον͔Β࣮૷͢Δͷ͕μϧ͍ਓͷͨΊʹɺ ReduxΛΠϯεύΠΞ͠Vueʹ࠷దԽͨ͠ެࣜϓϥάΠϯ Λఏڙ σʔλͷྲྀΕ ͸Ұํ޲

Slide 39

Slide 39 text

vuex • vuexͷొ৔ਓ෺΋Reduxಉ༷γϯϓϧ • State: ΞϓϦέʔγϣϯͷঢ়ଶΛද͢ϓϨʔϯͳΦ ϒδΣΫτ • Mutation: ΞϓϦέʔγϣϯͷঢ়ଶΛมߋͤ͞Δؔ ਺ • Action: Mutation ΛσΟεύον͢Δؔ਺

Slide 40

Slide 40 text

vuex • vuexͷAPI΋γϯϓϧ • Vuex.StoreίϯετϥΫλ  state, mutations, actions, middlewares, strict • Vuex.StoreΦϒδΣΫτϓϩύςΟ  - state  - actions • Vuex.StoreΦϒδΣΫτϝιου  - dispatch  - hotUpdate

Slide 41

Slide 41 text

ͱ͍͏༁ͰҎ্ʂ

Slide 42

Slide 42 text

Vue.js͕େن໛ΞϓϦʹ͸޲ ͔ͳ͍ͱ͍͏ͷ͸աڈͷ΋ͷ

Slide 43

Slide 43 text

“Progressive Framework” ͱͯ͠ࠓޙ΋վળ͠ͳ͕Β ੒௕͍ͯ͘͠ http://blog.evanyou.me/2015/12/20/vuejs-2015-in-review/ ʮVUE.JS: 2015 IN REVIEWʯ