Designing in React: Why and How

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

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 ୯ํ޲ͳσʔλϑϩʔ
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
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
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 ΋ͷ͍͢͝εϐʔυͰ
 ৽͍͠௅ઓ͕ߦΘΕ͍ͯΔ