Vue.js͔Β࢝ΊΔ DOMʹσʔλΛ࣋ͨͤͳ͍ ΞϓϦέʔγϣϯ։ൃ΁ͷୈ1า 2017/3/25 @nemuzuka ୈ51ճ ௕ԬITٕज़ऀษڧձ

ࣗݾ঺հ • ยۅ Ұफ(͔ͨ͗Γ ͔ͣΉͶ) • id:nemuzuka / @nemuzuka • Java / JavaScript / Scala • ݸਓࣄۀओ(vss.jp.net)

NDS 50+1 ճ໨ ͓ΊͰͱ͏͍͟͝·͢ʂ

࠷ۙͷWebΞϓϦ։ൃ

αʔό͸ JSONฦͯ͘͠ΕΕ͹ ԿͰ΋͍͍ɻ Ͱ͸ɺը໘ͷϨϯμϦϯά͸ Ͳ͏։ൃ͠Α͏͔ʁ

1. jQueryͰΨϯόΔ jsίʔυ্ʹ ɾDOMཁૉͷ࡞੒ ɾΠϕϯτͷొ࿥ ɾσʔλՃ޻ ౳͕ͪ͝Όͪ͝ΌʹͳΓɺमਖ਼ͮ͠Β͘ͳΔͷ͸ͦ͏ԕ͘ͳ͍ jQueryͰσβΠϯ͢Δͷ͸πϥΠ... 1ճ͖ͬ͜ΓͳΒؤுΕΔ͚Ͳɺ cssϑϨʔϜϫʔΫͷมߋͱ͔͞ΕΔͱ…΍Δؾ͕…

2. jsςϯϓϨʔτΤϯδϯಋೖ [html+template] [js]

ex. Hogan.js • htmlͷςϯϓϨʔτͱjs͕෼཭Ͱ͖ͯεοΩϦʂ • jQueryଆͰDOMΛߏங͢Δྔ͸ݮͬͨ • templateͱσʔλΛඥ෇͚ͨ݁ՌΛappend͢ Δॲཧ͸ඞཁ • σβΠϯͷมߋ΋ͦΜͳʹා͘ͳ͘ͳͬͨ

ෆศͳ͜ͱ΋͋Γ·͕͢ ·͊·͊͜ͷߏ੒Ͱ ຬ଍͍ͯ͠·ͨ͠ (40୅ உੑ) clickΠϕϯτΛݩʹ֤ཁૉΛදࣔ/ඇදࣔ͢Δͷ͸ख͚ؒͩͲ ·͊Կͱ͔ͳΔ͠ɺ ੈͷதReactͱ͔Angular2ͱ͔͕ྲྀߦͬͯΔ͚Ͳɺ ࣗ෼͕࡞Δͷ͸ॴḨۀ຿ΞϓϦ͔ͩΒผʹྑ͍΍... ֮͑ͳ͖Ό͍͚ͳ͍͓࡞๏΍λά͕ଟ͍ΜͰ͠ΐ…

ਖ਼௚ ৽͍ٕ͠ज़֮͑Δͷ (ಛʹϑϩϯτΤϯυ) ͓ͳ͔͍ͬͺ͍

ͨͩɺγεςϜͷن໛͕େ͖͘ ͳͬͯ͘Δͱ • DOMͷidཁૉ͕ඃΒͳ͍Α͏ʹɺͩΜͩΜ௕͘ͳͬͯ͘Δ • ͜ͷclass໊ͬͯม͑ͯྑ͍Μ͚ͩͬʁͦ΋ͦ΋style༻ʁjQuery༻ʁ • طଘΛյ͞ͳ͍Α͏ʹ৽͍͠class࡞੒… • selector͕Ϝμʹ೉͘͠ • DOMʹΞΫηεͯ͠σʔλ(data-* / value)ΛҾͬுͬͯ͘Δͷ໘౗ • άϩʔόϧม਺ʹΞΫηε͍ͯ͠Δͱಉٛ • Ͳ͔͜Β΋ΞΫηεͰ͖ΔͷͰɺଞͷॲཧʹલఏ৚݅ͷσʔλΛফ͞ΕΔ / ্ॻ͖͞ΕΔ͜ͱ΋͋Δ • ॲཧΛ௥͏ͷʹDOMͷมԽΛ௥͏ඞཁ͕͋Δ DOMʹσʔλΛ࣋ͨͤΔ͜ͱʹݶքΛײ࢝͡ΊΔ (2016 ळ)

͋Δ೔ɺVue.js 2.0 ͕ ϦϦʔε͞Εͨͱ͍͏هࣄ͔Β νϡʔτϦΞϧΛݟͯΈΔͱ...

͋Εɺ ࢲʹ΋ແཧͳ͘Ͱ͖Δ͔΋ʁ Vue.js 2.0 σϏϡʔܾҙʂ(2016 ౙ)

ಠश Vue.js 2.0 [جຊػೳ]

1. σʔλΛDOM্ʹඳը [html(template)] [js]

2. ૒ํ޲σʔλόΠϯσΟϯά [html(template)] [js] js෦෼/ࢀর෦෼ʹ΋൓ө͞ΕΔ (૒ํ޲σʔλόΠϯσΟϯά) textʹೖྗ͢Δͱ…

3. Arrayσʔλදࣔ [html(template)] [js] ߦ͕૿͑Δ js্Ͱ ͱ࣮ߦ͢Δͱ…

͜ͷ࣌఺Ͱɺ͔ͳΓศར • ؀ڥ͸scriptλάͰಡΈࠐΊ͹͍͍ • npmͱ͔babelͱ͔ෆཁʂ͙࢝͢ΊΒΕΔʂ • templateػೳ • ʮ{{ʯ / ʮ}}ʯ Ͱ஋Λදࣔ͢Δ • jsଆͰDOMཁૉҙࣝ͢Δඞཁͳ͠ • Arrayͷมߋʹ௥ैͯ͠DOM΋มߋͯ͘͠ΕΔ • ૒ํ޲σʔλόΠϯσΟϯά • htmlଆͷมߋˠjsଆʹ൓өɺjsଆͷมߋˠhtmlଆʹ൓өͯ͘͠ΕΔ • αʔό΁ͷϦΫΤετύϥϝʔλ͸js্ͷVueΠϯελϯεͷdataϓϩύςΟ͚ͩҙ͓͚ࣝͯ͠͹ྑ͍ • data-*ͱ͔hiddenͱ͔ෆཁ • Ϣʔβ͕ೖྗͨ͠஋Λidͱ͔selectorΛ࢖༻ͯ͠ɺjsͰरͬͯύϥϝʔλ࡞੒͢Δ͜ͱ΋ෆཁ • σʔλͱDOMͷಉظ͔Βղ์͞Εɺjs͸σʔλͱϩδοΫ͚ͩʹूதͰ͖Δ

4. Πϕϯτͱॲཧͷඥ͚ͮ [html(template)] [js] onclick methods಺ͷؔ਺ʹ͓͍ͯɺ 1. this͸VueΠϯελϯε ɹˠthis.nameͰΞΫηεՄೳ ɹɹ(data͸লུͰ͖Δ) 2. event͸ωΟςΟϒDOMΠϕϯτ

5. ಈత߲໨ / ද੍ࣔޚ • ಈతʹclassΛ੾Γସ͍͑ͨ(ex. ৚݅Λຬͨͨ࣌͠) • v-bind:class • ಈతʹidཁૉΛઃఆ͍ͨ͠ • v-bind:id • ৚݅ʹΑ߲ͬͯ໨Λඇදࣔʹ͍ͨ͠ • v-if লུه๏Ͱʮ:classʯʮ:idʯͱ΋ॻ͚Δ →ʮ:ʯͰ࢝·͍ͬͯΕ͹ಈతͳ߲໨ →seen͕trueͳΒཁૉදࣔ

͜ΕΒΛ૊Έ߹ΘͤΔ͜ͱͰɺ click࣌ʹද߲ࣔ໨Λ੾Γସ͑Δ࣌͸ɺ ͦͷΠϕϯτॲཧ಺ͰdataΛมߋ͢Δ ͚ͩͰ׬݁͠·͢ɻ jQueryͰΨϯόΔΑΓ ָʹͳΓͦ͏ͳؾ͕͠·ͤΜ͔ʁ

ಠश Vue.js 2.0 [ίϯϙʔωϯτ]

ίϯϙʔωϯτʁ • ҙຯͷ͋Δ୯ҐͰtemplate/data/ΠϕϯτΛ·ͱΊΔ • SPAΛ໨ࢦͯ͠ɺ1ͭͷը໘ʹڊେͳhtml͕͋ΔΑΓ΋ҙຯ͋ Δ୯ҐͰ·ͱΊΕ͹อक͠΍͘͢ͳΔ • ίϯϙʔωϯτ಺Ͱͷ੹຿͕͸͖ͬΓ͢ΔͷͰՄಡੑ΋্͕Δ ͖ͬ͞ͷ ͜ͷ෦෼ΛίϯϙʔωϯτԽ

demo͠·͢

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 ίϯϙʔωϯτͷؔ܎

ίϯϙʔωϯτͷϧʔϧ • ࣗ෼ͷ਌(্Ґ) / ࢠ(ԼҐ)ίϯϙʔωϯτͷΈҙࣝ͢Δ(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)

ਤʹ͢Δͱ͜Μͳײ͡ ਌ίϯϙʔωϯτ ࢠίϯϙʔωϯτ [σʔλΛ౉͍ͨ͠] v-bind (:xxx) props [Πϕϯτ௨஌͍ͨ͠] $emit v-on (@xxx) ࢠ [ॲཧΛ௚઀ݺͼ͍ͨ] ref

ίϯϙʔωϯτͷԿ͕ྑ͍ͷʁ • ίϯϙʔωϯτ಺ͷin/out͕ཧղ͠΍͘͢ͳΔ • ࢖༻͢Δࢠίϯϙʔωϯτ • components • ਌ίϯϙʔωϯτ͔ΒདྷΔσʔλ • props • ಺෦σʔλ / ॲཧ • data / methods / computed • ਌ʹ௨஌͢ΔΠϕϯτ • $emitͷՕॴ • ࣗίϯϙʔωϯτͷΠϕϯτ(@click) / ࢠίϯϙʔωϯτ͔Β௨஌͞ΕΔΠϕϯτ • template্ʹهࡌ ίϯϙʔωϯτͷ࢓૊Έʹ৐͔ͬΔ͜ͱͰ ಺෦ॲཧͷݟ௨͕͠jQuery + Hogan.jsͷ࣌ʹൺ΂ͯ ֨ஈʹྑ͘ͳΔʂʂ

ίϯϙʔωϯτԽɺ࠷ߴ

εάʹ࢝Ί·͠ΐ͏ʂ

ίϯϙʔωϯτͷొ࿥ • άϩʔόϧͳొ࿥ • Vue.component • ϩʔΧϧͳొ࿥ • VueΠϯελϯεͷcomponentsʹొ࿥

vue-cli Λ࢖͍·͠ΐ͏


 
 {{index + 1}}
 {{todo.context}}
 {{todo.lastUpdateDate}}
 
 
 
 
 
 
 
 
 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);
 }
 }
 }
 
 
 
 tr {
 cursor: pointer;
 }
 
 vue-cliΛ࢖͏ͱͲ͏ͳΔͷʁ • ίϯϙʔωϯτຖʹvueϑΝΠϧΛ1ͭ࡞੒(࠷ऴతʹjsʹͳΔ) • template(HTML) • Pug౳΋࢖͑Δ໛༷ • script(js) • templateʹ౉͢data΍ɺmethods౳Λఆٛ • style • cssɻ͜ͷίϯϙʔωϯτʹ͚ͩ౰ͯΔɺͱ͍͏ఆٛ΋Մೳ ίϯϙʔωϯτΛ1ͭͷvueϑΝΠϧͰ׬݁͢ΔΑ͏ʹॻ͚ͯɺ੹຿όονϦʂ(୯ҰϑΝΠϧίϯϙʔωϯτ) html/js/css ෳ਺ϑΝΠϧΛߦͬͨΓདྷͨΓ͠ͳͯ͘΋ྑ͍ʂൃࢄ͕ͪ͠ͳը໘։ൃʹடংΛʂʂʂ

ͨͩ͠ɺnode.js࢖͍·͢

ͪΐͬͱͰ΋ڵຯ͕ग़͖ͯͨਓ͸ɺ https://github.com/nemuzuka/nds51

·ͱΊ • Vue.jsΛ࢖͏ͱDOMʹσʔλΛ࣋ͨͤΔඞཁ͕ݮΓ·͢ • Ծ૝DOM / ૒ํ޲σʔλόΠϯσΟϯάͷ͋Γ͕ͨ͞ • ΋͏ࣗલͰΠϕϯτरͬͯDOMॻ͖׵͑ͳΜͯͨ͘͠ͳ͍ʂʂ • DOMૢ࡞༻ͷid΍classࢦఆ͕େ෯ʹݮͬͨɻΧελϜσʔλଐੑ΋࢖Θͳ͘ͳͬͨ • ίϯϙʔωϯτԽͰॲཧͷ੹຿΍σʔλͷείʔϓ͕ߜΕΔΑ͏ʹͳͬͨ • vue-cliͷߟ͑ํʹܹ͘͠ڞײ • 1ίϯϙʔωϯτ = 1vueϑΝΠϧͷؔ܎͕γϯϓϧͰΠΠ • ʮ͜ͷϑΝΠϧݟ͓͚ͯ͹େମ௥͑Δײ͡ʯ͕࠷ߴʹ͋Γ͕͍ͨɻϑΝΠϧҠಈ͢Δͱ಄ͷ੾Γସ͕͑… • jsͰhtml(template)͸ॻ͖ͨ͘ͳ͍ΜͰ͢Α… • ͍ͭͰʹϒϥ΢βjsΛES6Ͱॻ͚ΔΑ͏ʹͳΓ·͢ • πϥΠͷ͸؀ڥ࡞Δ(ཧղ͢Δ)·Ͱ • ʮ1ճ࡞ͬͯऴΘΓʯ͡Όͳ͍ΞϓϦͳΒɺVue.js΋ྑ͍ͱࢥ͍·͢ʂ

ͪͳΈʹɺ2016 ळ࣌఺ͷࢲͷεϖοΫ • jQuery͸஌ͬͯΔɺ࢖ͬͯΔ • Javascriptৄ͘͠͸஌Βͳ͍ • ES5/ES6ͷษڧ͸αϘͬͯͨ • node.jsͷଘࡏ͸஌͍ͬͯΔ͕Πϯετʔϧͨ͜͠ͱͳ͍ • jsϑΝΠϧ͸scriptλάͰ֎෦͔Β࣋ͬͯ͘Δํ͔ࣜ͠΍ͬͨ͜ͱͳ͍ • Reactͱ͔Angularͱ͔ͷଘࡏ͸஌͍ͬͯΔ͕νϡʔτϦΞϧ΋΍ͬͯͳ͍

ͦΕ͕3ϲ݄͘Β͍Ͱ… 1. npm / webpack 2. vue-cli 3. ES6Ͱॻ͍ͯBabelͰϏϧυ ͢Δ·ͰʹͳΓ·ͨ͠ʂʋ(˜ʆ)ϊ ※جຊతʹ͸νϡʔτϦΞϧͰԿͱ͔ͳͬͨͷͰ Vue.jsࣗମͷֶशίετ͸௿͍ͱࢥ͍·͢ [͓ੈ࿩ʹͳΓ·ͨ͠] OQNͱXFCQBDLͰϏϧυK2VFSZ͔Βͷ࣍ͷεςοϓ

Ͱɺ1ͭΞϓϦΛ࡞ͬͯΈͨɻ

VSS Kanban • αʔόαΠυ : Scala(Skinny Framework) • ΫϥΠΞϯταΠυ : Vue.js Scala΍Vue.jsΛֶͿͨΊͷͱ͔͔ͬΓʹͯ͠΋Β͑Δͱخ͍͠σε https://github.com/nemuzuka/vss-kanban