FDDによるVue.jsコンポーネント開発

Transcript

1. FDD ʹΑΔ Vue.js ίϯϙʔωϯτ։ൃ Gotanda.js #6 in Oisix 2016-12-02 @kazupon
2. ࣗݾ঺հ
3. Vue.js Core Team member https://github.com/kazupon
4. Vue.js ೔ຊޠެࣜαΠτ ͍ͭʹઌ೔ϦϦʔεʂ Vue.js ೔ຊޠެࣜαΠτ
5. We are building Open Innovation Platform!! https://cuusoo.com
6. ͸͡Ίʹ
7. ͍Ζ͍Ζ͋Δʙۦಈ։ൃ ςετۦಈ։ൃ ;Δ·͍ۦಈ։ൃ νέοτۦಈ։ൃ υϝΠϯۦಈ։ൃ υΩϡϝϯτۦಈ։ൃ ɹϢʔβʔػೳۦಈ։ൃ ɹεέδϡʔϧۦಈ։ൃ ɾɾɾ Ϣʔεέʔεۦಈ։ൃ Ϟσϧۦಈ։ൃ
8. ͱ·͋ɺ ͍ͬͺ͍͋Γ·͚͢Ͳ
9. ͔͠͠ͳ͕ΒɺզʑΤϯδχΞ͸ • ϢʔβʔʹʮՁ஋ʯΛಧ͚ͳͯ͘͸ͳΒ ͳ͍ʂʂ • OSS ͷੈքͱͯɺϑϨʔϜϫʔΫɺϥΠϒ ϥϦɺϓϥάΠϯͳͲɺՁ஋͋Δ΋ͷΛ ఏڙ͠ͳ͚Ε͹ɺ࢖ΘΕͳ͍΋ͷʹͳͬ ͯ͠·͏ʂʂ
10. ΞδΣϯμ
11. ࠓ೔࿩͢͜ͱ • Vue.js ͷ࡞ऀ͕࣮ફ͢ΔɺFDD ʹΑΔ։ൃ Λ঺հ • Vue 2.0 pre-alpha • vue-router 2.0
12. ࠓ೔࿩͞ͳ͍͜ͱ • Vue.js ͷجຊతͳ࿩ͱ͔ • FDD ͷৄࡉͳ࿩ͱ͔ • ςετपΓͷৄࡉͷ࿩ͱ͔ • ϢʔβʔՁ஋ఏڙͱ͔ͷ͏Μ͵Μ
13. ஫ҙࣄ߲ • ࠓճ঺հ͢Δํ๏͸ɺVue.js ࡞ऀ͕ಛʹఏ এ͍ͯ͠Δํ๏Ͱ͸͋Γ·ͤΜ • ൃදऀͷࢲ͕ɺVue.js orgnaization / ίΞ νʔϜʹδϣΠϯ͔ͯ͠Βɺ͜Ε·Ͱͷ ։ൃʹܞΘ͖ͬͯͨ஌ݟΛɺʮ͜Μͳํ ๏΋͋ΔΑʂʯతͳײ͡Ͱ঺հ͍ͯ͠Δ ͚ͩͰ͢ʂ
14. FDD ͱ͸ʁ
15. Feature Driven Development • ”Ұൠతʹ”ɺϢʔβʔػೳۦಈ։ൃͱ͸ • ϢʔβʔʹՁ஋͋ΔػೳΛఏڙ͢Δ؍఺ ʹΑΔۦಈ։ൃ • ࣮ࡍʹಈ࡞͢Δ΋ͷΛ܁Γฦ͠ఏڙ͢ Δ։ൃ ※WikiPedia
 https://ja.wikipedia.org/wiki/Ϣʔβʔػೳۦಈ։ൃ
16. Vue.js ࡞ऀ͕࣮ફ͖ͯͨ͠ FDD ͱ͸ʁ
17. Ϣʔβʔࢹ఺ʹΑΔ։ൃ • ϥΠϒϥϦͷػೳͷαϯϓϧΛ example ͱ ͯ͠ఏڙ • ͦΕΒʹରͯ͠ E2E ͰςετΛ࣮૷ • E2E ͷςετ͕ύεͨ͠ΒϦϦʔε • ͦͷޙɺ୯ମςετͷ࣮૷ɺػೳվળɺό άमਖ਼ͳͲͷ։ൃ܁Γฦ͠ߦ͏
18. Vue.js ίϯϙʔωϯτ։ൃྫ
19. ྫ: select2 ίϯϙʔωϯτͷ։ൃ • jquery ϓϥάΠϯ select2 Λϥοϓͨ͠ί ϯϙʔωϯτ (vuejs.org/examples/ select2.html Ͱެ։͞Ε͍ͯΔͱಉ͡΋ͷ)
20. DEMO
21. 1. ϓϩδΣΫτͷηοτΞοϓ
22. vue-cli ͰηοτΞοϓʂ ※vue-cli ͷ GitHub ϦϙδτϦ
 https://github.com/vuejs/vue-cli
23. vue-cli ͰͷηοτΞοϓͷ༷ࢠ
24. 2. ઃܭ & αϯϓϧͷ༻ҙ
25. • ίϯϙʔωϯτΛઃܭͯ͠ɺϢʔβʔ޲ ͚ʹ example Λ༻ҙ͢Δ
26. 3. E2E ςετͷ࣮૷
27. • example ͕ਖ਼͘͠ಈ࡞͢Δɺ E2E ͷςετ Λ࣮૷͢Δ vue-cli Ͱ ఏڙ͞ΕΔ E2E ϑϨʔϜϫʔ ΫͰͦͷςετΛ ࣮૷͢Δ
28. 4. ίϯϙʔωϯτͷ࣮૷
29. • Ϣʔβʔʹఏڙ͢ΔίϯϙʔωϯτΛ࣮૷
30. 5. ίϯϙʔωϯτͷςετ
31. • Ϗϧυͯ͠E2E ςετΛ࣮ߦ͠ɺύε͢Δ ͜ͱΛ֬ೝ͢Δ
32. ޙ͸ɺػೳ௥Ճɺվળɺ ୯ମςετɺόάमਖ਼ͳͲͷ ։ൃΛ܁Γฦ͢
33. ࠓճ঺հͨ͠FDDʹΑΔϝϦοτ • ୯ମςετΛͬ͢ඈ͹ͯ͠ɺ͍͖ͳΓ E2E ςετ͔ΒೖΔͷͰɺεϐʔσΟͳϦϦʔ ε͕Ͱ͖Δ • ϥΠϒϥϦϢʔβʔར༻ࢹ఺Ͱ։ൃͰ͖ ΔͷͰɺՁ஋͕͋ΔϞϊΛఏڙ͠΍͍͢
34. ࠓճ঺հͨ͠FDDʹΑΔσϝϦοτ • ٯʹ୯ମςετɺE2Eςετͱ͍͏ॱ౰ͳ ։ൃελΠϧΑΓ΋͕͔͔࣌ؒͬͯ͠· ͏͔΋ • ϢʔβʔʹՁ஋͋ΔػೳΛఏڙ͠Α͏ͱ ͢Δ͋·Γɺίϯϙʔωϯτઃܭʹ࣌ؒ Λ͔͚ͯ͠·͏͔΋
35. ·ͱΊ
36. ·ͱΊ • Vue.js ࡞ऀྲྀɺFDD Λ঺հ͠·ͨ͠ • ࠓճ঺հͨ͠ํ๏ͰɺϢʔβʔʹՁ஋͋Δ ػೳΛεϐʔσΟʹఏڙͰ͖ΔՄೳੑ͕͋ Γ·͢ • ͨͩɺ߹͏ਓɾ߹Θͳ͍ਓ͕͍Δͱࢥ͏ͷ Ͱɺ࣮ࡍʹ͜ͷ΍ΓํͰ։ൃ͢Δ৔߹͸஫ ҙ͕ඞཁ
37. one more thing …
38. ೔ຊਓ޲͚ Vue.js ίϛϡχςΟ • Vue.js ೔ຊޠެࣜαΠτܦ༝Ͱ΋ࢀՃͰ͖·͢
 http://jp.vuejs.org
 

39. ೔ຊਓ޲͚ Vue.js ίϛϡχςΟ • URL
 https://vuejs-jp-slackin.herokuapp.com
40. ͝੩ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ