「とっつきやすい」フレームワーク Vue.js #jsfes

Slide 1

Slide 1 text

ʮͱ͖ͬͭ΍͍͢ʯϑϨʔϜϫʔΫ Vue.js #jsfes 2016/10 @ TAKUMA Hanatani https://speakerdeck.com/potato4d/totutukiyasui-huremuwaku-vue-dot-js-number-jsfes

Slide 2

Slide 2 text

ಥવͰ͕͢ʂ

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

ࠓճ͸ͳͯ͘΋͋Δఔ౓͸େৎ෉Ͱ͢ʂ

Slide 6

Slide 6 text

ࣗݾ঺հ Ֆ୩୓ຏ a.k.a Potato4d • ݱࡏ18ࡀ(ߴߍ3೥) • ࠓ೔͸େࡕ͔Β͖·ͨ͠ • Vueͱ͔Riotͱ͔ɺαʔόʔαΠυͱ͔σ βΠϯͱ͔ • ौ୩ͰελʔτΞοϓ΍ͬͯ·͢ • ؔ੢ͷίϛϡχςΟӡӦ΍ͬͯ·͢

Slide 7

Slide 7 text

Slide 8

Slide 8 text

ࣗݾ঺հ http://www.slideshare.net/TakumaHanatani/jquery-56093566 Ֆ୩୓ຏ a.k.a Potato4d

Slide 9

Slide 9 text

ࣗݾ঺հ ؔ੢ϑϩϯτΤϯυUG • ؔ੢ݍͷϑϩϯτΤϯυίϛϡχςΟ • ݄࣍ͰJS-FWϓϩϨεͱ͔΍ͬͯ·͢ • ೥ʹ2ճ΄ͲେܕΠϕϯτͳΜ͔΋ • TwitterͰ #frontkansai λάͰݕࡧʂ

Slide 10

Slide 10 text

ࠓճ࿩͢͜ͱ • ϑϨʔϜϫʔΫͷબఆج४ʹ͍ͭͯ • Vue.jsͱ͸ʁ • Vue.jsͷັྗʹ͍ͭͯ • Vue 2.0ʹ͍ͭͯ(͢͜͠)

Slide 11

Slide 11 text

※஫ҙ

Slide 12

Slide 12 text

1.ϑϨʔϜϫʔΫͷબఆج४

Slide 13

Slide 13 text

ϑϨʔϜϫʔΫΛબͿج४͸ʁ

Slide 14

Slide 14 text

৽͍͠ઃܭ΍ύϥμΠϜʁ

Slide 15

Slide 15 text

εέʔϦϯάੑೳʁ

Slide 16

Slide 16 text

ύϑΥʔϚϯεʁ

Slide 17

Slide 17 text

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

ࣗ෼

Slide 23

Slide 23 text

ࣗ෼ x ଞਓ

Slide 24

Slide 24 text

ࣗ෼ x ଞਓ

Slide 25

Slide 25 text

ࣗ෼

Slide 26

Slide 26 text

ࣗ෼ x ະདྷͷࣗ෼

Slide 27

Slide 27 text

ࣗ෼ x ະདྷͷࣗ෼

Slide 28

Slide 28 text

ڠۀ͠΍͍͢࢓૊Έ͕ Vue.jsʹ͸͋Γ·͢

Slide 29

Slide 29 text

2.What’s Vue.js?

Slide 30

Slide 30 text

Vue.jsͱ͸ʁ

Slide 31

Slide 31 text

Vue.jsͱ͸ʁ • γϯϓϧͳ͕ΒओཁͲ͜ΖΛ཈͑ͨAPIΛ΋ͪ

Slide 32

Slide 32 text

Vue.jsͱ͸ʁ • γϯϓϧͳ͕ΒओཁͲ͜ΖΛ཈͑ͨAPIΛ΋ͪ • ॳ৺ऀ͔ΒϞμϯͳ։ൃʹ׳Εͨਓ·Ͱɺ୭ Ͱ΋ѻ͍΍͘͢

Slide 33

Slide 33 text

Vue.jsͱ͸ʁ • γϯϓϧͳ͕ΒओཁͲ͜ΖΛ཈͑ͨAPIΛ΋ͪ • ॳ৺ऀ͔ΒϞμϯͳ։ൃʹ׳Εͨਓ·Ͱɺ୭ Ͱ΋ѻ͍΍͘͢ • ΦϑΟγϟϧͷ֦ுͰεέʔϦϯά͕༰қͳ

Slide 34

Slide 34 text

Vue.jsͱ͸ʁ • γϯϓϧͳ͕ΒओཁͲ͜ΖΛ཈͑ͨAPIΛ΋ͪ • ॳ৺ऀ͔ΒϞμϯͳ։ൃʹ׳Εͨਓ·Ͱɺ୭ Ͱ΋ѻ͍΍͘͢ • ΦϑΟγϟϧͷ֦ுͰεέʔϦϯά͕༰қͳ • JavaScriptϑϨʔϜϫʔΫ

Slide 35

Slide 35 text

3.Vue.jsͷັྗʹ͍ͭͯ

Slide 36

Slide 36 text

Slide 37

Slide 37 text

Vue.jsͷັྗ • γϯϓϧͳ͕ΒओཁͲ͜ΖΛ཈͑ͨAPI • ར༻ऀͷशख़౓ʹରԠ͠΍͍͢ॊೈ͞ • ΦϑΟγϟϧʹΑͬͯอূ͞Ε֦ͨுੑ

Slide 38

Slide 38 text

Vue.jsͷັྗ • γϯϓϧͳ͕ΒओཁͲ͜ΖΛ཈͑ͨAPI • ར༻ऀͷशख़౓ʹରԠ͠΍͍͢ॊೈ͞ • ΦϑΟγϟϧʹΑͬͯอূ͞Ε֦ͨுੑ

Slide 39

Slide 39 text

γϯϓϧ͔ͭڧྗͳAPI

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

ΧελϜίϯϙʔωϯτ

Slide 44

Slide 44 text

• ͬ͘͟Γ͍͏ͱɺʮಠࣗͷHTMLλάΛఆٛͰ ͖Δػೳʯ • Ͱ͸͋Δ΋ͷͷɺʮ͜ͷίϯϙʔωϯτͷJS/ CSSʯͱ͍͏ܗͰ಺෦ʹίʔυΛด͡ࠐΊΔ ͜ͱ͕ՄೳͰɺ͜Ε͕ڧྗ ΧελϜίϯϙʔωϯτ

Slide 45

Slide 45 text

ΧελϜίϯϙʔωϯτ Click me! Source Code https://jp.vuejs.org/guide/component.html

Slide 46

Slide 46 text

ΧελϜίϯϙʔωϯτ Click me! Source Code https://jp.vuejs.org/guide/component.html

Slide 47

Slide 47 text

ΧελϜίϯϙʔωϯτ Click me! Source Code Click me! https://jp.vuejs.org/guide/component.html

Slide 48

Slide 48 text

ΧελϜίϯϙʔωϯτ Click me! Source Code Click me! https://jp.vuejs.org/guide/component.html

Slide 49

Slide 49 text

ΧελϜίϯϙʔωϯτ Click me! Source Code Click me! https://jp.vuejs.org/guide/component.html

Slide 50

Slide 50 text

ΧελϜίϯϙʔωϯτ • ʮίϯϙʔωϯτʯͱ͍͏୯ҐͰѻ͏ͨΊɺ ͦͷதͰ͸ࣗ༝ʹهड़Ͱ͖ɺ֎෦Ԛછ͕গͳ ͍ • ίϯϙʔωϯτࣗମΛಡ·ͳ͍৔߹ɺͦͷத ਎͸ϒϥοΫϘοΫεͱͳΔͨΊɺUIͷઃܭ ͚ͩͰ͋Ε͹ग़དྷΔਓΛ༰қʹ૿΍ͤΔ

Slide 51

Slide 51 text

Vue.jsͷັྗ • γϯϓϧͳ͕ΒओཁͲ͜ΖΛ཈͑ͨAPI • ར༻ऀͷशख़౓ʹରԠ͠΍͍͢ॊೈ͞ • ΦϑΟγϟϧʹΑͬͯอূ͞Ε֦ͨுੑ

Slide 52

Slide 52 text

Vue.js͕΋ͭॊೈ͞

Slide 53

Slide 53 text

͸͡Ίͯ࢖͏ͱ͖

Slide 54

Slide 54 text

͸͡Ίͯ࢖͏ͱ͖

Hello, {{name}}

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 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 57

Slide 57 text

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

Hello, {{name}}!

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

Vue.jsͷັྗ • γϯϓϧͳ͕ΒओཁͲ͜ΖΛ཈͑ͨAPI • ར༻ऀͷशख़౓ʹରԠ͠΍͍͢ॊೈ͞ • ΦϑΟγϟϧʹΑͬͯอূ͞Ε֦ͨுੑ

Slide 60

Slide 60 text

ΦϑΟγϟϧʹΑͬͯ อূ͞Ε֦ͨுੑ

Slide 61

Slide 61 text

ग़ͯ͘Δཁ๬

Slide 62

Slide 62 text

͔ͬ͠ΓSPAͱͯ͠ͷମࡋͷ੔ͬͨΞϓϦέʔγϣϯΛ࡞Γ͍ͨ ग़ͯ͘Δཁ๬

Slide 63

Slide 63 text

͔ͬ͠ΓSPAͱͯ͠ͷମࡋͷ੔ͬͨΞϓϦέʔγϣϯΛ࡞Γ͍ͨ Vue.jsʹ࠷దԽ͞ΕͨFlux࣮૷͸ͳ͍ͷʁ ग़ͯ͘Δཁ๬

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 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 72

Slide 72 text

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

Slide 73

Slide 73 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 74

Slide 74 text

֦ுػೳ • ϧʔςΟϯά΍Flux࣮૷ɺSSRͳͲඞཁͳ΋ͷ ͸Ұ௨Γἧ͍ͬͯΔ • ݱঢ়શͯVue.jsຊମͷ؅ཧԼͱͳ͍ͬͯΔͷ Ͱɺͦͷ͋ͨΓ΋҆৺ϙΠϯτ

Slide 75

Slide 75 text

ັྗ·ͱΊ

Slide 76

Slide 76 text

Vue.jsͷັྗ·ͱΊ 1 • γϯϓϧͳAPIઃܭͰɺ୭Ͱ΋ֶͼ΍͍͢ • ͦ͜͢Β΋ϒϥοΫϘοΫεʹͰ͖Δ • scriptλά͔Β͸͡ΊΔ͜ͱ΋ग़དྷΔ • ૯ͯ͡ʮͱ͖ͬͭ΍͍͢ʯ

Slide 77

Slide 77 text

Vue.jsͷັྗ·ͱΊ 2 • ͔ͬ͠Γ։ൃ͍ͨ͠৔߹͸Router͔ΒFluxύ λʔϯͷ׆༻ɺSSR·ͰͳΜͰ΋Ͱ͖Δ • ͦΕΒΛར༻͢Δ࣌ʹɺ(VuexΛআ͖)ݩͷઃ ܭ͔Βେ͖͘ҳ୤͢Δ͜ͱ͕ͳ͍ • εςοϓΞοϓ͠΍͍͢

Slide 78

Slide 78 text

Vue.jsͷັྗ·ͱΊ 3 ։ൃϝϯόʔͷ शख़౓͕·ͪ·ͪ

Slide 79

Slide 79 text

Vue.jsͷັྗ·ͱΊ 3 ͋ͱͰͲΜͳਓ͕ ϝϯςφϯε͢Δ͔෼͔Βͳ͍

Slide 80

Slide 80 text

Vue.jsͷັྗ·ͱΊ 3 ٕज़ਫ४ͷࠩҟΛٵऩ͠΍͍͢

Slide 81

Slide 81 text

Vue.jsͷັྗ·ͱΊ 3 ʹ

Slide 82

Slide 82 text

Vue.jsͷັྗ·ͱΊ 3 ಋೖ͠΍͘͢ɺ׆༂ͤ͞΍͍͢

Slide 83

Slide 83 text

Vue.jsͷັྗ·ͱΊ 3 ͦΜͳϑϨʔϜϫʔΫ

Slide 84

Slide 84 text

Thank you!

Slide 85

Slide 85 text

and…

Slide 86

Slide 86 text

Slide 87

Slide 87 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 88

Slide 88 text

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

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

Slide 91

Slide 91 text

Vue 2.0 is

Slide 92

Slide 92 text

Vue 2.0 is here!

Slide 93

Slide 93 text

·ͱΊ • Vue.js͸ʮͱ͖ͬͭ΍͍͢ʯFWͰ͋Δ • ͦͷಛ௕͸ɺ࡞ۀऀͷशख़౓ͷࠩҟΛٵऩ͠΍͢ ͘ɺʮڠۀʯͱ͍͏఺Ͱඇৗʹ༏ल • ͦͷ্ͰɺެࣜϓϥάΠϯʹΑΔόϦόϦ։ൃ΋ OK • ͭ·Γ……