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

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

Transcript

1. 3FBDU4UPSZCPPLͱɺ
   શһࢀՃܕͷ6*։ൃ %*45 
   ʮ8FCσβΠϯͷݱ৔ͷͨΊͷޮ཰Խज़ʯ σ β Π ϯ
2. ෲےϩʔϥʔΤϰΝ ϯδ Σ Ϧ ε τ
   
   ࣾ಺γ Σ ϑ
   
   )5.-
   
   $44
   
   +BWB4DSJQU
   
   6*Ϧʔ υͬ Ά͍
   
   4/4
   !NVTJHO ԣ಺޺थ
   ෲےϩʔϥʔͷྗΛ৴͡Ζ
3. ෲےϩʔϥʔΤϰΝ ϯδ Σ Ϧ ε τ
   
   ࣾ಺γ Σ ϑ
   
   )5.-
   
   $44
   
   +BWB4DSJQU
   
   6*Ϧʔ υͬ Ά͍
   
   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
    "UPNJD
    8PSLqPX
 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