Reactのコンポーネント作成を効率化しよう

【増枠】UIT#2 怠けるために努力を惜しまない プロのフロントエンドエンジニアたち
https://uit.connpass.com/event/79891/

@Twitter
https://twitter.com/__sakito__

Transcript

1. 3FBDUͷίϯϙʔωϯτ࡞੒Λ

   ޮ཰Խ͠Α͏
   6*5ଵ͚ΔͨΊʹ౒ྗΛ੯͠·ͳ͍ϓϩͷϑϩϯτΤϯυΤϯδχΞͨͪ
   

   View Slide

2. View Slide

3. 3FBDUͷίϯϙʔωϯτ࡞Δͷ

   ໘౗͍͘͞ͱײͨ͡ํ͍·ͤΜ͔ʁ
   

   View Slide

4. View Slide

5. ϑΝΠϧΛ࡞੒͢Δ
   ඞཁͳϞδϡʔϧΛJNQPSU͢Δ
   DMBTTΛ࡞੒͢Δ
   FYQPSU͢Δ
   SFOEFSͱSFUVSOΛهࡌ͢Δ
   ඞཁͰ͋Ε͹$44ϑΝΠϧ࡞੒͢Δ
   ඞཁͰ͋Ε͹5FTUϑΝΠϧΛ࡞੒͢Δ
   FUDʜ
   

   View Slide

6. 3FBDUͷίϯϙʔωϯτ࡞Δͷ

   ໘౗͍͘͞Ͱ͢
   

   View Slide

7. "OHVMBSΈ͍ͨʹ$-*Ͱੜ੒͍ͨ͠
   

   View Slide

8. DSFBUFDPNQPOFOUBQQ
   

   View Slide

9. DSFBUFDPNQPOFOUBQQ
   IUUQTHJUIVCDPN$7BSJTDPDSFBUFDPNQPOFOUBQQ
   

   View Slide

10. DSFBUFDPNQPOFOUBQQ
    wίϯϙʔωϯτΛίϚϯυೖྗͰੜ੒Ͱ͖Δ
    w4'$ɺ$MBTTɺ1VSFͷίϯϙʔωϯτΛબ୒Ͱ͖Δ
    wίϯϙʔωϯτΛΧελϜͰ͖Δ
    w3FEVYΛ࢖༻͢Δύλʔϯʹ΋ରԠ
    wJOEFYϑΝΠϧͷ࢖༻Λબ୒Ͱ͖Δ
    wDTT TDTTͳͲͷελΠϧ֦ுΛબ୒Ͱ͖Δ
    w4UPSZCPPLϑΝΠϧͷੜ੒Λબ୒Ͱ͖Δ
    wUFTUϑΝΠϧͷੜ੒Λબ୒Ͱ͖Δ
    wੜ੒͢ΔQBUIΛࢦఆͰ͖Δ
    

    View Slide

11. ࢖༻ํ๏
    

    View Slide

12. ࢖༻ํ๏
    PS
    PS
    

    View Slide

13. View Slide

14. View Slide

15. ແࣄίϯϙʔωϯτ͕ੜ੒͞Εͨ
    

    View Slide

16. ࣗ෼ͷ࢖͍͍ͨ

    ίϯϙʔωϯτͷ਽ܕͰ͸ͳ͍
    

    View Slide

17. DSFBUFDPNQPOFOUBQQ
    wίϯϙʔωϯτΛίϚϯυೖྗͰੜ੒Ͱ͖Δ
    w4'$ɺ$MBTTɺ1VSFͷίϯϙʔωϯτΛબ୒Ͱ͖Δ
    wίϯϙʔωϯτΛΧελϜͰ͖Δ
    w3FEVYΛ࢖༻͢Δύλʔϯʹ΋ରԠ
    wJOEFYϑΝΠϧͷ࢖༻Λબ୒Ͱ͖Δ
    wDTT TDTTͳͲͷελΠϧ֦ுΛબ୒Ͱ͖Δ
    w4UPSZCPPLϑΝΠϧͷੜ੒Λબ୒Ͱ͖Δ
    wUFTUϑΝΠϧͷੜ੒Λબ୒Ͱ͖Δ
    wੜ੒͢ΔQBUIΛࢦఆͰ͖Δ
    

    View Slide

18. ίϯϙʔωϯτΛΧελϜͰ͖Δ
    

    View Slide

19. ίϯϙʔωϯτΛΧελϜͰ͖Δ
    DDBSDKTPOΛ࡞੒ͯ͠هड़
    

    View Slide

20. ίϯϙʔωϯτΛΧελϜͰ͖Δ
    ςϯϓϨʔτϑΝΠϧΛ࡞੒ ࠓճ͸KTͱDTTͷΈ
    
    

    View Slide

21. ίϯϙʔωϯτΛΧελϜͰ͖Δ
    ઃఆΛ্ॻ͖͢ΔOQNTDSJQUΛهड़
    ࣮ߦ
    

    View Slide

22. ίϯϙʔωϯτΛΧελϜͰ͖Δ
    

    View Slide

23. ίϯϙʔωϯτΛΧελϜͰ͖Δ
    ແࣄίϯϙʔωϯτ͕ੜ੒͞Εͨ
    

    View Slide

24. ໌೔͔Β൥Θ͍͠࡞ۀ͸

    ޮ཰Խ͠·͠ΐ͏ʂ☺
    

    View Slide

25. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
    

    View Slide