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

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

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

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

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

    View Slide

  2. ಥવͰ͕͢ʂ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  11. ※஫ҙ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  15. εέʔϦϯάੑೳʁ

    View Slide

  16. ύϑΥʔϚϯεʁ

    View Slide

  17. No

    View Slide

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

    View Slide

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

    View Slide

  20. ࠓճͷΩʔϫʔυ

    View Slide

  21. ʮڠۀʯ

    View Slide

  22. ࣗ෼

    View Slide

  23. ࣗ෼ x ଞਓ

    View Slide

  24. ࣗ෼ x ଞਓ

    View Slide

  25. ࣗ෼

    View Slide

  26. ࣗ෼ x ະདྷͷࣗ෼

    View Slide

  27. ࣗ෼ x ະདྷͷࣗ෼

    View Slide

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

    View Slide

  29. 2.What’s Vue.js?

    View Slide

  30. Vue.jsͱ͸ʁ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    Click me!

    Source Code
    https://jp.vuejs.org/guide/component.html

    View Slide

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

    Click me!

    Source Code
    https://jp.vuejs.org/guide/component.html

    View Slide

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

    Click me!

    Source Code
    Click me!
    https://jp.vuejs.org/guide/component.html

    View Slide

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

    Click me!

    Source Code
    Click me!
    https://jp.vuejs.org/guide/component.html

    View Slide

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

    Click me!

    Source Code
    Click me!
    https://jp.vuejs.org/guide/component.html

    View Slide

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

    View Slide

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

    View Slide

  52. Vue.js͕΋ͭॊೈ͞

    View Slide

  53. ͸͡Ίͯ࢖͏ͱ͖

    View Slide

  54. ͸͡Ίͯ࢖͏ͱ͖

    Hello, {{name}}


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

    View Slide

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

    View Slide

  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

    View Slide

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

    Hello, {{name}}!

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  61. ग़ͯ͘Δཁ๬

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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”)
    }
    });

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

  75. ັྗ·ͱΊ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  84. Thank you!

    View Slide

  85. and…

    View Slide

  86. Vue 2.0
    2

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  90. Vue 2.0

    View Slide

  91. Vue 2.0 is

    View Slide

  92. Vue 2.0 is here!

    View Slide

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

    View Slide

  94. Vue.js͸

    View Slide

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

    View Slide

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

    View Slide

  97. Thank you!

    View Slide