FRONTEND CONFERENCE 2016 http://kfug.jp/frontconf2016/
Designing inid:amagitakayosiWHY and HOW?React
View Slide
@amagitakayosi
ۀͰ3FBDUͬͯ·͢
Έͳ͞Μ3FBDUͬͯ·͔͢ʁ
ࠓ3FBDUͱʁͱ͍͏͠·ͤΜ
͔ΘΓʹ3FBDUք۾ͰԿ͕ى͖ͯΔͷʁͱ͍͏Λ͠·͢
3FBDUͷྺ࢙
✨3FBDUੜ✨w ެ։w େنͳίʔυϕʔεͰ͑ΔΑ͏ʹw ࠶ར༻Մೳͳίϯϙʔωϯτw ୯ํͳσʔλϑϩʔ
3FBDU"OHVMBS
3FBDUͷྑ͍ͱ͜Ζ
γϯϓϧ͍ςετ͍͢͠ใ͕๛࣮͕͋Δ*NNVUBCMF*TPNPSQIJD'VUVSFPSJFOUFE
ैདྷͷϑϨʔϜϫʔΫͱͷҧ͍w ίϯϙʔωϯτࢦʹͳΓ͍͢w ୯ํͳσʔλϑϩʔ
ίϯϙʔωϯτࢦw 'PPCBS\CB[^ͱ͍͏ίϯϙʔωϯτ શͯͷৼΔ͍͕CBSͷͰܾ·Δw 7JSUVBM%0.w %0.Λ৮Εͳ͍w ଞͷίϯϙʔωϯτʹյ͞ΕΔࣄ͕ͳ͍
୯ํͳσʔλϑϩʔw XBZCJOEJOHw ࢠ͕ͷΛॻ͖͑Δ͜ͱ͕ͳ͍ʂw 'PPCBS\CB[^ͱ͍͏ίϯϙʔωϯτ CBSͷΛมߋͰ͖ͳ͍
ࢀߟ3FBDUGPS%FTJHOFSTIUUQSFBDUGPSEFTJHOFSTDPNMBCTSFBDUKTJOUSPEVDUJPOGPSQFPQMFXIPLOPXKVTUFOPVHIKRVFSZUPHFUCZ
3FBDUք۾ͷϒʔϜw 'MVYϑϨʔϜϫʔΫઓ૪w *NNVUBCMF ؔܕ '31w 3FBDU/BUJWF
'MVYઓ૪QIPUPCZ+BTPO"4BNGJFMEIUUQTXXXGMJDLSDPNQIPUPT!/
w 3FBDUͨͩͷ7JFXϥΠϒϥϦw 'MVYͱ͍͏ઃܭख๏͕ྲྀߦw ϑϨʔϜϫʔΫ͕ཚཱ
'VODUJPOBM3FBDUJWF1SPHSBNNJOH
w ؔܕݴޠͷӨڹΛड͚ͨ ઃܭख๏ϥΠϒϥϦ͕ྲྀߦw *NNVUBCMF+4 0N ʜʜ
3FBDU/BUJWF
w 3FBDUͰJ04"OESPJEΞϓϦΛ։ൃw +4࣮ߦΤϯδϯ͕σόΠε্ͰΔw Ϗϧυͳ͠Ͱ+4ΛϦϩʔυ
Ͱɺ3FBDUͷσβΠϯͬͯʜʜw σβΠφʔ৮ΓͮΒ͍ΜͰ͠ΐʁw ςϯϓϨʔτ͍͡Γʹ͍͘w Ξχϝʔγϣϯ͍͠w +4ॻ͚ͳ͍ͱ͍͚ͳ͍ʁʁ
ʢ◞‸◟ʣ
σβΠϯपΓͰಈ͖͕ʂʂw #&.w $44JO+4w ֤ΞχϝʔγϣϯϥΠϒϥϦ
BEM
#&.͕ྲྀߦw #MPDL &MFNFOU .PEJpFSʹ͚ͯ ελΠϧΛॻ͘ख๏w 3FBDUͱ#&.૬ੑ͕͍͍w ίϯϙʔωϯτ㲈#MPDL
BlockElementModifier
CSS in JS
$44᠘ͩΒ͚w શ෦άϩʔόϧw ΧεέʔσΟϯάɺ༏ઌw มɺ͔ؔͭ͑ͳ͍w ܧঝͰ͖ͳ͍ʜʜ
ϓϦϓϩηοαͷ࣌w 4BTT -FTT 4UZMVT ʜʜw ࠷ۙͩͱ1PTU$44ͱ͔
ͦΕ+4Ͱྑ͘Ͷʁ3FBDU։ൃϝϯόʔ$ISJTUPQIFS$IFEFBV
$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Ͱ ରͷίϯϙʔωϯτΛXSBQw FOUFS MFBWF FOUFSBDUJWFͷΫϥεʹ ελΠϧΛهड़
ओͳΞχϝʔγϣϯϥΠϒϥϦw SFBDUNPUJPOw SFBDUXFCBOJNBUJPOw SFBDUWFMPDJUZ
SFBDUNPUJPOw ࠓͷͱ͜ΖҰ൪ਓؾ TUBSTw FBTJOHؔΛબͿͷͰͳ͘ɺ όωͷߗ͞Ͱಈ͖ΛΧελϚΠζ͢Δ
όωͷߗ͞
SFBDUWFMPDJUZw 7FMPDJUZKTͷϥούʔw K2VFSZ͔࣌Β͓ੈʹͳͬͯͨํ ଟ͍ͣ
SFBDUXFCBOJNBUJPOw 8FC"OJNBUJPOT"1*ͷϥούʔw ʹެ։͞Ε͔ͨΓʂ
8FC"OJNBUJPOT"1*w $44 47(ʹͭͮ͘ ৽͍͠Ξχϝʔγϣϯ"1*w λΠϜϥΠϯ ΩʔϑϨʔϜϕʔε ࠶ੜఀࢭר͖͠Մೳw ࠶ੜޙͷίʔϧόοΫΛઃఆͰ͖Δ
·ͱΊ
ΈΜͳ3FBDUͰ༡΅͏ʂʂw ͜Ε·Ͱͷ.7$ΞʔΩςΫνϟͱ ҰઢΛը͍ͯ͠Δw ಠಛͷจԽݍ͕ੜ·Ε͍ͯΔw ͷ͍͢͝εϐʔυͰ ৽͍͠ઓ͕ߦΘΕ͍ͯΔ