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 Slide

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

    View Slide

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

    View Slide

  4. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  15. View Slide

  16. ը૾ճؼςετ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  42. ࠷ޙʹએ఻

    View Slide

  43. View Slide

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

    View Slide