Tweet
Tweet

Slide 1

Slide 1 text

Vue.jsͱͦͷະདྷ 2.0 #wbkyoto 2016/10 @ TAKUMA Hanatani

Slide 2

Slide 2 text

https://speakerdeck.com/potato4d

Slide 3

Slide 3 text

Ұ൪ࠨ্

Slide 4

Slide 4 text

ಥવͰ͕͢ʂ

Slide 5

Slide 5 text

JSϑϨʔϜϫʔΫܦݧ͸͋Γ·͔͢ʁ

Slide 6

Slide 6 text

Vue.jsΛ৮ͬͨ͜ͱ͸͋Γ·͔͢ʁ

Slide 7

Slide 7 text

SPA։ൃΛͨ͜͠ͱ͸͋Γ·͔͢ʁ

Slide 8

Slide 8 text

ࠓճ͸ͳͯ͘΋͋Δఔ౓͸େৎ෉Ͱ͢ʂ ʢલ൒·Ͱ͸جຊతͳઆ໌Λ͠·͢ʣ

Slide 9

Slide 9 text

ࣗݾ঺հ • Ֆ୩୓ຏ a.k.a. Potato4d • य़͔ΒࣾձਓʹͳΓͦ͏ • JSϝΠϯͰɺσβΠϯ΍ཪ΋΍ͬͨΓ • ࠓճ͸WordPressͷ࿩͸෧ҹͯ͠·͢

Slide 10

Slide 10 text

Vue 2.0ͷυΩϡϝϯτͷ຋༁ ͸͡Ί·ͨ͠

Slide 11

Slide 11 text

ࠓճ࿩͢͜ͱ • Vue.jsͷ͍͍ͱ͜Ζ • Vue.jsʹ΋ؚ·Ε࠷ۙͷϑϨʔϜϫʔΫͰසൟ ʹར༻͞ΕΔػೳʹ͍ͭͯ • Vue 2.0ʹ͍ͭͯ

Slide 12

Slide 12 text

What’s Vue.js?

Slide 13

Slide 13 text

Vue.jsͱ͸Կ͔ʁ • JavaScriptͷϑϨʔϜϫʔΫͷͻͱͭ • γϯϓϧͰܰྔͰ͋Δ͜ͱ͕΢Ϧ • ϋʔυϧ͕௿͘ɺ༷ʑͳ৔ʹಋೖ͠΍͍͢ • ࠷ۙ2.0͕Ͱͯɺ৭ʑਐԽͨ͠

Slide 14

Slide 14 text

Vue.jsͷັྗ 1. γϯϓϧͰܰྔͳAPI 2. शख़౓ʹԠͯ͡ߏ੒ΛมԽͰ͖Δॊೈ͞ 3. தن໛Ͱ΋ར༻͠΍͍֦͢ு܈

Slide 15

Slide 15 text

1. γϯϓϧͰܰྔͳAPI

Slide 16

Slide 16 text

Vue.jsͷAPI • ૒ํ޲όΠϯσΟϯά • ΧελϜίϯϙʔωϯτ • ΧελϜσΟϨΫςΟϒ • etc...

Slide 17

Slide 17 text

ͬ͘͟Γݴ͏ͱ • Mustacheه๏΍಺ଁͷϑοΫʹΑͬͯJSͱ HTMLؒͰσʔλΛڞ༗͢Δػೳ • HTMLλάΛࣗ࡞͢Δػೳ • HTMLλάʹϑοΫΛ͚ͭΒΕΔػೳ

Slide 18

Slide 18 text

Vue.jsͷAPI • ૒ํ޲όΠϯσΟϯά • ΧελϜίϯϙʔωϯτ • ΧελϜσΟϨΫςΟϒ • etc...

Slide 19

Slide 19 text

૒ํ޲όΠϯσΟϯά

Slide 20

Slide 20 text

૒ํ޲όΠϯσΟϯά • Mustacheه๏({{hoge}})Λ༻͍Δ͜ͱͰJS͔ ΒHTML΁σʔλΛྲྀ͠ࠐΉ͜ͱ͕ग़དྷΔ • v-modelΛར༻͢Δ͜ͱͰɺϑΥʔϜͷೖྗ஋ ͱJS্ͷม਺ͷ஋ͷยํ͕มΘΔͱ͖ɺ΋͏ ยํ΋ࣗಈͰมΘΔΑ͏ʹͳΔ

Slide 21

Slide 21 text

૒ํ޲όΠϯσΟϯά

{{message}}

HTML Code https://jp.vuejs.org

Slide 22

Slide 22 text

૒ํ޲όΠϯσΟϯά var demo = new Vue({ el: “#demo” data:{ message: “Hello Vue.js!” } }); JavaScript Code https://jp.vuejs.org

Slide 23

Slide 23 text

૒ํ޲όΠϯσΟϯά Result https://jp.vuejs.org

Slide 24

Slide 24 text

૒ํ޲όΠϯσΟϯά Result https://jp.vuejs.org

Slide 25

Slide 25 text

ΧελϜίϯϙʔωϯτ

Slide 26

Slide 26 text

ΧελϜίϯϙʔωϯτ • ͬ͘͟Γ͍͏ͱɺʮಠࣗͷHTMLλάΛఆٛͰ ͖Δػೳʯ • Ͱ͸͋Δ͕ɺJSͷൣғͱͳΔ౎߹্ɺείʔϓ Λด͡ࠐΊΒΕΔ༷ʹͳΔͳͲͷར఺͕͋Δ • Vue.jsΛ࢖༻͢Δ৔߹͸ɺίϯϙʔωϯτ͕୯ Ґͷج४ͱͳΔ

Slide 27

Slide 27 text

ΧελϜίϯϙʔωϯτ
var Greeting = new Vue.extend({ props: “name”, template: “<p>Hello, {{name}}.</p>” ); Vue.component(“greeting”, Greeting); new Vue({el: “#app”}); index.html

Slide 28

Slide 28 text

ΧελϜίϯϙʔωϯτ Result

Slide 29

Slide 29 text

ΧελϜίϯϙʔωϯτ
var Greeting = new Vue.extend({ props: “name”, template: “<p>Hello, {{name}}.</p>” ); Vue.component(“greeting”, Greeting); new Vue({el: “#app”}); index.html

Slide 30

Slide 30 text

ΧελϜίϯϙʔωϯτ Result

Slide 31

Slide 31 text

͜Ε·Ͱͷίʔυ

Slide 32

Slide 32 text

͜Ε·Ͱͷίʔυ (function(){ var data = “hoge”; $(“input”).val(data); $(“p”).val(data); $(“input”).on(“keyup”, function(){ $(“p”).text($(this).val()); }); }()); jQuery Code

Slide 33

Slide 33 text

ॻ͔ͳ͍͍ͯ͘

Slide 34

Slide 34 text

2. Vue.js͕΋ͭॊೈ͞

Slide 35

Slide 35 text

͸͡Ίͯ࢖͏ͱ͖

Slide 36

Slide 36 text

͸͡Ίͯ࢖͏ͱ͖
Hello, {{name}}

 . . . new Vue({ el: “#app”, data: {
 name : “John” } }); index.html

Slide 37

Slide 37 text

͋Δఔ౓׳Ε͖ͯͨͱ͖

Slide 38

Slide 38 text

͋Δఔ౓׳Ε͖ͯͨͱ͖

 index.html

Slide 39

Slide 39 text

͋Δఔ౓׳Ε͖ͯͨͱ͖ var ComponentA = Vue.extend({ props: [“name”], template: “

Hello, {{name}}

” }); Vue.extend(“comp-a”, ComponentA); comp-a.js

Slide 40

Slide 40 text

͋Δఔ౓׳Ε͖ͯͨͱ͖ new Vue({ el: “#app” }); main.js

Slide 41

Slide 41 text

جຊ͕ͻͱͱ͓Γ෼͔Δ৔߹

Slide 42

Slide 42 text

جຊ͕ͻͱͱ͓Γ෼͔Δ৔߹ $ npm install -D vue webpack vue-loader etc… const Vue = require(“vue”); const App = require(“./app.vue”); Vue.component(“comp-a”, require(“./components/comp-a.vue”); Vue.component(“comp-b”, require(“./components/comp-b.vue”); new Vue(App); On the terminal index.js

Slide 43

Slide 43 text

جຊ͕ͻͱͱ͓Γ෼͔Δ৔߹

Hello, {{name}}!

module.exports = { props: [“name”] }; comp-a.js

Slide 44

Slide 44 text

Vue.jsͷར༻ํ๏ • scriptλά͔Β௚ͷར༻OK • ΋ͪΖΜɺnpm͔Βͷಋೖ΋OK • webpack, browserify྆ํ͔ΒͷϏϧυ΋Մೳ

Slide 45

Slide 45 text

தن໛Ͱ΋ ར༻͠΍͍֦͢ு܈

Slide 46

Slide 46 text

͔ͬ͠ΓSPAͱͯ͠ͷମࡋͷ੔ͬͨΞϓϦέʔγϣϯΛ࡞Γ͍ͨ Vue.jsʹ࠷దԽ͞ΕͨFlux࣮૷͸ͳ͍ͷʁ ग़ͯ͘Δཁ๬ JavaScriptͷϑϨʔϜϫʔΫ࢖͏ͱSEOͷ໘͕ͳ͊……

Slide 47

Slide 47 text

ΑΓਂ͘࢖͏৔߹ • ʮͪΌΜͱʯSPA͍ͨ͠ɹˠɹ

Slide 48

Slide 48 text

ΑΓਂ͘࢖͏৔߹ • ʮͪΌΜͱʯSPA͍ͨ͠ɹˠɹVueRouter

Slide 49

Slide 49 text

ΑΓਂ͘࢖͏৔߹ • ʮͪΌΜͱʯSPA͍ͨ͠ɹˠɹVueRouter • FluxύλʔϯΛ࢖͍͍ͨɹˠɹ

Slide 50

Slide 50 text

ΑΓਂ͘࢖͏৔߹ • ʮͪΌΜͱʯSPA͍ͨ͠ɹˠɹVueRouter • FluxύλʔϯΛ࢖͍͍ͨɹˠɹVuex

Slide 51

Slide 51 text

ΑΓਂ͘࢖͏৔߹ • ʮͪΌΜͱʯSPA͍ͨ͠ɹˠɹVueRouter • FluxύλʔϯΛ࢖͍͍ͨɹˠɹVuex • SSRΛ͍ͨ͠ɹɹɹɹɹɹˠɹ

Slide 52

Slide 52 text

ΑΓਂ͘࢖͏৔߹ • ʮͪΌΜͱʯSPA͍ͨ͠ɹˠɹVueRouter • FluxύλʔϯΛ࢖͍͍ͨɹˠɹVuex • SSRΛ͍ͨ͠ɹɹɹɹɹɹˠɹVue 2.0

Slide 53

Slide 53 text

VueRouter(with 1.x) router.map({ "/": { component: require(“./pages/index.vue”) }, “users/“ :{ component: require(“./pages/users/index.vue”) }, “/users/:id”: { component: require(“./pages/users/detail.vue”) } });

Slide 54

Slide 54 text

Vuex https://github.com/vuejs/vuex

Slide 55

Slide 55 text

and…

Slide 56

Slide 56 text

Vue 2.0 2

Slide 57

Slide 57 text

େ෯ͳεϐʔυΞοϓ 1.0ͱൺֱͯ͠໿1.7ഒͷ଎౓վળ Vanilla JS Vue 2.0 Vue 1.0 https://medium.com/the-vue-point/vue-2-0-is-here-ef1f26acf4b8#.xqevlvkak 1.0x 1.37x 2.16x

Slide 58

Slide 58 text

αʔόʔαΠυϨϯμϦϯά   +

Slide 59

Slide 59 text

Server-Side Rendering(with 2.0) const Vue = require('vue'); const app = new Vue({ render: function (h) { return h('p', 'hello world'); }; }); const renderer = require('vue-server-renderer').createRenderer(); renderer.renderToString(app, (error, html) => { if (error) throw error; console.log(html); }); http://vuejs.org/guide/ssr.html

Slide 60

Slide 60 text

ߴ͍ޓ׵ੑ શͯͷAPIͷ͏ͪɺ90%͕มߋͳ͠(Router͸มߋ͋Γ) http://vuejs.org/guide/migration.html 

Slide 61

Slide 61 text

Vue 2.0

Slide 62

Slide 62 text

Vue 2.0 is

Slide 63

Slide 63 text

Vue 2.0 is here!

Slide 64

Slide 64 text

·ͱΊ • Vue.js͸؆ܿͰΘ͔Γ΍͍͢ • ॳֶऀ͔Βख़࿅ऀ·Ͱɺ෯޿͍Ϣʔβʔ͕ѻ ͍΍͍ͭ͘͢Γʹͳ͍ͬͯΔ • ΦϑΟγϟϧͷ֦ு͕๛෋Ͱɺجຊతʹେମ ͳΜͰ΋Ͱ͖Δ

Slide 65

Slide 65 text

Thank you!