Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

howdy39
July 18, 2019

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

howdy39

July 18, 2019
Tweet

More Decks by howdy39

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

  3. 4503&4KQ஌ͬͯΔਓ !

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. γϣοϓଆ μογϡϘʔυଆ
    ڈ೥·Ͱ͸…

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. ⚔ ͜ΕΒͷ໰୊ͱઓ͏ ⚔

    View full-size slide

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

    View full-size slide

  14. ը૾ճؼςετ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  20. ετʔϦʔ͸μΠΞϩάΛग़ͨ͠ঢ়ଶʹ͓ͯ͘͠

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  34. $JSDMF$*ͷ BQQSPWBMKPCT
    IUUQTDJSDMFDJDPNEPDTXPSLGMPXTIPMEJOHBXPSLGMPXGPSB
    NBOVBMBQQSPWBM λά࡞੒
    खಈͰKPCΛྲྀͤΔ

    View full-size slide

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

    View full-size slide

  36. λά͕ࣗಈͰ࡞ΒΕΔ

    View full-size slide

  37. ͓·͚
    (JU)VCͷ3FMFBTFTʹϦϦʔε಺༰Λॻ͘

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  40. ࠷ޙʹએ఻

    View full-size slide

  41. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ

    View full-size slide