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

by kazupon

Embed

Start on current slide

Slide 1

Slide 1 text

FDD ʹΑΔ Vue.js ίϯϙʔωϯτ։ൃ Gotanda.js #6 in Oisix 2016-12-02 @kazupon

Slide 2

Slide 2 text

ࣗݾ঺հ

Slide 3

Slide 3 text

Vue.js Core Team member https://github.com/kazupon

Slide 4

Slide 4 text

Vue.js ೔ຊޠެࣜαΠτ ͍ͭʹઌ೔ϦϦʔεʂ Vue.js ೔ຊޠެࣜαΠτ

Slide 5

Slide 5 text

We are building Open Innovation Platform!! https://cuusoo.com

Slide 6

Slide 6 text

͸͡Ίʹ

Slide 7

Slide 7 text

͍Ζ͍Ζ͋Δʙۦಈ։ൃ ςετۦಈ։ൃ ;Δ·͍ۦಈ։ൃ νέοτۦಈ։ൃ υϝΠϯۦಈ։ൃ υΩϡϝϯτۦಈ։ൃ ɹϢʔβʔػೳۦಈ։ൃ ɹεέδϡʔϧۦಈ։ൃ ɾɾɾ Ϣʔεέʔεۦಈ։ൃ Ϟσϧۦಈ։ൃ

Slide 8

Slide 8 text

ͱ·͋ɺ ͍ͬͺ͍͋Γ·͚͢Ͳ

Slide 9

Slide 9 text

͔͠͠ͳ͕ΒɺզʑΤϯδχΞ͸ • ϢʔβʔʹʮՁ஋ʯΛಧ͚ͳͯ͘͸ͳΒ ͳ͍ʂʂ • OSS ͷੈքͱͯɺϑϨʔϜϫʔΫɺϥΠϒ ϥϦɺϓϥάΠϯͳͲɺՁ஋͋Δ΋ͷΛ ఏڙ͠ͳ͚Ε͹ɺ࢖ΘΕͳ͍΋ͷʹͳͬ ͯ͠·͏ʂʂ

Slide 10

Slide 10 text

ΞδΣϯμ

Slide 11

Slide 11 text

ࠓ೔࿩͢͜ͱ • Vue.js ͷ࡞ऀ͕࣮ફ͢ΔɺFDD ʹΑΔ։ൃ Λ঺հ • Vue 2.0 pre-alpha • vue-router 2.0

Slide 12

Slide 12 text

ࠓ೔࿩͞ͳ͍͜ͱ • Vue.js ͷجຊతͳ࿩ͱ͔ • FDD ͷৄࡉͳ࿩ͱ͔ • ςετपΓͷৄࡉͷ࿩ͱ͔ • ϢʔβʔՁ஋ఏڙͱ͔ͷ͏Μ͵Μ

Slide 13

Slide 13 text

஫ҙࣄ߲ • ࠓճ঺հ͢Δํ๏͸ɺVue.js ࡞ऀ͕ಛʹఏ এ͍ͯ͠Δํ๏Ͱ͸͋Γ·ͤΜ • ൃදऀͷࢲ͕ɺVue.js orgnaization / ίΞ νʔϜʹδϣΠϯ͔ͯ͠Βɺ͜Ε·Ͱͷ ։ൃʹܞΘ͖ͬͯͨ஌ݟΛɺʮ͜Μͳํ ๏΋͋ΔΑʂʯతͳײ͡Ͱ঺հ͍ͯ͠Δ ͚ͩͰ͢ʂ

Slide 14

Slide 14 text

FDD ͱ͸ʁ

Slide 15

Slide 15 text

Feature Driven Development • ”Ұൠతʹ”ɺϢʔβʔػೳۦಈ։ൃͱ͸ • ϢʔβʔʹՁ஋͋ΔػೳΛఏڙ͢Δ؍఺ ʹΑΔۦಈ։ൃ • ࣮ࡍʹಈ࡞͢Δ΋ͷΛ܁Γฦ͠ఏڙ͢ Δ։ൃ ※WikiPedia  https://ja.wikipedia.org/wiki/Ϣʔβʔػೳۦಈ։ൃ

Slide 16

Slide 16 text

Vue.js ࡞ऀ͕࣮ફ͖ͯͨ͠ FDD ͱ͸ʁ

Slide 17

Slide 17 text

Ϣʔβʔࢹ఺ʹΑΔ։ൃ • ϥΠϒϥϦͷػೳͷαϯϓϧΛ example ͱ ͯ͠ఏڙ • ͦΕΒʹରͯ͠ E2E ͰςετΛ࣮૷ • E2E ͷςετ͕ύεͨ͠ΒϦϦʔε • ͦͷޙɺ୯ମςετͷ࣮૷ɺػೳվળɺό άमਖ਼ͳͲͷ։ൃ܁Γฦ͠ߦ͏

Slide 18

Slide 18 text

Vue.js ίϯϙʔωϯτ։ൃྫ

Slide 19

Slide 19 text

ྫ: select2 ίϯϙʔωϯτͷ։ൃ • jquery ϓϥάΠϯ select2 Λϥοϓͨ͠ί ϯϙʔωϯτ (vuejs.org/examples/ select2.html Ͱެ։͞Ε͍ͯΔͱಉ͡΋ͷ)

Slide 20

Slide 20 text

DEMO

Slide 21

Slide 21 text

1. ϓϩδΣΫτͷηοτΞοϓ

Slide 22

Slide 22 text

vue-cli ͰηοτΞοϓʂ ※vue-cli ͷ GitHub ϦϙδτϦ  https://github.com/vuejs/vue-cli

Slide 23

Slide 23 text

vue-cli ͰͷηοτΞοϓͷ༷ࢠ

Slide 24

Slide 24 text

2. ઃܭ & αϯϓϧͷ༻ҙ

Slide 25

Slide 25 text

• ίϯϙʔωϯτΛઃܭͯ͠ɺϢʔβʔ޲ ͚ʹ example Λ༻ҙ͢Δ

Slide 26

Slide 26 text

3. E2E ςετͷ࣮૷

Slide 27

Slide 27 text

• example ͕ਖ਼͘͠ಈ࡞͢Δɺ E2E ͷςετ Λ࣮૷͢Δ vue-cli Ͱ ఏڙ͞ΕΔ E2E ϑϨʔϜϫʔ ΫͰͦͷςετΛ ࣮૷͢Δ

Slide 28

Slide 28 text

4. ίϯϙʔωϯτͷ࣮૷

Slide 29

Slide 29 text

• Ϣʔβʔʹఏڙ͢ΔίϯϙʔωϯτΛ࣮૷

Slide 30

Slide 30 text

5. ίϯϙʔωϯτͷςετ

Slide 31

Slide 31 text

• Ϗϧυͯ͠E2E ςετΛ࣮ߦ͠ɺύε͢Δ ͜ͱΛ֬ೝ͢Δ

Slide 32

Slide 32 text

ޙ͸ɺػೳ௥Ճɺվળɺ ୯ମςετɺόάमਖ਼ͳͲͷ ։ൃΛ܁Γฦ͢

Slide 33

Slide 33 text

ࠓճ঺հͨ͠FDDʹΑΔϝϦοτ • ୯ମςετΛͬ͢ඈ͹ͯ͠ɺ͍͖ͳΓ E2E ςετ͔ΒೖΔͷͰɺεϐʔσΟͳϦϦʔ ε͕Ͱ͖Δ • ϥΠϒϥϦϢʔβʔར༻ࢹ఺Ͱ։ൃͰ͖ ΔͷͰɺՁ஋͕͋ΔϞϊΛఏڙ͠΍͍͢

Slide 34

Slide 34 text

ࠓճ঺հͨ͠FDDʹΑΔσϝϦοτ • ٯʹ୯ମςετɺE2Eςετͱ͍͏ॱ౰ͳ ։ൃελΠϧΑΓ΋͕͔͔࣌ؒͬͯ͠· ͏͔΋ • ϢʔβʔʹՁ஋͋ΔػೳΛఏڙ͠Α͏ͱ ͢Δ͋·Γɺίϯϙʔωϯτઃܭʹ࣌ؒ Λ͔͚ͯ͠·͏͔΋

Slide 35

Slide 35 text

·ͱΊ

Slide 36

Slide 36 text

·ͱΊ • Vue.js ࡞ऀྲྀɺFDD Λ঺հ͠·ͨ͠ • ࠓճ঺հͨ͠ํ๏ͰɺϢʔβʔʹՁ஋͋Δ ػೳΛεϐʔσΟʹఏڙͰ͖ΔՄೳੑ͕͋ Γ·͢ • ͨͩɺ߹͏ਓɾ߹Θͳ͍ਓ͕͍Δͱࢥ͏ͷ Ͱɺ࣮ࡍʹ͜ͷ΍ΓํͰ։ൃ͢Δ৔߹͸஫ ҙ͕ඞཁ

Slide 37

Slide 37 text

one more thing …

Slide 38

Slide 38 text

೔ຊਓ޲͚ Vue.js ίϛϡχςΟ • Vue.js ೔ຊޠެࣜαΠτܦ༝Ͱ΋ࢀՃͰ͖·͢  http://jp.vuejs.org   

Slide 39

Slide 39 text

೔ຊਓ޲͚ Vue.js ίϛϡχςΟ • URL  https://vuejs-jp-slackin.herokuapp.com

Slide 40

Slide 40 text

͝੩ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ