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. ͝੩ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ