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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

ʮσβΠ φʔ ʯ ͱ ʮΤϯδχΞ ʯ ͷڠۀ ࠓ೔࿩͢͜ͱ

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

σβΠ φʔ ͱΤϯδχΞ σβΠφʔ Ϧʔμʔ ʢΤϯδχΞʣ ΤϯδχΞ ͍͍ͩͨ ͜ ͜Ͱղܾ ͨ·ʹ ૬ஊ

Slide 8

Slide 8 text

σβΠ ϯ όϥόϥࣄ݅ w ΤϯδχΞ͕σβΠϯʹಠࣗղऍΛՃ͑ͯ  ಥ͖ਐΜͩ݁Ռ w DPMPSˠ ʜ w GPOUTJ[FˠQY QY MBSHFʜ

Slide 9

Slide 9 text

'BOUBTUJD

Slide 10

Slide 10 text

͑ Β͍ਓ͸ݴ͏

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

ͦΜͳ೔͸Ͳ͏ͤ དྷͳ͍

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

ί ϛ ϡχέʔγ ϣ ϯ͕଍ Γ ͳ͍ w ·͖ͨ͗ίϛϡχέʔγϣϯ w ͓Μͳ͡ΦϑΟεʹ͍ͳ͕Β஌Βͳ͍ਓ w ͍ͬ͜͏ʹҭͨͳ͍৴པײ

Slide 15

Slide 15 text

ظ଴͢Δ Ξ΢ τ ϓ ο τ

Slide 16

Slide 16 text

๲ΒΉޡղ

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

ͳΜͱ͔ͤͳͳ

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

࣮ࡍʹ6*ʹؔ͢Δ ૬ஊ͕͖ͩͨ͠

Slide 22

Slide 22 text

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

͖Ί·ͤʙʙ Μ ͸ͳ͠·ͤʙ Μ ๻͸ʜ ϑΝ Π τ͒ʙ

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

ਓ ΛؒʹΛஔ͍ͨͱ ͠ ͯɺ σβΠ φʔ 6*Ϧʔ υ ΤϯδχΞ ฉ͘ ݕ౼͢Δ

Slide 27

Slide 27 text

͜ͷؔ܎ʹͳͬ ͨͱ ͠ ͯɺ  ໰୊͸ղܾ͢Δ͔ ʁ

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

ʮ૭ޱʯ ͠ͳ͍

Slide 30

Slide 30 text

௚઀ ԥΓ ͋ ͬ ͯ ͘ ͍ͩ͞

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

πʔ ϧͷલʹਓ

Slide 35

Slide 35 text

͍ͨ͞ΜΔ͏ͱ టष ͘

Slide 36

Slide 36 text

ΈΜͳͰ σβΠϯ͠ ͯ͜

Slide 37

Slide 37 text

5IBOL: PV

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

IUUQTTUPSZCPPLKTPSH

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

ίʔ υ ϑ Ν ʔ ε τ w ɹੜ੒͞Ε͍ͯΔίʔυҰ൪ਖ਼͍͠σβΠϯͰ͋Δ w ɹσβΠϯϑΝΠϧ͸ॻ͖ࣺͯ w ɹσβΠφʔ͞Μͷݴ༿͕มΘͬͨ w ʮࠓ։ൃதͷը໘Ͱ͸Ͳ͏ͳ͍ͬͯ·͔͢ʁʯ w ʮσβΠϯ͓͜͢ͷͰεΫγϣ͍ͩ͘͞ʯ w σβΠϯى఺΋ίʔυʹͳΔ

Slide 42

Slide 42 text

σβΠ ϯγ ε ς Ϝ w "UPNJD%FTJHOͷࢥ૝ʹӨڹ͞Ε·ͬͨ͘ w ίϯϙʔωϯτཻ౓ͷ࿩Ͱ͸ͳ͍Ͱ͢  5IF"UPNJD8PSLqPX  IUUQBUPNJDEFTJHOCSBEGSPTUDPNDIBQUFS

Slide 43

Slide 43 text

σβΠ φʔͷηϯ ε Λ 뱌͠ ͯϧʔ ϧԽ

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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