React/Storybookと、全員参加型のUI開発

66b5fea05e9370317581701c87e50eae?s=47 8845musign
August 25, 2017

 React/Storybookと、全員参加型のUI開発

DIST.17 「Webデザインの現場のための効率化術」

66b5fea05e9370317581701c87e50eae?s=128

8845musign

August 25, 2017
Tweet

Transcript

  1. 3FBDU4UPSZCPPLͱɺ શһࢀՃܕͷ6*։ൃ %*45 ʮ8FCσβΠϯͷݱ৔ͷͨΊͷޮ཰Խज़ʯ σ β Π ϯ

  2. ෲےϩʔϥʔΤϰΝ ϯδ Σ Ϧ ε τࣾ಺γ Σ ϑ )5.-$44+BWB4DSJQU6*Ϧʔ υͬ

    Ά͍ 4/4!NVTJHO ԣ಺޺थ ෲےϩʔϥʔͷྗΛ৴͡Ζ
  3. ෲےϩʔϥʔΤϰΝ ϯδ Σ Ϧ ε τࣾ಺γ Σ ϑ )5.-$44+BWB4DSJQU6*Ϧʔ υͬ

    Ά͍ 4/4!NVTJHO ԣ಺޺थ ෲےϩʔϥʔͷྗΛ৴͡Ζ 53645"#30--&3
  4. ʮσβΠ φʔ ʯ ͱ ʮΤϯδχΞ ʯ ͷڠۀ ࠓ೔࿩͢͜ͱ

  5. πʔϧͷ࿩͸ ͳ ͘ ͳΓ · ͨ͠  ͕࣌ؒ͋ͬͨΒʜ

  6. ࢲ͕+PJO ͨ࣌͠ͷ՝୊ w σβΠφʔͱͷؔ܎ੑ͕رബ w σβΠφʔͷλεΫաଟ

  7. σβΠ φʔ ͱΤϯδχΞ σβΠφʔ Ϧʔμʔ ʢΤϯδχΞʣ ΤϯδχΞ ͍͍ͩͨ ͜ ͜Ͱղܾ

    ͨ·ʹ ૬ஊ
  8. σβΠ ϯ όϥόϥࣄ݅ w ΤϯδχΞ͕σβΠϯʹಠࣗղऍΛՃ͑ͯ
 ಥ͖ਐΜͩ݁Ռ w DPMPSˠ ʜ w

    GPOUTJ[FˠQY QY MBSHFʜ
  9. 'BOUBTUJD

  10. ͑ Β͍ਓ͸ݴ͏

  11. ༨༟͕Ͱ͖ͨΒ σβΠϯ΋ ౷Ұ͠ ͍ͯ͜ ͏ ʮ ʯ

  12. ͦΜͳ೔͸Ͳ͏ͤ དྷͳ͍

  13. ݂൓ుΛు͖ͳ͕Β ΍ͬ ͍͖ͯ

  14. ί ϛ ϡχέʔγ ϣ ϯ͕଍ Γ ͳ͍ w ·͖ͨ͗ίϛϡχέʔγϣϯ w

    ͓Μͳ͡ΦϑΟεʹ͍ͳ͕Β஌Βͳ͍ਓ w ͍ͬ͜͏ʹҭͨͳ͍৴པײ
  15. ظ଴͢Δ Ξ΢ τ ϓ ο τ

  16. ๲ΒΉޡղ

  17. σβΠ φʔ Α ΓԶͨͪͷ΄͏ ͕ 8FCΛɺ 6*ΛΘ͔ͬ ͯ Δ ʮ

    ʯ ʮ ʯ
  18. σβΠ φʔͷ๊͑ ͍ͯΔ ΋ͷ w ͨ͘͞Μͷཁ๬΍͍ΖΜͳϢʔβʔ w ϏδϡΞϧͷΫΦϦςΟ w ϓϩμΫτࣗମҎ֎ͷσβΠϯλεΫ

    w ΤϯδχΞ͔Βݟ͍͑ͯͳ͍΋ͷ͕ͨ͘͞Μ
  19. ͳΜͱ͔ͤͳͳ

  20. ʮԶ͕6*୲౰ͩʯ ͱ ΞϐΓͩͨ͠

  21. ࣮ࡍʹ6*ʹؔ͢Δ ૬ஊ͕͖ͩͨ͠

  22. 

  23. ౴͑Δ w ͜͏͍͏6*ͷํ͕Α͍͔΋͠Ε·ͤΜͶ w ڞ௨Խͯ͠ϧʔϧԽ͢ΔνϟϯεͰ͸ w Ͱ͸σβΠφʔ͞Μͱ࿩ʹ͍ͬͯ΋Β͑·͔͢ʁ

  24. ͖Ί·ͤʙʙ Μ ͸ͳ͠·ͤʙ Μ ๻͸ʜ ϑΝ Π τ͒ʙ

  25. ॿ͚स͸ग़͢ w ͜ͷσβΠϯ͸ʙΈ͍ͨͳҙਤ͕΋͔ͨ͠͠Β ͋ΔͷͰ͸ʙ w σβΠϯґཔ͢Δࡍʙͷ৘ใ΋σβΠφʔ͞Μ ʹ఻͑ͨํ͕Α͍ͷͰ͸ʁ w σβΠφʔ͞Μɺ৭ࢦఆ͸ʷʷʷͰ
 ໌هͯ͘͠ΕΔͱΤϯδχΞ͸ॿ͔Γ·͢

  26. ਓ ΛؒʹΛஔ͍ͨͱ ͠ ͯɺ σβΠ φʔ 6*Ϧʔ υ ΤϯδχΞ ฉ͘

    ݕ౼͢Δ
  27. ͜ͷؔ܎ʹͳͬ ͨͱ ͠ ͯɺ
 ໰୊͸ղܾ͢Δ͔ ʁ

  28. σβΠφʔ 6*Ϧʔ υ Τϯδ χΞ

  29. ʮ૭ޱʯ ͠ͳ͍

  30. ௚઀ ԥΓ ͋ ͬ ͯ ͘ ͍ͩ͞

  31. ͰɺσβΠ φʔ͞Μͱ Ͳ͏͓͠Ό΂Γ ͢Δ ʁ

  32. w ʮ͜Εͱ͜Εɺࡉ͔͍ҧ͍͕͋Γ·͕͢
 ͲΜͳͩ͜ΘΓ͕͋ΔͷͰ͔͢ʂʁʯ w ʮ͜Εɺ΋͔ͨ͠͠Βڞ௨ԽͰ͖ͦ͏͡Όͳ͍
 ɹͰ͔͢ʁʯ w ʮ࣮͸8FCͷ࢓༷తʹ͜͏ͳͬͪΌ͏ΜͰ͢ʯ

  33. ೉͍͠ݴ༿͸͍Βͳ͍ ॏശͷ۱ΛΛͭͭ͘ ͜ ͱ͔Β

  34. πʔ ϧͷલʹਓ

  35. ͍ͨ͞ΜΔ͏ͱ టष ͘

  36. ΈΜͳͰ σβΠϯ͠ ͯ͜

  37. 5IBOL: PV

  38. ͔͜͜Β͸͕࣌ؒ ༨ͬ ͨΒ

  39. IUUQTTUPSZCPPLKTPSH

  40. 3FBDU 4UPSZCPPL w 3FBDUͰಈ͘6*ΧλϩάͷΑ͏ͳ΋ͷ͕࡞ΕΔ w ฐࣾͰ͸ͦͷ··։ൃͰ͖Δ
 ελΠϧΨΠυͱͯ͠όϦόϦ׆༻த

  41. ίʔ υ ϑ Ν ʔ ε τ w ɹੜ੒͞Ε͍ͯΔίʔυҰ൪ਖ਼͍͠σβΠϯͰ͋Δ w

    ɹσβΠϯϑΝΠϧ͸ॻ͖ࣺͯ w ɹσβΠφʔ͞Μͷݴ༿͕มΘͬͨ w ʮࠓ։ൃதͷը໘Ͱ͸Ͳ͏ͳ͍ͬͯ·͔͢ʁʯ w ʮσβΠϯ͓͜͢ͷͰεΫγϣ͍ͩ͘͞ʯ w σβΠϯى఺΋ίʔυʹͳΔ
  42. σβΠ ϯγ ε ς Ϝ w "UPNJD%FTJHOͷࢥ૝ʹӨڹ͞Ε·ͬͨ͘ w ίϯϙʔωϯτཻ౓ͷ࿩Ͱ͸ͳ͍Ͱ͢
 5IF"UPNJD8PSLqPX


    IUUQBUPNJDEFTJHOCSBEGSPTUDPNDIBQUFS
  43. σβΠ φʔͷηϯ ε Λ 뱌͠ ͯϧʔ ϧԽ

  44. ϧʔ ϧԽ w ΤϯδχΞ͕σβΠφʔʹΠϯλϏϡʔ໊ͯ͠લΛͭ ͚Δ w σβΠϯγεςϜελΠϧΨΠυ͸ΤϯδχΞ͕ ࡞Δ w σβΠϯͷ෯Λ޿͛ΔͨΊͷϧʔϧఏҊ΋΍ͬͪΌ͏ɹ


    w σβΠϯΛνʔϜͷ΋ͷʹ͢Δ
  45. ޮՌ w ୭͕6*Λ࡞ͬͯ΋ͦͦ͜͜ͷ඼࣭ w ιʔείʔυͷϞδϡʔϧੑ͕ߴ·Δʢʂʣ w είʔϓΛ͖Δ͜ͱͰσβΠϯ͚ͩͰͳ͘
 ίʔυ඼্࣭͕͛΍͘͢ͳΔ w ΞΫηγϏϦςΟʹ໨Λ޲͚΍͍͢

    w զʑ͸)5.-$44ͰγεςϜΛ࡞Δͷͩͱ͍͏ೝࣝ
  46. ޮՌ w ୭͕6*Λ࡞ͬͯ΋ͦͦ͜͜ͷ඼࣭ w ιʔείʔυͷϞδϡʔϧੑ͕ߴ·Δʢʂʣ w είʔϓΛ͖Δ͜ͱͰσβΠϯ͚ͩͰͳ͘
 ίʔυ඼্࣭͕͛΍͘͢ͳΔ w ΞΫηγϏϦςΟʹ໨Λ޲͚΍͍͢

    w զʑ͸)5.-$44ͰγεςϜΛ࡞Δͷͩͱ͍͏ೝࣝ 53645"#30--&3