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

38bee248082f6071230de65e9d74a944?s=47 kazupon
December 02, 2016

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

38bee248082f6071230de65e9d74a944?s=128

kazupon

December 02, 2016
Tweet

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