Storybookを用いたVue.js共通コンポーネント開発との戦い / stores-fights-storybook

by howdy39

Slide 1

Slide 1 text

4UPSZCPPLΛ༻͍ͨ 7VFKTڞ௨ίϯϙʔωϯτ։ൃͱͷઓ͍ -BSBWFM7VFKTษڧձ

Slide 2

Slide 2 text

ࣗݾ঺հ ˔ ϑϩϯτΤϯυΤϯδχΞ ˔ ຊॻ͍ͯ·͢ ˓ ٕज़ॻయ ˓ ٕॻത த໺ ୡ໵ !IPXEZ

Slide 3

Slide 3 text

4503&4KQ஌ͬͯΔਓ !

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

4503&4KQͷϑϩϯτΤϯυ

Slide 6

Slide 6 text

γϣοϓଆ μογϡϘʔυଆ ओʹͭͷը໘Ͱߏ੒

Slide 7

Slide 7 text

γϣοϓଆ μογϡϘʔυଆ ڈ೥·Ͱ͸…

Slide 8

Slide 8 text

γϣοϓଆ μογϡϘʔυଆ 41" "1*αʔόʔ ͲͬͪଆͰ΋࢖͑Δ 7VFKTίϯϙʔωϯτ͕ཉ͍͠ ͜ΕΒΛ 7VFKTʹઈࢍϦϓϨΠεத

Slide 9

Slide 9 text

ෳ਺ͷγεςϜΛ·͕ͨͬͯ࢖͑Δ 7VFKTͷίϯϙʔωϯτू͕ཉ͍͠

Slide 10

Slide 10 text

Ͱڞ௨ίϯϙʔωϯτूΛ࡞ͬͨ

Slide 11

Slide 11 text

छྨҎ্ͷίϯϙʔωϯτू

Slide 12

Slide 12 text

͍Ζ͍Ζͳઓ͍͕͋ͬͨ ˔ ༧ظͤ͵ 6*่Εʹؾ͚ͮͳ͍ ؾ͔ͮͳ͍͏ͪʹ 6*่͕ΕΔ… ˔ ϨϏϡʔ͕໘౗ HJUDIFDLPVUͯ͠ TUPSZCPPLىಈͯ͠… ˔ Ϟδϡʔϧ഑෍Ͳ͏͠Α͏ OQNPSHBOJ[BUJPO ݁ߏ͓ߴ͍…

Slide 13

Slide 13 text

⚔ ͜ΕΒͷ໰୊ͱઓ͏ ⚔

Slide 14

Slide 14 text

༧ظͤ͵6*่Εʹؾ͚ͮͳ͍໰୊ ͱઓ͏

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

ը૾ճؼςετ

Slide 17

Slide 17 text

ςετ݁Ռ͸13ͷίϝϯτͰڭ͑ͯ͘ΕΔ

Slide 18

Slide 18 text

3&(46*5ͷϋϚΓͲ͜Ζ

Slide 19

Slide 19 text

ྫ͑͹μΠΞϩάίϯϙʔωϯτͷετʔϦʔ ᶃϘλϯΛΫϦοΫ μΠΞϩάΛදࣔ͢Δ

Slide 20

Slide 20 text

ࡱΓ͍ͨ΋ͷͱετʔϦʔ͕߹Θͳ͍ ͕͜͜Ωϟϓνϟର৅ʹͳΔ આ໌จͷൺֱͯ͠΋͠ΐ͏͕ͳ͍… ࡱΓ͍ͨͷ͸ͬ͜ ͪʂ

Slide 21

Slide 21 text

ը૾ൺֱ༻ͷετʔϦʔΛ࡞Δ ᶃ SFHSFTTJPOͰ࢝·ΔετʔϦʔΛผʹ࡞Δ ᶄ JͰൺֱର৅ετʔϦʔΛࢦఆ͢Δ

Slide 22

Slide 22 text

ετʔϦʔ͸μΠΞϩάΛग़ͨ͠ঢ়ଶʹ͓ͯ͘͠

Slide 23

Slide 23 text

ൺֱ͍ͨ͠Ωϟϓνϟ͝ͱʹετʔϦʔΛ࡞Δ ϦϘϯ͕෇͘ύλʔϯ͕͋ΔͷͰ ϦϘϯ෇͖ͷετʔϦʔ΋࡞͍ͬͯΔ

Slide 24

Slide 24 text

౾෗໰୊ ʮԁʯ͕ʮ˘ʯʹͳͬͯ͠·͍ͬͯΔྫ ϑΥϯτΛ௥Ճ͢Δ IUUQTHJUIVCDPNSFHWJ[OPEFYDCCMPCNBTUFS%PDLFSGJMF ެࣜͷ%PDLFSϑΝΠϧʹ͸೔ຊޠϑΥϯτ͕ೖ͍ͬͯͳ͍

Slide 25

Slide 25 text

3&(46*5Λ࢖ͬͯ 6*่Εʹؾ෇͚ΔΑ͏ʹͳͬͨ

Slide 26

Slide 26 text

ϨϏϡʔ໘౗͍͘͞໰୊ͱઓ͏

Slide 27

Slide 27 text

ͦ΋ͦ΋4UPSZCPPLͬͯ 4UPSZCPPLΛϏϧυͯ͠࡞ΒΕΔͷ͸ IUNM DTT KTͳͲ੩తϑΝΠϧ͚ͩ ϒϥ΢βͰΞΫηεͰ͖Δ IUNMஔ͖৔͕͋Ε͹͍͍

Slide 28

Slide 28 text

13࣌ʹ$JSDMF$*ͷ"SUJGBDUTʹIUNMྨΛ֨ೲ͢Δ IUUQTDJSDMFDJDPNEPDTKBBSUJGBDUT ͜ͷը໘։͘ͷ໘౗

Slide 29

Slide 29 text

13࣌ʹࣗಈͰ"SUJGBDUTͷ63-Λ௨஌ ᶃ "SUJGBDUTͷ 63-Λ࡞Δ ᶄ DVSMͰ 1045͢Δ ˞(*5)6#@50,&/Λ $JSDMF$*ͷ ؀ڥม਺ʹઃఆ͓ͯ͘͠

Slide 30

Slide 30 text

ʢͪͳΈʹʣ࠷৽ͷιʔε͸4ʹ഑ஔ ˔ NBTUFSϒϥϯνʹϚʔδ͞Ε͚ͨ࣌ͩ 4ʹϏϧυ݁ՌΛΞοϓϩʔυ ˔ ࠷৽ͷ 4UPSZCPPL͕͍ͭͰ΋ݟΕΔΑ͏ʹ͢Δ ˓ ΤϯδχΞ ΋ ˓ σβΠφʔ ΋ ˔ ίϯϙʔωϯτΛ࢖͏ଆ͸͜ͷ63-Λݟͯ։ൃ

Slide 31

Slide 31 text

$JSDMF$*ͷ"SUJGBDUTʹ഑ஔͯ͠ 13࣌ͷ4UPSZCPPL֬ೝ͕ ͱͯ΋շదʹͳͬͨ

Slide 32

Slide 32 text

Ϟδϡʔϧ഑෍Ͳ͏͠Α͏໰୊ ͱઓ͏

Slide 33

Slide 33 text

ௐ΂Δ ˔ ී௨ʹ OQNΛ࢖͏ ެ։͞Εͯ͠·͏ͷͰ /( ˔ OQNPSHBOJ[BUJPO QFSNPOUIVTFSߴ͍ Ͳ͏͢Δ

Slide 34

Slide 34 text

(JU)VCܦ༝ͰOQNΠϯετʔϧͰ͖Δ λά໊ खಈͰλά࡞Δͷ໘౗ ૊৫໊ ϦϙδτϦ໊

Slide 35

Slide 35 text

$*ͰλάΛ࡞Δ QBDLBHFKTPOͷόʔδϣϯΛ্͛ͯ 13Λͳ͛Δ ˞QBDLBHFKTPOͷόʔδϣϯΛλά໊ͱͯ͠࢖͏ 13ঝೝ ˍ NBTUFSʹϚʔδ $JSDMF$*ͷ BQQSPWBMKPCTΛ࢖ͬͯλά࡞੒TIΛ࣮ߦ

Slide 36

Slide 36 text

$JSDMF$*ͷ BQQSPWBMKPCT IUUQTDJSDMFDJDPNEPDTXPSLGMPXTIPMEJOHBXPSLGMPXGPSB NBOVBMBQQSPWBM λά࡞੒ खಈͰKPCΛྲྀͤΔ

Slide 37

Slide 37 text

λά࡞੒γΣϧ ᶃ QBDLBHFKTPOͷόʔδϣϯ ͔Βλά໊Λੜ੒ ᶄ Ϣʔβ৘ใΛઃఆ ᶅ ࠷৽ͷιʔεΛϏϧυ ᶆ Ϗϧυͨ͠ϑΝΠϧΛ DPNNJU ᶇ λάΛ࡞੒ͯ͠ QVTI IUUQTDJSDMFDJDPNEPDTBEETTILFZ ˞44)ΩʔΛ௥Ճ͓ͯ͘͜͠ͱʢHJU࣮ߦ࣌ʹൿີݤΛ࢖ͬͯ͘ΕΔʣ

Slide 38

Slide 38 text

λά͕ࣗಈͰ࡞ΒΕΔ

Slide 39

Slide 39 text

͓·͚ (JU)VCͷ3FMFBTFTʹϦϦʔε಺༰Λॻ͘

Slide 40

Slide 40 text

(JU)VCܦ༝ͷOQNΠϯετʔϧ ͱ$*ʹΑΔλάੜ੒Ͱແྉ

Slide 41

Slide 41 text

·ͱΊʢઓ͍ͷײ૝ʣ ˔ 4UPSZCPPLΛ͔ͭͬͯ ڞ௨ίϯϙʔωϯτ࡞Δͷ͸݁ߏେม ˔ ෆศͳͱ͜Ζ͸ଞͷπʔϧͳͲͰΧόʔ ˔ Ұ౓࡞ͬͯ͠·͑͹։ൃ͕Ճ଎͢Δʢ͸ͣʣ 4UPSZCPPLΛ΋ͬͱ༗ޮ׆༻͍͖͍ͯͨ͠