Vue.jsから始めるDOMにデータを持たせないアプリケーション開発への第1歩

第51回 長岡IT技術者勉強会

Transcript

1. Vue.js͔Β࢝ΊΔ DOMʹσʔλΛ࣋ͨͤͳ͍ ΞϓϦέʔγϣϯ։ൃ΁ͷୈ1า 2017/3/25 @nemuzuka ୈ51ճ ௕ԬITٕज़ऀษڧձ
2. ࣗݾ঺հ • ยۅ Ұफ(͔ͨ͗Γ ͔ͣΉͶ) • id:nemuzuka / @nemuzuka • Java / JavaScript / Scala • ݸਓࣄۀओ(vss.jp.net)
3. NDS 50+1 ճ໨ ͓ΊͰͱ͏͍͟͝·͢ʂ
4. ࠷ۙͷWebΞϓϦ։ൃ
5. αʔό͸ JSONฦͯ͘͠ΕΕ͹ ԿͰ΋͍͍ɻ Ͱ͸ɺը໘ͷϨϯμϦϯά͸ Ͳ͏։ൃ͠Α͏͔ʁ
6. 1. jQueryͰΨϯόΔ jsίʔυ্ʹ ɾDOMཁૉͷ࡞੒ ɾΠϕϯτͷొ࿥ ɾσʔλՃ޻ ౳͕ͪ͝Όͪ͝ΌʹͳΓɺमਖ਼ͮ͠Β͘ͳΔͷ͸ͦ͏ԕ͘ͳ͍ jQueryͰσβΠϯ͢Δͷ͸πϥΠ... 1ճ͖ͬ͜ΓͳΒؤுΕΔ͚Ͳɺ cssϑϨʔϜϫʔΫͷมߋͱ͔͞ΕΔͱ…΍Δؾ͕…
7. 2. jsςϯϓϨʔτΤϯδϯಋೖ [html+template] [js]
8. ex. Hogan.js • htmlͷςϯϓϨʔτͱjs͕෼཭Ͱ͖ͯεοΩϦʂ • jQueryଆͰDOMΛߏங͢Δྔ͸ݮͬͨ • templateͱσʔλΛඥ෇͚ͨ݁ՌΛappend͢ Δॲཧ͸ඞཁ • σβΠϯͷมߋ΋ͦΜͳʹා͘ͳ͘ͳͬͨ
9. ෆศͳ͜ͱ΋͋Γ·͕͢ ·͊·͊͜ͷߏ੒Ͱ ຬ଍͍ͯ͠·ͨ͠ (40୅ உੑ) clickΠϕϯτΛݩʹ֤ཁૉΛදࣔ/ඇදࣔ͢Δͷ͸ख͚ؒͩͲ ·͊Կͱ͔ͳΔ͠ɺ ੈͷதReactͱ͔Angular2ͱ͔͕ྲྀߦͬͯΔ͚Ͳɺ ࣗ෼͕࡞Δͷ͸ॴḨۀ຿ΞϓϦ͔ͩΒผʹྑ͍΍... ֮͑ͳ͖Ό͍͚ͳ͍͓࡞๏΍λά͕ଟ͍ΜͰ͠ΐ…
10. ਖ਼௚ ৽͍ٕ͠ज़֮͑Δͷ (ಛʹϑϩϯτΤϯυ) ͓ͳ͔͍ͬͺ͍
11. ͨͩɺγεςϜͷن໛͕େ͖͘ ͳͬͯ͘Δͱ • DOMͷidཁૉ͕ඃΒͳ͍Α͏ʹɺͩΜͩΜ௕͘ͳͬͯ͘Δ • ͜ͷclass໊ͬͯม͑ͯྑ͍Μ͚ͩͬʁͦ΋ͦ΋style༻ʁjQuery༻ʁ • طଘΛյ͞ͳ͍Α͏ʹ৽͍͠class࡞੒… • selector͕Ϝμʹ೉͘͠ • DOMʹΞΫηεͯ͠σʔλ(data-* / value)ΛҾͬுͬͯ͘Δͷ໘౗ • άϩʔόϧม਺ʹΞΫηε͍ͯ͠Δͱಉٛ • Ͳ͔͜Β΋ΞΫηεͰ͖ΔͷͰɺଞͷॲཧʹલఏ৚݅ͷσʔλΛফ͞ΕΔ / ্ॻ͖͞ΕΔ͜ͱ΋͋Δ • ॲཧΛ௥͏ͷʹDOMͷมԽΛ௥͏ඞཁ͕͋Δ DOMʹσʔλΛ࣋ͨͤΔ͜ͱʹݶքΛײ࢝͡ΊΔ (2016 ळ)
12. ͋Δ೔ɺVue.js 2.0 ͕ ϦϦʔε͞Εͨͱ͍͏هࣄ͔Β νϡʔτϦΞϧΛݟͯΈΔͱ...
13. ͋Εɺ ࢲʹ΋ແཧͳ͘Ͱ͖Δ͔΋ʁ Vue.js 2.0 σϏϡʔܾҙʂ(2016 ౙ)
14. ಠश Vue.js 2.0 [جຊػೳ]
15. 1. σʔλΛDOM্ʹඳը [html(template)] [js]
16. 2. ૒ํ޲σʔλόΠϯσΟϯά [html(template)] [js] js෦෼/ࢀর෦෼ʹ΋൓ө͞ΕΔ (૒ํ޲σʔλόΠϯσΟϯά) textʹೖྗ͢Δͱ…
17. 3. Arrayσʔλදࣔ [html(template)] [js] ߦ͕૿͑Δ js্Ͱ ͱ࣮ߦ͢Δͱ…
18. ͜ͷ࣌఺Ͱɺ͔ͳΓศར • ؀ڥ͸scriptλάͰಡΈࠐΊ͹͍͍ • npmͱ͔babelͱ͔ෆཁʂ͙࢝͢ΊΒΕΔʂ • templateػೳ • ʮ{{ʯ / ʮ}}ʯ Ͱ஋Λදࣔ͢Δ • jsଆͰDOMཁૉҙࣝ͢Δඞཁͳ͠ • Arrayͷมߋʹ௥ैͯ͠DOM΋มߋͯ͘͠ΕΔ • ૒ํ޲σʔλόΠϯσΟϯά • htmlଆͷมߋˠjsଆʹ൓өɺjsଆͷมߋˠhtmlଆʹ൓өͯ͘͠ΕΔ • αʔό΁ͷϦΫΤετύϥϝʔλ͸js্ͷVueΠϯελϯεͷdataϓϩύςΟ͚ͩҙ͓͚ࣝͯ͠͹ྑ͍ • data-*ͱ͔hiddenͱ͔ෆཁ • Ϣʔβ͕ೖྗͨ͠஋Λidͱ͔selectorΛ࢖༻ͯ͠ɺjsͰरͬͯύϥϝʔλ࡞੒͢Δ͜ͱ΋ෆཁ • σʔλͱDOMͷಉظ͔Βղ์͞Εɺjs͸σʔλͱϩδοΫ͚ͩʹूதͰ͖Δ
19. 4. Πϕϯτͱॲཧͷඥ͚ͮ [html(template)] [js] onclick methods಺ͷؔ਺ʹ͓͍ͯɺ 1. this͸VueΠϯελϯε ɹˠthis.nameͰΞΫηεՄೳ ɹɹ(data͸লུͰ͖Δ) 2. event͸ωΟςΟϒDOMΠϕϯτ
20. 5. ಈత߲໨ / ද੍ࣔޚ • ಈతʹclassΛ੾Γସ͍͑ͨ(ex. ৚݅Λຬͨͨ࣌͠) • v-bind:class • ಈతʹidཁૉΛઃఆ͍ͨ͠ • v-bind:id • ৚݅ʹΑ߲ͬͯ໨Λඇදࣔʹ͍ͨ͠ • v-if লུه๏Ͱʮ:classʯʮ:idʯͱ΋ॻ͚Δ →ʮ:ʯͰ࢝·͍ͬͯΕ͹ಈతͳ߲໨ →seen͕trueͳΒཁૉදࣔ
21. ͜ΕΒΛ૊Έ߹ΘͤΔ͜ͱͰɺ click࣌ʹද߲ࣔ໨Λ੾Γସ͑Δ࣌͸ɺ ͦͷΠϕϯτॲཧ಺ͰdataΛมߋ͢Δ ͚ͩͰ׬݁͠·͢ɻ jQueryͰΨϯόΔΑΓ ָʹͳΓͦ͏ͳؾ͕͠·ͤΜ͔ʁ
22. ಠश Vue.js 2.0 [ίϯϙʔωϯτ]
23. ίϯϙʔωϯτʁ • ҙຯͷ͋Δ୯ҐͰtemplate/data/ΠϕϯτΛ·ͱΊΔ • SPAΛ໨ࢦͯ͠ɺ1ͭͷը໘ʹڊେͳhtml͕͋ΔΑΓ΋ҙຯ͋ Δ୯ҐͰ·ͱΊΕ͹อक͠΍͘͢ͳΔ • ίϯϙʔωϯτ಺Ͱͷ੹຿͕͸͖ͬΓ͢ΔͷͰՄಡੑ΋্͕Δ ͖ͬ͞ͷ ͜ͷ෦෼ΛίϯϙʔωϯτԽ
24. demo͠·͢
25. Vue.jsͰ࡞ͬͨToDoΞϓϦͷίϯϙʔωϯτ https://github.com/nemuzuka/nds51 
    5P%P*UFN 
    5P%P-JTU 
    5P%P&EJU%JBMPH 
    "QQ "QQ 5P%P&EJU%JBMPH 5P%P-JTU 5P%P*UFN ίϯϙʔωϯτͷؔ܎
26. ίϯϙʔωϯτͷϧʔϧ • ࣗ෼ͷ਌(্Ґ) / ࢠ(ԼҐ)ίϯϙʔωϯτͷΈҙࣝ͢Δ(1֊૚͚ͩ) • ࢠίϯϙʔωϯτʹσʔλΛ౉͍ͨ͠ʂ(ҰཡͷσʔλΛ౉͍ͨ͠) • ਌ɿࢠίϯϙʔωϯτ্Ͱv-bindͰ౉͢(:todos=“filteredTodos") • ࢠɿ਌͔ΒpropsͰड͚औΔ͜ͱΛఆٛ͢Δ(props: [“todos"]) • ਌ίϯϙʔωϯτʹΠϕϯτ௨஌͍ͨ͠(ߦΛclick͞Εͨ࣌ʹμΠΞϩάΛOpen͢ΔΠϕϯτΛ਌ʹ౤͍͛ͨ) • ࢠɿ਌ʹ޲͚ͯ$emitͰΠϕϯτΛૹ৴͢Δ(this.$emit(‘OpenModalDialog', …ύϥϝʔλ)) • ਌ɿࢠίϯϙʔωϯτ্ͰΠϕϯτ͕ૹ৴͞Εͨ࣌ͷॲཧΛఆٛ͢Δ(@OpenModalDialog=“openModalDialog") • ࢠίϯϙʔωϯτͷॲཧΛݺͼ͍ͨ(μΠΞϩάΛOpen͍ͨ͠) • ਌ɿࢠίϯϙʔωϯτʹrefࣝผࢠΛఆٛ͢Δ(ref="modalDialog") • ݺͼग़࣌͢ɺ$refs.”ࣝผࢠ”.ϝιου(this.$refs.modalDialog.openDialog)
27. ਤʹ͢Δͱ͜Μͳײ͡ ਌ίϯϙʔωϯτ ࢠίϯϙʔωϯτ [σʔλΛ౉͍ͨ͠] v-bind (:xxx) props [Πϕϯτ௨஌͍ͨ͠] $emit v-on (@xxx) ࢠ [ॲཧΛ௚઀ݺͼ͍ͨ] ref
28. ίϯϙʔωϯτͷԿ͕ྑ͍ͷʁ • ίϯϙʔωϯτ಺ͷin/out͕ཧղ͠΍͘͢ͳΔ • ࢖༻͢Δࢠίϯϙʔωϯτ • components • ਌ίϯϙʔωϯτ͔ΒདྷΔσʔλ • props • ಺෦σʔλ / ॲཧ • data / methods / computed • ਌ʹ௨஌͢ΔΠϕϯτ • $emitͷՕॴ • ࣗίϯϙʔωϯτͷΠϕϯτ(@click) / ࢠίϯϙʔωϯτ͔Β௨஌͞ΕΔΠϕϯτ • template্ʹهࡌ ίϯϙʔωϯτͷ࢓૊Έʹ৐͔ͬΔ͜ͱͰ ಺෦ॲཧͷݟ௨͕͠jQuery + Hogan.jsͷ࣌ʹൺ΂ͯ ֨ஈʹྑ͘ͳΔʂʂ
29. ίϯϙʔωϯτԽɺ࠷ߴ
30. εάʹ࢝Ί·͠ΐ͏ʂ
31. ίϯϙʔωϯτͷొ࿥ • άϩʔόϧͳొ࿥ • Vue.component • ϩʔΧϧͳొ࿥ • VueΠϯελϯεͷcomponentsʹొ࿥
32. vue-cli Λ࢖͍·͠ΐ͏
33. <template>
 <tr @click.stop="openModalDialog">
 <td>{{index + 1}}</td>
 <td class="text-left">{{todo.context}}</td>
 <td>{{todo.lastUpdateDate}}</td>
 <td>
 <button type="button" class="btn btn-danger b <i class="glyphicon glyphicon-remove"></i>
 </button>
 </td>
 </tr>
 </template>
 
 <script>
 export default {
 name: 'todo-item',
 props: ["todo", "index"],
 methods: {
 openModalDialog(e) {
 const self = this;
 self.$emit('OpenModalDialog', e, self.todo);
 },
 deleteItem(e) {
 const self = this;
 self.$emit('DeleteItem', e, self.todo);
 }
 }
 }
 </script>
 
 <style scoped>
 tr {
 cursor: pointer;
 }
 </style>
 vue-cliΛ࢖͏ͱͲ͏ͳΔͷʁ • ίϯϙʔωϯτຖʹvueϑΝΠϧΛ1ͭ࡞੒(࠷ऴతʹjsʹͳΔ) • template(HTML) • Pug౳΋࢖͑Δ໛༷ • script(js) • templateʹ౉͢data΍ɺmethods౳Λఆٛ • style • cssɻ͜ͷίϯϙʔωϯτʹ͚ͩ౰ͯΔɺͱ͍͏ఆٛ΋Մೳ ίϯϙʔωϯτΛ1ͭͷvueϑΝΠϧͰ׬݁͢ΔΑ͏ʹॻ͚ͯɺ੹຿όονϦʂ(୯ҰϑΝΠϧίϯϙʔωϯτ) html/js/css ෳ਺ϑΝΠϧΛߦͬͨΓདྷͨΓ͠ͳͯ͘΋ྑ͍ʂൃࢄ͕ͪ͠ͳը໘։ൃʹடংΛʂʂʂ
34. ͨͩ͠ɺnode.js࢖͍·͢
35. ͪΐͬͱͰ΋ڵຯ͕ग़͖ͯͨਓ͸ɺ https://github.com/nemuzuka/nds51
36. ·ͱΊ • Vue.jsΛ࢖͏ͱDOMʹσʔλΛ࣋ͨͤΔඞཁ͕ݮΓ·͢ • Ծ૝DOM / ૒ํ޲σʔλόΠϯσΟϯάͷ͋Γ͕ͨ͞ • ΋͏ࣗલͰΠϕϯτरͬͯDOMॻ͖׵͑ͳΜͯͨ͘͠ͳ͍ʂʂ • DOMૢ࡞༻ͷid΍classࢦఆ͕େ෯ʹݮͬͨɻΧελϜσʔλଐੑ΋࢖Θͳ͘ͳͬͨ • ίϯϙʔωϯτԽͰॲཧͷ੹຿΍σʔλͷείʔϓ͕ߜΕΔΑ͏ʹͳͬͨ • vue-cliͷߟ͑ํʹܹ͘͠ڞײ • 1ίϯϙʔωϯτ = 1vueϑΝΠϧͷؔ܎͕γϯϓϧͰΠΠ • ʮ͜ͷϑΝΠϧݟ͓͚ͯ͹େମ௥͑Δײ͡ʯ͕࠷ߴʹ͋Γ͕͍ͨɻϑΝΠϧҠಈ͢Δͱ಄ͷ੾Γସ͕͑… • jsͰhtml(template)͸ॻ͖ͨ͘ͳ͍ΜͰ͢Α… • ͍ͭͰʹϒϥ΢βjsΛES6Ͱॻ͚ΔΑ͏ʹͳΓ·͢ • πϥΠͷ͸؀ڥ࡞Δ(ཧղ͢Δ)·Ͱ • ʮ1ճ࡞ͬͯऴΘΓʯ͡Όͳ͍ΞϓϦͳΒɺVue.js΋ྑ͍ͱࢥ͍·͢ʂ
37. ͪͳΈʹɺ2016 ळ࣌఺ͷࢲͷεϖοΫ • jQuery͸஌ͬͯΔɺ࢖ͬͯΔ • Javascriptৄ͘͠͸஌Βͳ͍ • ES5/ES6ͷษڧ͸αϘͬͯͨ • node.jsͷଘࡏ͸஌͍ͬͯΔ͕Πϯετʔϧͨ͜͠ͱͳ͍ • jsϑΝΠϧ͸scriptλάͰ֎෦͔Β࣋ͬͯ͘Δํ͔ࣜ͠΍ͬͨ͜ͱͳ͍ • Reactͱ͔Angularͱ͔ͷଘࡏ͸஌͍ͬͯΔ͕νϡʔτϦΞϧ΋΍ͬͯͳ͍
38. ͦΕ͕3ϲ݄͘Β͍Ͱ… 1. npm / webpack 2. vue-cli 3. ES6Ͱॻ͍ͯBabelͰϏϧυ ͢Δ·ͰʹͳΓ·ͨ͠ʂʋ(˜ʆ)ϊ ※جຊతʹ͸νϡʔτϦΞϧͰԿͱ͔ͳͬͨͷͰ Vue.jsࣗମͷֶशίετ͸௿͍ͱࢥ͍·͢ [͓ੈ࿩ʹͳΓ·ͨ͠] OQNͱXFCQBDLͰϏϧυ
    
    K2VFSZ͔Βͷ࣍ͷεςοϓ
39. Ͱɺ1ͭΞϓϦΛ࡞ͬͯΈͨɻ
40. VSS Kanban • αʔόαΠυ : Scala(Skinny Framework) • ΫϥΠΞϯταΠυ : Vue.js Scala΍Vue.jsΛֶͿͨΊͷͱ͔͔ͬΓʹͯ͠΋Β͑Δͱخ͍͠σε https://github.com/nemuzuka/vss-kanban