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

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