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

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

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

秋のJavaScript 2016で登壇したスライドです

A54b31d4ebbce222dff88a5c42bac033?s=128

Potato4d(Hanatani Takuma)

October 15, 2016
Tweet

More Decks by Potato4d(Hanatani Takuma)

Other Decks in Programming

Transcript

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

  2. ಥવͰ͕͢ʂ

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

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

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

  6. ࣗݾ঺հ Ֆ୩୓ຏ a.k.a Potato4d • ݱࡏ18ࡀ(ߴߍ3೥) • ࠓ೔͸େࡕ͔Β͖·ͨ͠ • Vueͱ͔Riotͱ͔ɺαʔόʔαΠυͱ͔σ

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

    βΠϯͱ͔ • ौ୩ͰελʔτΞοϓ΍ͬͯ·͢ • ؔ੢ͷίϛϡχςΟӡӦ΍ͬͯ·͢
  8. ࣗݾ঺հ http://www.slideshare.net/TakumaHanatani/jquery-56093566 Ֆ୩୓ຏ a.k.a Potato4d

  9. ࣗݾ঺հ ؔ੢ϑϩϯτΤϯυUG • ؔ੢ݍͷϑϩϯτΤϯυίϛϡχςΟ • ݄࣍ͰJS-FWϓϩϨεͱ͔΍ͬͯ·͢ • ೥ʹ2ճ΄ͲେܕΠϕϯτͳΜ͔΋ • TwitterͰ

    #frontkansai λάͰݕࡧʂ
  10. ࠓճ࿩͢͜ͱ • ϑϨʔϜϫʔΫͷબఆج४ʹ͍ͭͯ • Vue.jsͱ͸ʁ • Vue.jsͷັྗʹ͍ͭͯ • Vue 2.0ʹ͍ͭͯ(͢͜͠)

  11. ※஫ҙ

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

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

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

  15. εέʔϦϯάੑೳʁ

  16. ύϑΥʔϚϯεʁ

  17. No

  18. શͯૉ੖Β͍͠ཁૉͰ͸ ͋Δ΋ͷͷ

  19. ͦ΋ͦ΋ಋೖͰ͖ͳ͚Ε͹ɺ ͦͷՁ஋ΛൃشͰ͖ͳ͍

  20. ࠓճͷΩʔϫʔυ

  21. ʮڠۀʯ

  22. ࣗ෼

  23. ࣗ෼ x ଞਓ

  24. ࣗ෼ x ଞਓ

  25. ࣗ෼

  26. ࣗ෼ x ະདྷͷࣗ෼

  27. ࣗ෼ x ະདྷͷࣗ෼

  28. ڠۀ͠΍͍͢࢓૊Έ͕ Vue.jsʹ͸͋Γ·͢

  29. 2.What’s Vue.js?

  30. Vue.jsͱ͸ʁ

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

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

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

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

  35. 3.Vue.jsͷັྗʹ͍ͭͯ

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

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

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

  39. γϯϓϧ͔ͭڧྗͳAPI

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

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

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

  43. ΧελϜίϯϙʔωϯτ

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

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

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

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

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

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

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

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

  52. Vue.js͕΋ͭॊೈ͞

  53. ͸͡Ίͯ࢖͏ͱ͖

  54. ͸͡Ίͯ࢖͏ͱ͖ <div id=“app”> Hello, {{name}} </div> <script src=“path/to/vue.min.js”></script>
 <script> .

    . . new Vue({ el: “#app”, data: {
 name : “John” } }); index.html
  55. جຊ͕ͻͱͱ͓Γ෼͔Δ৔߹

  56. جຊ͕ͻͱͱ͓Γ෼͔Δ৔߹ $ 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
  57. جຊ͕ͻͱͱ͓Γ෼͔Δ৔߹ <template> <p>Hello, {{name}}!</p> </template> <script> module.exports = { props:

    [“name”] }; </script> comp-a.js
  58. Vue.jsͷॊೈͳར༻ํ๏ • scriptλά͔Β௚ͷར༻OK • ΋ͪΖΜɺnpm͔Βͷಋೖ΋OK • webpack, browserify྆ํ͔ΒͷϏϧυ΋Մೳ

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

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

  61. ग़ͯ͘Δཁ๬

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

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

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

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

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

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

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

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

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

  71. 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”) } });
  72. Vuex https://github.com/vuejs/vuex

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

  75. ັྗ·ͱΊ

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

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

  78. Vue.jsͷັྗ·ͱΊ 3 ։ൃϝϯόʔͷ शख़౓͕·ͪ·ͪ

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

  80. Vue.jsͷັྗ·ͱΊ 3 ٕज़ਫ४ͷࠩҟΛٵऩ͠΍͍͢

  81. Vue.jsͷັྗ·ͱΊ 3 ʹ

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

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

  84. Thank you!

  85. and…

  86. Vue 2.0 2

  87. େ෯ͳεϐʔυΞοϓ 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
  88. αʔόʔαΠυϨϯμϦϯά   +

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

  90. Vue 2.0

  91. Vue 2.0 is

  92. Vue 2.0 is here!

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

    ͭ·Γ……
  94. Vue.js͸

  95. ಋೖ͠΍͘͢ɺ׆༂ͤ͞΍͍͢

  96. ڠۀʹదͨ͠ϑϨʔϜϫʔΫͰ͢

  97. Thank you!