Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Designing in React: Why and How
fand/amagitakayosi
March 05, 2016
Technology
12
3.5k
Designing in React: Why and How
FRONTEND CONFERENCE 2016
http://kfug.jp/frontconf2016/
fand/amagitakayosi
March 05, 2016
Tweet
Share
More Decks by fand/amagitakayosi
See All by fand/amagitakayosi
fand
5
2.7k
fand
1
370
fand
2
1.5k
fand
2
4.2k
fand
3
1.1k
fand
2
2.9k
fand
0
150
fand
1
5.7k
fand
1
320
Other Decks in Technology
See All in Technology
finengine
0
260
katsumataryo
3
830
halhira
1
120
surumegohan
1
180
hacker2202
0
100
sat
1
270
tatsy
0
120
ayatokura
0
270
kazeburo
1
120
gunnargrosch
0
210
jaguar_imo
0
120
autifyhq
1
760
Featured
See All Featured
cassininazir
347
20k
frogandcode
128
20k
danielanewman
2
560
roundedbygravity
242
21k
bkeepers
PRO
322
53k
caitiem20
311
17k
tanoku
86
8.6k
yeseniaperezcruz
302
31k
jonyablonski
21
1.3k
orderedlist
PRO
330
36k
kneath
294
39k
qrush
285
19k
Transcript
Designing in id:amagitakayosi WHY and HOW? React
@amagitakayosi
ۀͰ3FBDUͬͯ·͢
Έͳ͞Μ 3FBDU ͬͯ·͔͢ʁ
ࠓ 3FBDUͱʁ ͱ͍͏͠·ͤΜ
͔ΘΓʹ 3FBDUք۾Ͱ Կ͕ى͖ͯΔͷʁ ͱ͍͏Λ͠·͢
3FBDUͷྺ࢙
✨3FBDUੜ✨ w ެ։ w େنͳίʔυϕʔεͰ͑ΔΑ͏ʹ w ࠶ར༻Մೳͳίϯϙʔωϯτ w ୯ํͳσʔλϑϩʔ
None
3FBDU "OHVMBS
3FBDUͷྑ͍ͱ͜Ζ
γϯϓϧ ͍ ςετ͍͢͠ ใ͕๛ ࣮͕͋Δ *NNVUBCMF *TPNPSQIJD 'VUVSFPSJFOUFE
ैདྷͷϑϨʔϜϫʔΫͱͷҧ͍ w ίϯϙʔωϯτࢦʹͳΓ͍͢ w ୯ํͳσʔλϑϩʔ
ίϯϙʔωϯτࢦ w 'PPCBS\CB[^ͱ͍͏ίϯϙʔωϯτ શͯͷৼΔ͍͕CBSͷͰܾ·Δ w 7JSUVBM%0. w %0.Λ৮Εͳ͍ w ଞͷίϯϙʔωϯτʹյ͞ΕΔࣄ͕ͳ͍
୯ํͳσʔλϑϩʔ w XBZCJOEJOH w ࢠ͕ͷΛॻ͖͑Δ͜ͱ͕ͳ͍ʂ w 'PPCBS\CB[^ͱ͍͏ίϯϙʔωϯτ CBSͷΛมߋͰ͖ͳ͍
ࢀߟ3FBDUGPS%FTJHOFST IUUQSFBDUGPSEFTJHOFSTDPNMBCTSFBDUKTJOUSPEVDUJPOGPSQFPQMFXIPLOPXKVTU FOPVHIKRVFSZUPHFUCZ
3FBDUք۾ͷϒʔϜ w 'MVYϑϨʔϜϫʔΫઓ૪ w *NNVUBCMF ؔܕ '31 w 3FBDU/BUJWF
'MVYઓ૪ QIPUPCZ+BTPO"4BNGJFME IUUQTXXXGMJDLSDPNQIPUPT!/
w 3FBDUͨͩͷ7JFXϥΠϒϥϦ w 'MVYͱ͍͏ઃܭख๏͕ྲྀߦ w ϑϨʔϜϫʔΫ͕ཚཱ
'VODUJPOBM 3FBDUJWF 1SPHSBNNJOH
w ؔܕݴޠͷӨڹΛड͚ͨ ઃܭख๏ϥΠϒϥϦ͕ྲྀߦ w *NNVUBCMF+4 0N ʜʜ
3FBDU/BUJWF
w 3FBDUͰJ04"OESPJEΞϓϦΛ։ൃ w +4࣮ߦΤϯδϯ͕σόΠε্ͰΔ w Ϗϧυͳ͠Ͱ+4ΛϦϩʔυ
Ͱɺ3FBDUͷσβΠϯͬͯʜʜ w σβΠφʔ৮ΓͮΒ͍ΜͰ͠ΐʁ w ςϯϓϨʔτ͍͡Γʹ͍͘ w Ξχϝʔγϣϯ͍͠ w +4ॻ͚ͳ͍ͱ͍͚ͳ͍ʁʁ
ʢ◞‸◟ʣ
σβΠϯपΓͰಈ͖͕ʂʂ w #&. w $44JO+4 w ֤ΞχϝʔγϣϯϥΠϒϥϦ
BEM
#&.͕ྲྀߦ w #MPDL &MFNFOU .PEJpFSʹ͚ͯ ελΠϧΛॻ͘ख๏ w 3FBDUͱ#&.૬ੑ͕͍͍ w ίϯϙʔωϯτ㲈#MPDL
None
Block Element Modifier
CSS in JS
$44᠘ͩΒ͚ w શ෦άϩʔόϧ w ΧεέʔσΟϯάɺ༏ઌ w มɺ͔ؔͭ͑ͳ͍ w ܧঝͰ͖ͳ͍ʜʜ
ϓϦϓϩηοαͷ࣌ w 4BTT -FTT 4UZMVT ʜʜ w ࠷ۙͩͱ1PTU$44ͱ͔
ͦΕ+4Ͱྑ͘Ͷʁ 3FBDU։ൃϝϯόʔ $ISJTUPQIFS$IFEFBV
None
$44JO+4ొ w 3FBDUίϯϙʔωϯτఆٛͰ TUZMFଐੑʹελΠϧΛࢦఆ w มɺؔɺͳΜͰ͑Δ
CSS in JSͷίʔυྫ
ओͳ$44JO+4ϥΠϒϥϦ w 3BEJVN%FDPSBUPSͰίϯϙʔωϯτΛϥο ϓ w $4+45FNQMBUF4USJOHͰελΠϧΛهड़ w $44.PEVMFT$44ϑΝΠϧΛಡΈࠐΉ
Animation
3FBDUඪ४ͷΞχϝʔγϣϯ w GCʮ3FBDU$445SBOTJUJPO(SPVQͰ ࡉ੍͔͘ޚͰ͖ΔΑʔ ?P? ʗʯ w ཁૉͷग़ݱɺফ໓ͦΕͧΕʹ ελΠϧΛͯΒΕΔ
3FBDU$445S SZͷ͍ํ w 3FBDU$445SBOTJUJPO(SPVQͰ ରͷίϯϙʔωϯτΛXSBQ w FOUFS MFBWF FOUFSBDUJWFͷΫϥεʹ ελΠϧΛهड़
ओͳΞχϝʔγϣϯϥΠϒϥϦ w SFBDUNPUJPO w SFBDUXFCBOJNBUJPO w SFBDUWFMPDJUZ
SFBDUNPUJPO w ࠓͷͱ͜ΖҰ൪ਓؾ TUBST w FBTJOHؔΛબͿͷͰͳ͘ɺ όωͷߗ͞Ͱಈ͖ΛΧελϚΠζ͢Δ
όωͷߗ͞
SFBDUWFMPDJUZ w 7FMPDJUZKTͷϥούʔ w K2VFSZ͔࣌Β͓ੈʹͳͬͯͨํ ଟ͍ͣ
SFBDUXFCBOJNBUJPO w 8FC"OJNBUJPOT"1*ͷϥούʔ w ʹެ։͞Ε͔ͨΓʂ
8FC"OJNBUJPOT"1* w $44 47(ʹͭͮ͘ ৽͍͠Ξχϝʔγϣϯ"1* w λΠϜϥΠϯ ΩʔϑϨʔϜϕʔε ࠶ੜఀࢭר͖͠Մೳ w
࠶ੜޙͷίʔϧόοΫΛઃఆͰ͖Δ
·ͱΊ
ΈΜͳ3FBDUͰ༡΅͏ʂʂ w ͜Ε·Ͱͷ.7$ΞʔΩςΫνϟͱ ҰઢΛը͍ͯ͠Δ w ಠಛͷจԽݍ͕ੜ·Ε͍ͯΔ w ͷ͍͢͝εϐʔυͰ ৽͍͠ઓ͕ߦΘΕ͍ͯΔ