Designing in React: Why and How

FRONTEND CONFERENCE 2016
http://kfug.jp/frontconf2016/

Transcript

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

   View Slide

2. @amagitakayosi
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

7. 3FBDUͷྺ࢙
   

   View Slide

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

   View Slide

9. View Slide

10. 3FBDU
    "OHVMBS
    

    View Slide

11. 3FBDUͷྑ͍ͱ͜Ζ
    

    View Slide

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

    View Slide

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

    View Slide

14. ίϯϙʔωϯτࢦ޲
    w 'PPCBS\CB[^ͱ͍͏ίϯϙʔωϯτ͸

    શͯͷৼΔ෣͍͕CBSͷ஋Ͱܾ·Δ
    w 7JSUVBM%0.
    w %0.Λ௚઀৮Εͳ͍
    w ଞͷίϯϙʔωϯτʹյ͞ΕΔࣄ͕ͳ͍
    

    View Slide

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

    CBSͷ஋ΛมߋͰ͖ͳ͍
    

    View Slide

16. ࢀߟ3FBDUGPS%FTJHOFST
    IUUQSFBDUGPSEFTJHOFSTDPNMBCTSFBDUKTJOUSPEVDUJPOGPSQFPQMFXIPLOPXKVTU
    FOPVHIKRVFSZUPHFUCZ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

20. 'VODUJPOBM
    3FBDUJWF
    1SPHSBNNJOH
    

    View Slide

21. w ؔ਺ܕݴޠͷӨڹΛड͚ͨ

    ઃܭख๏ϥΠϒϥϦ͕ྲྀߦ
    w *NNVUBCMF+4 0N ʜʜ
    

    View Slide

22. 3FBDU/BUJWF
    

    View Slide

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

    View Slide

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

    View Slide

25. ʢ◞‸◟ʣ
    

    View Slide

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

    View Slide

27. BEM
    

    View Slide

28. #&.͕ྲྀߦ
    w #MPDL &MFNFOU .PEJpFSʹ෼͚ͯ

    ελΠϧΛॻ͘ख๏
    w 3FBDUͱ#&.͸૬ੑ͕͍͍
    w ίϯϙʔωϯτ㲈#MPDL
    

    View Slide

29. View Slide

30. Block
    Element
    Modifier
    

    View Slide

31. CSS in JS
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

35. View Slide

36. $44JO+4ొ৔
    w 3FBDUίϯϙʔωϯτఆٛ಺Ͱ

    TUZMFଐੑʹελΠϧΛࢦఆ
    w ม਺ɺؔ਺ɺͳΜͰ΋࢖͑Δ
    

    View Slide

37. CSS in JSͷίʔυྫ
    

    View Slide

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

    View Slide

39. Animation
    

    View Slide

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

    ࡉ੍͔͘ޚͰ͖ΔΑʔ ?P?
    ʗʯ
    w ཁૉͷग़ݱɺফ໓ͦΕͧΕʹ

    ελΠϧΛ౰ͯΒΕΔ
    

    View Slide

41. 3FBDU$445S SZͷ࢖͍ํ
    w 3FBDU$445SBOTJUJPO(SPVQͰ

    ର৅ͷίϯϙʔωϯτΛXSBQ
    w FOUFS MFBWF FOUFSBDUJWF౳ͷΫϥεʹ

    ελΠϧΛهड़
    

    View Slide

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

    View Slide

43. SFBDUNPUJPO
    w ࠓͷͱ͜ΖҰ൪ਓؾ TUBST
    
    w FBTJOHؔ਺ΛબͿͷͰ͸ͳ͘ɺ

    όωͷߗ͞Ͱಈ͖ΛΧελϚΠζ͢Δ
    

    View Slide

44. όωͷߗ͞
    

    View Slide

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

    ଟ͍͸ͣ
    

    View Slide

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

    View Slide

47. 8FC"OJNBUJPOT"1*
    w $44 47(ʹͭͮ͘

    ৽͍͠Ξχϝʔγϣϯ"1*
    w λΠϜϥΠϯ ΩʔϑϨʔϜϕʔε

    ࠶ੜఀࢭר͖໭͠Մೳ
    w ࠶ੜޙͷίʔϧόοΫΛઃఆͰ͖Δ
    

    View Slide

48. ·ͱΊ
    

    View Slide

49. ΈΜͳ3FBDUͰ༡΅͏ʂʂ
    w ͜Ε·Ͱͷ.7$ΞʔΩςΫνϟͱ͸

    ҰઢΛը͍ͯ͠Δ
    w ಠಛͷจԽݍ͕ੜ·Ε͍ͯΔ
    w ΋ͷ͍͢͝εϐʔυͰ

    ৽͍͠௅ઓ͕ߦΘΕ͍ͯΔ
    

    View Slide