ReactコンポーネントとCSSコンポーネントは1対1なのか問題について

React Meetup #4 でのLT資料です。

Transcript

1. 3FBDUίϯϙʔωϯτͱ$44ίϯϙʔωϯτ͸
 ରͳͷ͔໰୊ʹ͍ͭͯ !TIJCF
2. σβΠφʔ / ϑϩϯτΤϯυΤϯδχΞ γϕ @shibe97
3. ॳΊʹݴ͓ͬͯ͘ͱ
4. ๻͸ର೿Ͱ͢
5. Ҏલ͸ର͡Όͳ͍೿Ͱͨ͠
6. ͔͠͠ɺ࠷ۙ͸Ұपճͬͯɺ
   ΍ͬͺର͡ΌͶʁͬͯͳͬͯ·͢
7. 3FBDUίϯϙʔωϯτ
   ͱ
   $44ίϯϙʔωϯτ
8. )5.-ͷ·ͱ·Γ
   ͱ
   $44ͷ·ͱ·Γ
9. )5.-΋$44΋ͲͪΒ΋7JFXΛදݱ͢ΔͨΊͷ΋ͷ
   $44͸)5.-ʹඥͮ͘
   ෼ղͰ͖Δཻ౓΋౳͍͠
10. 3FBDUίϯϙʔωϯτ͸7JFXͱϩδοΫΛ ෼཭͢Δ͜ͱͰ͔ͳΓࡉ͔͘෼ղͰ͖Δ
11. 1SFTFOUBUJPOBM
    BOE
    $POUBJOFS
    $PNQPOFOUT 1SFTFOUBUJPOBM
    $PNQPOFOU
    ࠶ར༻ՄೳͳϐϡΞͳίϯϙʔωϯτ
    $POUBJOFS
    $PNQPOFOU
    SFEVYͷDPOOFDU ؔ਺Λར༻͠ɺDPNQPOFOUBDUJPOTUPSFΛඥ෇͚Δ
12. 5XJUUFSͷλΠϜϥΠϯͷྫ
13. )PNF5JNFMJOF
    ͱ
    .FOUJPOT5JNFMJOF
14. 5JNFMJOF
    ίϯϙʔωϯτ 5JNFMJOF
    ίϯϙʔωϯτ
15. 5JNFMJOF
    ίϯϙʔωϯτ 5JNFMJOF
    ίϯϙʔωϯτ )PNF5JNFMJOFίϯςφ .FOUJPOT5JNFMJOFίϯςφ
16. 5JNFMJOF
    ίϯϙʔωϯτ 5JNFMJOF
    ίϯϙʔωϯτ )PNF5JNFMJOFίϯςφ .FOUJPOT5JNFMJOFίϯςφ UIJTQSPQTHFU5JNFMJOF HFU)PNF5JNFMJOF HFU.FOUJPOT5JNFMJOF
17. +49
    
    CSPXTFSJGZ
    
    XFCQBDL ͕ঢ়گΛม͑ͨ
18. +49ͱͯ͠)5.-Λ+4্Ͱ؅ཧͰ͖ΔΑ͏ʹͳͬͨ
    CSPXTFSJGZ
    
    XFCQBDLΛ༻͍ͯɺ+4ϑΝΠϧΛ෼ׂͯ͠
 ؅ཧͰ͖ΔΑ͏ʹͳͬͨ
    )5.-͕$44ͱಉ౳ʹ෼ׂͰ͖ΔͷͰ͋Ε͹ɺཻ౓͸ἧ͏
19. "UPNJD
    %FTJHO
20. ͜ΕҎ্
    ෼ׂͰ͖ͳ͍୯Ґ 
21. 8FCʹ͓͍ͯɺίϯϙʔωϯτ͸ )5.-Ͱߏ੒͞Ε͍ͯΔ
22. ͜ΕҎ্෼ղͰ͖ͳ͍
 )5.-ͷঢ়ଶͱ͸ʁ
23. )5.-λάͦͷ΋ͷ 
24. ۃ୺ͳ࿩ɺ%0.͕ͭͭ
 ίϯϙʔωϯτʹ੒Γ͏Δ
25. %0.
    πϦʔ
26. %0.
    πϦʔ "UPN
27. %0.
    πϦʔ .PMFDVMF
28. %0.
    πϦʔ 0SHBOJTN
29. %0.
    πϦʔ
30. ϕετ͸"UPN୯ҐͰ
 ίϯϙʔωϯτԽ
31. ͨͩ͠ɺ޻਺ͱͷ݉Ͷ߹͍΋͋Δ
    ڞ௨Խ͢΂͖΋ͷ͕ग़͖ͯͨλΠϛϯάͰখ͍͞
 ίϯϙʔωϯτʹ෼ղ͍ͯ͘͠ͷ΋͋Γ
35. ͚ͩ͜͜ίϯϙʔωϯτԽ͢Δ͜ͱʹ
 ҙຯ͸͋Δͷʁ 2
36. ҙຯ͸͋Δ "
37. /BNFγϕ/BNF
38. 
    /BNFKT
39. ελΠϧࠐΈͷίϯϙʔωϯτʹͰ͖Δ ϝϦοτ
43. ଞͷίϯϙʔωϯτʹྲྀ༻Ͱ͖Δ ϝϦοτ
44. $44ίϯϙʔωϯτͷ೉͍͠ͱ͜Ζ ద༻͢ΔελΠϧ͸ίϯϙʔωϯτ಺ʹด͍ͯ͡Δඞཁ͕͋Δ
    ֎෦ʹӨڹͷ͋ΔελΠϧ͸֎ଆʢ਌ʣͷίϯϙʔωϯτͰࢦఆ ͢Δ΂͖
45. 4DSFFO/BNF
    \
    
    
    
    
    DPMPS
    
    
    
    
    
    
    qPBU
    
    MFGU
    
    
    
    
    NBSHJOMFGU
    
    QY
    ^ DMBTT/BNFl4DSFFO/BNFz 
    DTT 
    KTY
46. 4DSFFO/BNF
    \
    
    
    
    
    DPMPS
    
    
    
    
    
    
    qPBU
    
    MFGU
    
    
    
    
    NBSHJOMFGU
    
    QY
    ^ º º DMBTT/BNFl4DSFFO/BNFz 
    DTT 
    KTY
47. 4DSFFO/BNF
    \
    
    
    
    
    DPMPS
    
    
    
    
    
    
    qPBU
    
    MFGU
    
    
    
    
    NBSHJOMFGU
    
    QY
    ^ º º 5XFFU@@TDSFFO/BNF
    \
    
    
    
    
    qPBU
    
    MFGU
    
    
    
    
    NBSHJOMFGU
    
    QY
    ^ DMBTT/BNFl4DSFFO/BNF
    5XFFU@@TDSFFO/BNFz 
    DTT 
    KTY
48. յΕͳ͍$44ʹ͢ΔͨΊʹ ֤$44ίϯϙʔωϯτʹඞཁͳ͜ͱ
    ࣗ෼ࣗ਎ͷελΠϦϯά
    ࢠίϯϙʔωϯτͷϨΠΞ΢τ
49. ਌͸ࢠཁૉΛ஌͍ͬͯΔ
    ࢠ͸਌ཁૉΛ஌Βͳ͍
50. ͦΕͬͯ3FBDUίϯϙʔωϯτ΋Ұॹ
51. ͔ͩΒཻ౓΋ἧ͏
52. ·ͱΊ 3FBDUίϯϙʔωϯτ΋$44ίϯϙʔωϯτͱಉ౳ͷཻ౓Ͱ ࡉ෼ԽͰ͖Δʢ͸ͣʣ
    ίϯϙʔωϯτ͸ࡉ෼Խ͢Δʹӽͨ͜͠ͱ͸ͳ͍͕ɺ
 ޻਺ͱͷτϨʔυΦϑ
53. 5IBOLT
     !TIJCF