Designing in React: Why and How

by fand/amagitakayosi

Slide 1

Slide 1 text

Designing in id:amagitakayosi WHY and HOW? React

Slide 2

Slide 2 text

@amagitakayosi

Slide 3

Slide 3 text

ۀ຿Ͱ3FBDU࢖ͬͯ·͢

Slide 4

Slide 4 text

Έͳ͞Μ 3FBDU ࢖ͬͯ·͔͢ʁ

Slide 5

Slide 5 text

ࠓ೔͸ 3FBDUͱ͸ʁ ͱ͍͏࿩͸͠·ͤΜ

Slide 6

Slide 6 text

͔ΘΓʹ 3FBDUք۾Ͱ Կ͕ى͖ͯΔͷʁ ͱ͍͏࿩Λ͠·͢

Slide 7

Slide 7 text

3FBDUͷྺ࢙

Slide 8

Slide 8 text

✨3FBDU஀ੜ✨ w ެ։ w େن໛ͳίʔυϕʔεͰ΋଱͑ΔΑ͏ʹ w ࠶ར༻Մೳͳίϯϙʔωϯτ w ୯ํ޲ͳσʔλϑϩʔ

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

3FBDU "OHVMBS

Slide 11

Slide 11 text

3FBDUͷྑ͍ͱ͜Ζ

Slide 12

Slide 12 text

γϯϓϧ ଎͍ ςετ͠΍͍͢ ৘ใ͕๛෋ ࣮੷͕͋Δ *NNVUBCMF *TPNPSQIJD 'VUVSFPSJFOUFE

Slide 13

Slide 13 text

ैདྷͷϑϨʔϜϫʔΫͱͷҧ͍ w ίϯϙʔωϯτࢦ޲ʹͳΓ΍͍͢ w ୯ํ޲ͳσʔλϑϩʔ

Slide 14

Slide 14 text

ίϯϙʔωϯτࢦ޲ w 'PPCBS\CB[^ͱ͍͏ίϯϙʔωϯτ͸  શͯͷৼΔ෣͍͕CBSͷ஋Ͱܾ·Δ w 7JSUVBM%0. w %0.Λ௚઀৮Εͳ͍ w ଞͷίϯϙʔωϯτʹյ͞ΕΔࣄ͕ͳ͍

Slide 15

Slide 15 text

୯ํ޲ͳσʔλϑϩʔ w ୤XBZCJOEJOH w ࢠ͕਌ͷ஋Λॻ͖׵͑Δ͜ͱ͕ͳ͍ʂ w 'PPCBS\CB[^ͱ͍͏ίϯϙʔωϯτ͸  CBSͷ஋ΛมߋͰ͖ͳ͍

Slide 16

Slide 16 text

ࢀߟ3FBDUGPS%FTJHOFST IUUQSFBDUGPSEFTJHOFSTDPNMBCTSFBDUKTJOUSPEVDUJPOGPSQFPQMFXIPLOPXKVTU FOPVHIKRVFSZUPHFUCZ

Slide 17

Slide 17 text

3FBDUք۾ͷϒʔϜ w 'MVYϑϨʔϜϫʔΫઓ૪ w *NNVUBCMF ؔ਺ܕ '31 w 3FBDU/BUJWF

Slide 18

Slide 18 text

'MVYઓ૪ QIPUPCZ+BTPO"4BNGJFME IUUQTXXXGMJDLSDPNQIPUPT!/

Slide 19

Slide 19 text

w 3FBDU͸ͨͩͷ7JFXϥΠϒϥϦ w 'MVYͱ͍͏ઃܭख๏͕ྲྀߦ w ϑϨʔϜϫʔΫ͕ཚཱ

Slide 20

Slide 20 text

'VODUJPOBM 3FBDUJWF 1SPHSBNNJOH

Slide 21

Slide 21 text

w ؔ਺ܕݴޠͷӨڹΛड͚ͨ  ઃܭख๏ϥΠϒϥϦ͕ྲྀߦ w *NNVUBCMF+4 0N ʜʜ

Slide 22

Slide 22 text

3FBDU/BUJWF

Slide 23

Slide 23 text

w 3FBDUͰJ04"OESPJEΞϓϦΛ։ൃ w +4࣮ߦΤϯδϯ͕σόΠε্Ͱ૸Δ w Ϗϧυͳ͠Ͱ+4ΛϦϩʔυ

Slide 24

Slide 24 text

Ͱ΋ɺ3FBDUͷσβΠϯͬͯʜʜ w σβΠφʔ͸৮ΓͮΒ͍ΜͰ͠ΐʁ w ςϯϓϨʔτ͍͡Γʹ͍͘ w Ξχϝʔγϣϯ೉͍͠ w +4ॻ͚ͳ͍ͱ͍͚ͳ͍ʁʁ

Slide 25

Slide 25 text

ʢ◞‸◟ʣ

Slide 26

Slide 26 text

σβΠϯपΓͰ΋ಈ͖͕ʂʂ w #&. w $44JO+4 w ֤ΞχϝʔγϣϯϥΠϒϥϦ

Slide 27

Slide 27 text

BEM

Slide 28

Slide 28 text

#&.͕ྲྀߦ w #MPDL &MFNFOU .PEJpFSʹ෼͚ͯ  ελΠϧΛॻ͘ख๏ w 3FBDUͱ#&.͸૬ੑ͕͍͍ w ίϯϙʔωϯτ㲈#MPDL

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

Block Element Modiﬁer

Slide 31

Slide 31 text

CSS in JS

Slide 32

Slide 32 text

$44͸᠘ͩΒ͚ w શ෦άϩʔόϧ w ΧεέʔσΟϯάɺ༏ઌ౓ w ม਺ɺؔ਺͔ͭ͑ͳ͍ w ܧঝͰ͖ͳ͍ʜʜ

Slide 33

Slide 33 text

ϓϦϓϩηοαͷ࣌୅ w 4BTT -FTT 4UZMVT ʜʜ w ࠷ۙͩͱ1PTU$44ͱ͔

Slide 34

Slide 34 text

ͦΕ+4Ͱྑ͘Ͷʁ 3FBDU։ൃϝϯόʔ $ISJTUPQIFS$IFEFBV

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

$44JO+4ొ৔ w 3FBDUίϯϙʔωϯτఆٛ಺Ͱ  TUZMFଐੑʹελΠϧΛࢦఆ w ม਺ɺؔ਺ɺͳΜͰ΋࢖͑Δ

Slide 37

Slide 37 text

CSS in JSͷίʔυྫ

Slide 38

Slide 38 text

ओͳ$44JO+4ϥΠϒϥϦ w 3BEJVN%FDPSBUPSͰίϯϙʔωϯτΛϥο ϓ w $4+45FNQMBUF4USJOHͰελΠϧΛهड़ w $44.PEVMFT$44ϑΝΠϧΛಡΈࠐΉ

Slide 39

Slide 39 text

Animation

Slide 40

Slide 40 text

3FBDUඪ४ͷΞχϝʔγϣϯ w GCʮ3FBDU$445SBOTJUJPO(SPVQͰ  ࡉ੍͔͘ޚͰ͖ΔΑʔ ?P? ʗʯ w ཁૉͷग़ݱɺফ໓ͦΕͧΕʹ  ελΠϧΛ౰ͯΒΕΔ

Slide 41

Slide 41 text

3FBDU$445S SZͷ࢖͍ํ w 3FBDU$445SBOTJUJPO(SPVQͰ  ର৅ͷίϯϙʔωϯτΛXSBQ w FOUFS MFBWF FOUFSBDUJWF౳ͷΫϥεʹ  ελΠϧΛهड़

Slide 42

Slide 42 text

ओͳΞχϝʔγϣϯϥΠϒϥϦ w SFBDUNPUJPO w SFBDUXFCBOJNBUJPO w SFBDUWFMPDJUZ

Slide 43

Slide 43 text

SFBDUNPUJPO w ࠓͷͱ͜ΖҰ൪ਓؾ TUBST w FBTJOHؔ਺ΛબͿͷͰ͸ͳ͘ɺ  όωͷߗ͞Ͱಈ͖ΛΧελϚΠζ͢Δ

Slide 44

Slide 44 text

όωͷߗ͞

Slide 45

Slide 45 text

SFBDUWFMPDJUZ w 7FMPDJUZKTͷϥούʔ w K2VFSZ࣌୅͔Β͓ੈ࿩ʹͳͬͯͨํ΋  ଟ͍͸ͣ

Slide 46

Slide 46 text

SFBDUXFCBOJNBUJPO w 8FC"OJNBUJPOT"1*ͷϥούʔ w ʹެ։͞Εͨ͹͔Γʂ

Slide 47

Slide 47 text

8FC"OJNBUJPOT"1* w $44 47(ʹͭͮ͘  ৽͍͠Ξχϝʔγϣϯ"1* w λΠϜϥΠϯ ΩʔϑϨʔϜϕʔε  ࠶ੜఀࢭר͖໭͠Մೳ w ࠶ੜޙͷίʔϧόοΫΛઃఆͰ͖Δ

Slide 48

Slide 48 text

·ͱΊ

Slide 49

Slide 49 text

ΈΜͳ3FBDUͰ༡΅͏ʂʂ w ͜Ε·Ͱͷ.7$ΞʔΩςΫνϟͱ͸  ҰઢΛը͍ͯ͠Δ w ಠಛͷจԽݍ͕ੜ·Ε͍ͯΔ w ΋ͷ͍͢͝εϐʔυͰ  ৽͍͠௅ઓ͕ߦΘΕ͍ͯΔ