Designing in React: Why and How

Transcript

1. Designing in id:amagitakayosi WHY and HOW? React

2. @amagitakayosi

3. ۀ຿Ͱ3FBDU࢖ͬͯ·͢

4. Έͳ͞Μ
   3FBDU
   ࢖ͬͯ·͔͢ʁ

5. ࠓ೔͸
   3FBDUͱ͸ʁ
   ͱ͍͏࿩͸͠·ͤΜ

6. ͔ΘΓʹ
   3FBDUք۾Ͱ
   Կ͕ى͖ͯΔͷʁ
   ͱ͍͏࿩Λ͠·͢

7. 3FBDUͷྺ࢙

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

9. None

10. 3FBDU
    
    
    
    
    
    
    
    
     "OHVMBS
    
    
    

11. 3FBDUͷྑ͍ͱ͜Ζ

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

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

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

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

16. ࢀߟ
    3FBDU
    GPS
    %FTJHOFST IUUQSFBDUGPSEFTJHOFSTDPNMBCTSFBDUKTJOUSPEVDUJPOGPSQFPQMFXIPLOPXKVTU FOPVHIKRVFSZUPHFUCZ

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

18. 'MVYઓ૪ QIPUP
    CZ
    +BTPO
    "
    4BNGJFME
    IUUQTXXXGMJDLSDPNQIPUPT!/

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

20. 'VODUJPOBM
    3FBDUJWF
    1SPHSBNNJOH

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

22. 3FBDU
    /BUJWF

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

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

25. ʢ◞‸◟ʣ

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

27. BEM

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

29. None

30. Block Element Modifier

31. CSS in JS

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

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

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

35. None

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

37. CSS in JSͷίʔυྫ

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

39. Animation

40. 3FBDUඪ४ͷΞχϝʔγϣϯ w GCʮ3FBDU$445SBOTJUJPO(SPVQͰ

    
    
    
    
    
    ࡉ੍͔͘ޚͰ͖ΔΑʔ
    ?P? ʗʯ
    w ཁૉͷग़ݱɺফ໓ͦΕͧΕʹ
 ελΠϧΛ౰ͯΒΕΔ

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

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

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

44. όωͷߗ͞

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

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

47. 8FC
    "OJNBUJPOT
    "1* w $44
    47(ʹͭͮ͘
 ৽͍͠Ξχϝʔγϣϯ"1*
    w λΠϜϥΠϯ
    ΩʔϑϨʔϜϕʔε
 ࠶ੜఀࢭר͖໭͠Մೳ
    w

    ࠶ੜޙͷίʔϧόοΫΛઃఆͰ͖Δ

48. ·ͱΊ

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