Vue.jsでコンポーネント入門！ハンズオン勉強会

https://itstaffing.connpass.com/event/34159/
Vue.jsでコンポーネント入門！ハンズオン勉強会

Transcript

1. Vue.jsͰίϯϙʔωϯτೖ໳ʂϋϯ ζΦϯษڧձ 2016/07/05(Tue) @DeNA
2. Web Components ͱ͸ʁ
3. Web ͷ࠶ར༻Մೳͳύʔπ࡞੒ͷ࢓༷
4. ࠶ར༻ՄೳͳύʔπΛߟ͑Δ্Ͱͷ೰Έ • HTML, CSS, JavaScript 3ͭͷઐ༻ݴޠͰߏ੒ɻ • HTML ͷෳࡶͳೖΕࢠߏ଄ • CSS ͷҙਤ͠ͳ͍ద༻ൣғ • JavaScript ͷDOMߏ଄΁ͷґଘ
5. ߏ੒͢ΔϦιʔε 1. Custom Elements Ϣʔβʔ͕ಠࣗͷΧελϜཁૉΛఆٛ 2. HTML Imports அยԽͨ͠HTMLϑΝΠϧΛϩʔυ 3. HTML Template ϒϥ΢βωΠςΟϒͳςϯϓϨʔτػೳ 4. Shadow DOM HTMLʹείʔϓΛܗ੒
6. ར༻ͷϝϦοτ • ϚʔΫΞοϓ͕εοΩϦ • ελΠϧͷద༻ൣғΛߜΓࠐΉ • ෳࡶͳߏ଄Λ֎෦͔Βݟ͑ͳ͘͢Δ
7. ϒϥ΢βͷରԠঢ়گ1
8. ϒϥ΢βͷରԠঢ়گ2 • Google ओಋͰϒϥ΢βϕϯμͷ଍ฒΈόϥόϥ • Polyfill ͸੡඼Ͱ࣮૷࣮੷͕ͱͯ΋গͳ͍ • Polymer, X-Tag ͳͲͷϥΠϒϥϦͰ΋… • ։ൃ͔Β4೥ͰͦΖͦΖʁ • Vue.js ͳΒ͹…
9. Vue.js ͱ Web Components
10. Vue.js ͷ2ͭͷॏཁͳίϯηϓτ • ϦΞΫςΟϒσʔλόΠϯσΟϯά • ίϯϙʔωϯτγεςϜ
11. Vue.js ͷίϯϙʔωϯτγεςϜ Custom Elements ͷ࢓༷ʹԊͬͨߏจΛ࣮૷
12. ྫ͑͹… • slot ཁૉ h(ps:/ /www.w3.org/TR/shadow-dom/#slots • is ଐੑ h(ps:/ /www.w3.org/TR/custom-elements/#a(r-is
13. େن໛ΞϓϦέʔγϣϯྫ1
14. େن໛ΞϓϦέʔγϣϯྫ2 <div id="app"> <app-nav></app-nav> <app-view> <app-sidebar></app-sidebar> <app-content></app-content> </app-view> </div>
15. ίϯϙʔωϯτͷ࡞੒Λ΍ͬͯΈΑ͏
16. Codepen Ͱ࡞੒͍͖ͯ͠·͢ɻ ҎԼͷ Pen Λ Fork ͯ͠͸͡Ί͍ͯͩ͘͞ɻ hands-on-vuejs-vol2-0 - h0p:/ /codepen.io/naokie/pen/rLwLyd
17. ్தܦաΛؒҧͬͯফͯ͠͠·Θͳ͍Α͏ʹɺ Fork ͢Δͱ͖ʹ Loginɺ·ͨ͸ Save as Anonymous ͠·͢ɻ
18. Vol.1 ੒Ռ෺
19. Vol.1 ςϯϓϨʔτ <div id="my-app"> <!-- ৽نλεΫͷ௥Ճ --> <p> NewTask: <input type="text" v-model="newTask" /> <button v-on:click="addTodo">Add</button> </p> <hr /> <!-- λεΫͷϦετදࣔ --> <ul> <li v-for="todo in todos"> <input type="checkbox" v-model="todo.isCompleted" /> <span v-bind:class="{ 'complete': todo.isCompleted }">{{ todo.task }}</span> <button v-on:click="deleteTodo(todo)">Delete</button> </li> </ul> <!-- ࢒ΓλεΫͷΧ΢ϯτදࣔ --> <p>Remaining Tasks: {{ remains }}/{{ todos.length }}</p> </div>
20. Vol.1 Vue Πϯελϯε var vm = new Vue({ el: '#my-app', // Ϛ΢ϯτ͢Δཁૉ data: { // ϓϩΩγ͢Δ͢΂ͯͷϓϩύςΟ newTask: '', todos: [ { task: 'ڇೕΛങ͏', isCompleted: false }, { task: 'ϓϩςΠϯΛങ͏', isCompleted: true }, { task: 'εϙʔπυϦϯΫΛങ͏', isCompleted: false } ] }, computed: { // ࢉग़ϓϩύςΟ remains: function() { var inCompleteList = this.todos.filter(function(task) { return !task.isCompleted; }); return inCompleteList.length; } }, methods: { // Πϯελϯεϝιου addTodo: function() { if (this.newTask == '') return; this.todos.push( { task: this.newTask, isCompleted: false } ); this.newTask = ''; }, deleteTodo: function(todo) { this.todos.$remove(todo); } } });
21. ࠶ར༻Մೳͳ୯Ґʁ 1. ಉ͡ϖʔδͰ܁Γฦ͠දࣔ͢ΔʢϦετදࣔʣ 2. αΠτ಺Ͱ܁Γฦ͠ར༻͢Δʢ΢ΟδΣοτදࣔʣ
22. ࠓճ࡞੒͢Δίϯϙʔωϯτ • Todo ίϯϙʔωϯτͷ࡞੒ • App ίϯϙʔωϯτͷ࡞੒
23. Todo ίϯϙʔωϯτ λεΫ1ͭΛߏ੒͍ͯ͠ΔύʔπΛίϯϙʔωϯτԽ
24. HTML Template Λ੾Γग़͠ <script type="text/template" id="t_todo"> <li> <input type="checkbox" v-model="todo.isCompleted" /> <span v-bind:class="{ 'complete': todo.isCompleted }">{{ todo.task }}</span> <button v-on:click="deleteTodo(todo)">Delete</button> </li> </script>
25. ੾Γग़ͨ͠ՕॴΛΧελϜཁૉͰஔ͖׵͑ <ul> <todo v-for="todo in todos" :todo="todo"></todo> </ul>
26. είʔϓ • ίϯϙʔωϯτΠϯελϯε͸֤ࣗʹείʔϓΛ͍࣋ͬͯΔ • ࢠίϯϙʔωϯτ͸਌σʔλΛࢀরͰ͖ͳ͍
27. Props σʔλΛࢠίϯϙʔωϯτʹ఻ୡ͢ΔΦϓγϣϯ • 2ͭͷम০ࢠ • .sync: two-way όΠϯσΟϯά • .once: one--me όΠϯσΟϯά • ݕূཁ݅ΛઃఆՄೳ
28. ίϯϙʔωϯτͷ࡞੒ var Todo = Vue.extend({ template: '#t_todo', props: { 'todo': { required: true } } });
29. ίϯϙʔωϯτΛొ࿥ var vm = new Vue({ ... components: { Todo: Todo } });
30. ಈ࡞ͷ֬ೝ • νΣοΫϚʔΫͷ෇͚֎͠ • ৽نλεΫͷొ࿥ • λεΫͷ࡟আ • ࢒ΓλεΫͷΧ΢ϯτදࣔ
31. λεΫͷ࡟আ <button v-on:click="deleteTodo(todo)">Delete</button>
32. σʔλૢ࡞ͷ໾໨ͱΠϕϯτ • ࡞੒ͨ͠ Todo ίϯϙʔωϯτͷϝιουͰ͸ͳ͍ • λεΫϦετ͸਌ίϯϙʔωϯτ͕อ͍࣋ͯ͠Δ • λεΫϦετͷૢ࡞͸਌ίϯϙʔωϯτͷ໾໨ • ࢠίϯϙʔωϯτ͸ΠϕϯτͷΈ௨஌ • ਌ࢠؒͰͷΠϕϯτ؅ཧ͕ඞཁʹ
33. ΧελϜΠϕϯτ ίϯϙʔωϯτؒͷΠϕϯτ௨৴ͷ࢓૊Έ • $on() Λ࢖༻ͯ͠ΠϕϯτΛϦοεϯ͠·͢ • $emit() Λ࢖༻ͯࣗ͠਎ͷΠϕϯτΛτϦΨʔ͠·͢ • $dispatch() Λ࢖༻ͯ͠਌ํ޲ʹΠϕϯτΛૹग़͠·͢ • $broadcast() Λ࢖༻ͯ͠ࢠଙํ޲ʹΠϕϯτΛ૑ग़͠·͢
34. Todo ίϯϙʔωϯτ͔ΒΠϕϯτΛૹग़ var Todo = Vue.extend({ ... methods: { deleteTodo: function(todo) { this.$dispatch('delete', todo); } } });
35. ਌ͰΠϕϯτΛϦοεϯ var vm = new Vue({ ... events: { 'delete': function(todo) { this.todos.$remove(todo); } } });
36. ͜͜·Ͱͷ੒Ռ෺ hands-on-vuejs-vol2-1 - h0p:/ /codepen.io/naokie/pen/qNjNAw
37. App ίϯϙʔωϯτ খ͞ͳΞϓϦʢ΢ΟδΣοτʣΛίϯϙʔωϯτԽ
38. HTML Template Λ੾Γग़͠ <script type="text/template" id="t_app"> <!-- divཁૉͰғΉ --> <div> <p> NewTask: <input type="text" v-model="newTask" /> <button v-on:click="addTodo">Add</button> </p> <hr /> <ul> <todo v-for="todo in todos" :todo="todo"></todo> </ul> <p>Remaining Tasks: {{ remains }}/{{ todos.length }}</p> </div> </script>
39. ϑϥάϝϯτΠϯελϯε • ςϯϓϨʔτͷίϯςϯπ͸ɺΧελϜཁૉΛஔ͖׵͑Δ • ςϯϓϨʔτ͸୯ҰͷϧʔτཁૉΛ࣋ͭͷ͕ਪ঑
40. ੾Γग़ͨ͠ՕॴΛΧελϜཁૉͰஔ͖׵͑ <app :todos="todos"></app>
41. ίϯϙʔωϯτͷ࡞੒ var App = Vue.extend({ template: '#t_app', props: { 'todos': { required: true } }, ... components: { Todo: Todo } });
42. ίϯϙʔωϯτΛొ࿥ var vm = new Vue({ ... components: { App: App } });
43. ಈ࡞ͷ֬ೝ • νΣοΫϚʔΫͷ෇͚֎͠ • ৽نλεΫͷొ࿥ • λεΫͷ࡟আ • ࢒ΓλεΫͷΧ΢ϯτදࣔ
44. ৽نλεΫͷొ࿥ <button v-on:click="addTodo">Add</button>
45. App ίϯϙʔωϯτ͔ΒΠϕϯτΛૹग़ var App = Vue.extend({ // ίϯϙʔωϯτఆٛͰ͸ॳظσʔλΦϒδΣΫτΛฦؔ͢਺ͱͯ͠એݴ͢Δ data: function() { return { newTask: '', }; }, ... methods: { addTodo: function() { if (this.newTask == '') return; this.$dispatch('add', this.newTask); this.newTask = ''; } } });
46. ਌ͰΠϕϯτΛϦοεϯ var vm = new Vue({ ... events: { ... 'add': function(newTask) { this.todos.push( { task: newTask, isCompleted: false } ); } } });
47. ࢒ΓλεΫͷΧ΢ϯτදࣔ var App = Vue.extend({ ... computed: { remains: function() { var inCompleteList = this.todos.filter(function(task) { return !task.isCompleted; }); return inCompleteList.length; } }, ... });
48. ࠶ར༻Մೳͳύʔπͷ׬੒ <div id="my-app"> <app :todos="todos"></app> <app :todos="todos"></app> <app :todos="todos"></app> </div>
49. ͜͜·Ͱͷ੒Ռ෺ hands-on-vuejs-vol2-2 - h/p:/ /codepen.io/naokie/pen/oLwLAj
50. One more thing...
51. App ίϯϙʔωϯτ͝ͱʹݟग़͠Λ௥Ճ
52. εϩοτ • ίϯϙʔωϯτ࢖༻ऀ͕ίϯςϯπΛ௥Ճ͢Δ࢓૊Έ • ਌είʔϓͰίϯϙʔωϯτʹίϯςϯπΛ௥Ճ • ໊લ͖ͭεϩοτͰෳ਺࣋ͭ͜ͱ΋Մೳ
53. ςϯϓϨʔτʹ slot ཁૉΛ௥Ճ <script type="text/template" id="t_app"> <div> <slot></slot> ... </div> </script>
54. App ίϯϙʔωϯτ࢖༻ՕॴͰݟग़͠Λ௥Ճ <div id="my-app"> <app :todos="todos"> <h1>ϝΠϯ</h1> </app> <app :todos="todos"> <h1>αϒ</h1> </app> <app :todos="todos"></app> </div>
55. ͜͜·Ͱͷ੒Ռ෺ hands-on-vuejs-vol2-3 - h0p:/ /codepen.io/naokie/pen/NAgRWY
56. ΍ͬͯΈΑ͏ NewTask ίϯϙʔωϯτ
57. ςϯϓϨʔτ <script type="text/template" id="t_newtask"> <p> NewTask: <input type="text" v-model="newTask" /> <button v-on:click="addTodo">Add</button> </p> </script>
58. ίϯϙʔωϯτԽ var NewTask = Vue.extend({ template: '#t_newtask', data: function() { return { newTask: '', }; }, methods: { addTodo: function() { if (this.newTask == '') return; this.$dispatch('add', this.newTask) this.newTask = ''; } } });
59. ίϯϙʔωϯτͷొ࿥ var App = Vue.extend({ ... components: { Todo: Todo, NewTask: NewTask } });
60. ͜͜·Ͱͷ੒Ռ෺ hands-on-vuejs-vol2-4 - h0p:/ /codepen.io/naokie/pen/BzkLyJ
61. ࠓճͷ͓Έ΍͛ GitHub - h*ps:/ /github.com/naokie/hands-on-vuejs-vol2 Codepen - h*p:/ /codepen.io/collec1on/DoLeNM/