React & TypeScriptの 環境構築と実装Tips

React 東京 in 日本語での登壇資料🎉🎉🎉
https://www.meetup.com/ReactJS-Tokyo/events/258583055/_

@Twitter
https://twitter.com/__sakito__

Transcript

1. 3FBDU5ZQF4DSJQUͷ

   ؀ڥߏஙͱ࣮૷5JQT
   

   View Slide

2. wTBLJUP !@@TBLJUP@@
   
   w'SPOU&OE&OHJOFFS
   w3FBD XFCQBDL (BUTCZ+4
   w&WFOU
   w#POpSF'SPOUFOE
   w3FBDUNFFUVQ
   w*OTJEF'SPOUFOE
   

   View Slide

3. *OTJEF'SPOUFOEͷ$'1ืूதʂʂ

   IUUQTEPDTHPPHMFDPNGPSNTEF
   '"*Q2-4q17/@435:#OK%5"(8CM,D;6H2W'Z#G(X9q%@HWJFXGPSN
   

   View Slide

4. ΞδΣϯμ
   wDSFBUFSFBDUBQQ
   wBXFTPNFUZQFTDSJQUMPBEFS
   wUTMPBEFS
   w!CBCFMQSFTFUUZQFTDSJQU
   w࣮૷5JQTΛগʑ
   w·ͱΊ
   

   View Slide

5. ࠓ೔͸ιʔείʔυΛ

   ղઆ͠ͳ͕ΒਐΈ·͢
   

   View Slide

6. ΞδΣϯμ
   wDSFBUFSFBDUBQQ
   wBXFTPNFUZQFTDSJQUMPBEFS
   wUTMPBEFS
   w!CBCFMQSFTFUUZQFTDSJQU
   w࣮૷5JQTΛগʑ
   w·ͱΊ
   

   View Slide

7. $SFBUF3FBDU"QQ
   w؆୯ʹࢼ͢ͷͳΒ$SFBUF3FBDU"QQͰ؀ڥ͕࡞ΕΔ
   IUUQTGBDFCPPLHJUIVCJPDSFBUFSFBDUBQQEPDTBEEJOHUZQFTDSJQU
   

   View Slide

8. $SFBUF3FBDU"QQΛ࢖Θͳ͍ղઆ
   wࠓ೔આ໌͢Δͷ͸ɺ$SFBUF3FBDU"QQΛ࢖Θͳ͍Ͱ

   3FBDU5ZQF4DSJQUͰ؀ڥΛߏங͢Δํ๏
   wϏϧυͷύϑΥʔϚϯενϡʔχϯά΍

   ࡉ͔͍ઃఆΛ͍ͨ͠ਓ΁
   w$SFBUF3FBDU"QQΛFKFDU͠ͳͯ͘΋͍͍Α͏ʹ
   

   View Slide

9. ΞδΣϯμ
   wDSFBUFSFBDUBQQ
   wBXFTPNFUZQFTDSJQUMPBEFS
   wUTMPBEFS
   w!CBCFMQSFTFUUZQFTDSJQU
   w࣮૷5JQTΛগʑ
   w·ͱΊ
   

   View Slide

10. 3FBDU5ZQF4DSJQUͰϏϧυ͢Δํ๏

    XFCQBDLWҎ߱Λ࢖༻͢Δ৔߹
    
    wBXFTPNFUZQFTDSJQUMPBEFS
    wUTMPBEFS
    w!CBCFMQSFTFUUZQFTDSJQU
    

    View Slide

11. 3FBDU5ZQF4DSJQUͰϏϧυ͢Δํ๏

    XFCQBDLΛ࢖༻͢Δ৔߹
    
    wBXFTPNFUZQFTDSJQUMPBEFS
    wUTMPBEFS
    w!CBCFMQSFTFUUZQFTDSJQU
    

    View Slide

12. BXFTPNFUZQFTDSJQUMPBEFS͸

    ΋͏࢖Θͳ͍
    wBXFTPNFUZQFTDSJQUMPBEFSΛҰԠ্͕͛ͨɺ

    ࢖Θͳ͍ํ͕ྑ͍
    w5ZQF4DSJQUɺXFCQBDLͷมߋʹ௥͍͍͍ͭͯͳ͍
    wଟ͘ͷ*TTVF΍13͕ղܾ͞Ε͍ͯͳ͍
    wίϯύΠϧ଎౓͕஗͘ͳΔՄೳੑ͕͋Δɺ

    ͦ΋ͦ΋ίϯύΠϧ͢ΒͰ͖ͳ͍έʔε΋
    wৄ͍͠ཧ༝͸2JJUBʹॻ͍ͨ

    BXFTPNFUZQFTDSJQUMPBEFS͸΋͏࢖Θͳ͍Α͏ʹ͠Α͏ɺͦͷཧ༝

    IUUQTRJJUBDPN@@TBLJUP@@JUFNTEBCGC
    
    

    View Slide

13. 3FBDU5ZQF4DSJQUͰϏϧυ͢Δํ๏

    XFCQBDLΛ࢖༻͢Δ৔߹
    
    wBXFTPNFUZQFTDSJQUMPBEFS
    wUTMPBEFS
    w!CBCFMQSFTFUUZQFTDSJQU
    

    View Slide

14. UTMPBEFSΛ࢖༻͢Δd४උd
    

    View Slide

15. UTMPBEFSΛ࢖༻͢ΔdUTͷઃఆd
    

    View Slide

16. UTMPBEFSΛ࢖༻͢ΔdXFCQBDLͷઃఆd
    

    View Slide

17. UTMPBEFSΛ࢖༻͢ΔdIUNMͷ४උd
    

    View Slide

18. UTMPBEFSΛ࢖༻͢ΔdIUNMͷ४උd
    

    View Slide

19. UTMPBEFSΛ࢖༻͢ΔdIUNMͷ४උd
    

    View Slide

20. UTMPBEFSΛ࢖༻͢Δd3FBDUͷ४උd
    

    View Slide

21. UTMPBEFSΛ࢖༻͢ΔdϩʔΧϧىಈd
    

    View Slide

22. UTMPBEFSΛ࢖༻͢ΔdϩʔΧϧىಈd
    

    View Slide

23. ىಈͰ͖ͨ
    

    View Slide

24. CBCFMΛ࢖༻͍ͨ͠৔߹
    

    View Slide

25. CBCFMΛ࢖༻͢Δd४උd
    

    View Slide

26. CBCFMΛ࢖༻͢ΔdXFCQBDLͷઃఆd
    wίϯύΠϧͷղܾॱ

    54

    54$PNQJMFS

    +4

    #BCFM

    +4
    

    View Slide

27. ͜ΕͰCBCFMϓϥάΠϯ΋࢖͑Δ
    

    View Slide

28. ஫ҙ఺͕̎ͭ͋Δ⚠⚠
    

    View Slide

29. CBCFMΛ࢖༻͢Δd஫ҙ఺ͦͷ⚠d
    NPEVMFʹDPNNPOKTΛ

    ࢦఆ͍ͯ͠Δͱɺ

    CBCFM΁ม׵͢Δࡍʹґଘͷ

    ղܾ͕Ͱ͖ͳ͍ͷͰɺ

    CBCMFϓϥάΠϯ͕ޮ͔ͳ͍
    

    View Slide

30. CBCFMΛ࢖༻͢Δd஫ҙ఺ͦͷ⚠d
    wCBCFMMPBEFS͕UTMPBEFSΑΓઌʹॲཧ͞Ε͍ͯΔ
    wXFCQBDLͷMPBEFS͸ӈ͔Βࠨʹॲཧ͞ΕΔ

    IUUQTXFCQBDLKTPSHDPODFQUTMPBEFST
    

    View Slide

31. ΋ͬͱίϯύΠϧ࣌ؒΛ୹͘͢Δ
    

    View Slide

32. ίϯύΠϧ࣌ؒΛ୹͘͢Δd४උd
    

    View Slide

33. ίϯύΠϧ࣌ؒΛ୹͘͢ΔdXFCQBDLd
    

    View Slide

34. ίϯύΠϧ࣌ؒΛ୹͘͢ΔdXFCQBDLd
    w௥Ճᶃ

    'PSL5T$IFDLFS8FCQBDL1MVHJOͰܕΤϥʔͷΈΛݕ
    ஌͢ΔΑ͏ʹ
    w௥Ճᶄ

    UTMPBEFSͷPQUJPOTʹIBQQZ1BDL.PEFΛࢦఆɺ

    ͜ΕͰܕΛແࢹ͠ 54+4ͷίϯύΠϧͷΈʹ
    w௥Ճᶅ

    UISFBEMPBEFSͰXFCQBDLΛϚϧνεϨουԽ

    ᶃͱᶄΛฒྻͰॲཧͰ͖ΔΑ͏ʹ
    

    View Slide

35. ίϯύΠϧ࣌ؒΛ୹͘͢ΔdXFCQBDLd
    wίϯύΠϧΛ࣮ߦͷྲྀΕ

    ᶃ54ܕνΣοΫΤϥʔͷ༗ແΛදࣔ

    ᶄ5454$PNQJMFS+4#BCFM+4
    w͜Ε͕ฒྻͰߦ͑ΔΑ͏ʹͳΔ
    

    View Slide

36. ίϯύΠϧ࣌ؒΛ୹͘͢ΔdXFCQBDLd
    wมߋલͱมߋޙ
    wNT͔Β

    NT
    ⬇
    

    View Slide

37. ઃఆΊΜͲ͍͘͞
    

    View Slide

38. ؆୯ʹ࣮૷Ͱ͖Δ
    

    View Slide

39. XFCQBDLDPOpHQMVHJOT

    IUUQTHJUIVCDPNOBNJDTXFCQBDLDPOpHQMVHJOT
    
    wXFCQBDLͷઃఆ͕٧·ͬͨϓϥάΠϯ
    

    View Slide

40. XFCQBDLDPOpHQMVHJOTd࣮૷d
    w͜Ε͚ͩ
    wͨͩ͠ɺCBCFMͳͲͷ૊Έ߹Θͤ͸Ͱ͖ͳ͍ͷͰ஫ҙ
    

    View Slide

41. XFCQBDLDPOpHQMVHJOTd࣮૷d
    wத਎

    IUUQTHJUIVCDPN5ZQF4USPOHUTMPBEFSCMPCNBTUFSFYBNQMFTUISFBEMPBEFS
    XFCQBDLDPOpHKT
    
    

    View Slide

42. 3FBDU5ZQF4DSJQUͰϏϧυ͢Δํ๏

    XFCQBDLΛ࢖༻͢Δ৔߹
    
    wBXFTPNFUZQFTDSJQUMPBEFS
    wUTMPBEFS
    w!CBCFMQSFTFUUZQFTDSJQU
    

    View Slide

43. !CBCFMQSFTFUUZQFTDSJQUd࣮૷d
    wެࣜυΩϡϝϯτ͕͢΂ͯɺ೉͍͠ઃఆ͸ͳ͍

    IUUQTCBCFMKTJPEPDTFOCBCFMQSFTFUUZQFTDSJQU
    
    

    View Slide

44. !CBCFMQSFTFUUZQFTDSJQUd஫ҙ఺d
    wίϯύΠϧ࣌ʹܕΤϥʔΛग़͢͜ͱ͸Ͱ͖ͳ͍
    wલड़ͨ͠'PSL5T$IFDLFS8FCQBDL1MVHJOΛ࢖͏͔ɺ

    IVTLZͳͲͰίϛοτ࣌ʹUTDΛ࣮ߦ͢Δ͔͠ͳͦ͞͏
    wDSFBUFSFBDUBQQ΍/FYUKT͸

    'PSL5T$IFDLFS8FCQBDL1MVHJOΛ࢖༻͍ͯ͠Δ
    

    View Slide

45. !CBCFMQSFTFUUZQFTDSJQUd஫ҙ఺d
    w!CBCFMQSFTFUUZQFTDSJQU͸ɺ

    !CBCFMQMVHJOUSBOTGPSNUZQFTDSJQUΛؚΜͰ͍Δ

    IUUQTCBCFMKTJPEPDTFOCBCFMQMVHJOUSBOTGPSNUZQFTDSJQU
    
    wαϙʔτ͞Ε͍ͯͳ͍߲໨͕ͭ͋Δ
    

    View Slide

46. UTMPBEFSͱ!CBCFMQSFTFUUZQFTDSJQU͸

    ͲͪΒ͕͍͍ͷ͔ʁ
    

    View Slide

47. ීஈ࢖͏ͳΒUTMPBEFS
    wαϙʔτ͞Ε͍ͯͳ͍ߏจͳͲ͕͋ΔͷͰɺ

    UTMPBEFSΛ࢖͏ͷ͕ແ೉
    w!CBCFMQSFTFUUZQFTDSJQU͸

    /FYUKT΍DSFBUFSFBDUBQQͷΑ͏ͳ+4ϑΝΠϧΛؚΉ

    ϥΠϒϥϦͷΑ͏ͳ΋ͷΛίϯύΠϧ͍ͨ͠ͱ͖ʹɺ

    ࢖༻͢ΔͱઃఆϑΝΠϧ͕൥ࡶʹͳΒͳ͍ར఺͕͋Δ
    

    View Slide

48. ΞδΣϯμ
    wDSFBUFSFBDUBQQ
    wBXFTPNFUZQFTDSJQUMPBEFS
    wUTMPBEFS
    w!CBCFMQSFTFUUZQFTDSJQU
    w࣮૷5JQTΛগʑ
    w·ͱΊ
    

    View Slide

49. ࣮૷5JQT(
    

    View Slide

50. 3FBDU4'$͸'$ʹมΘͬͨ
    wWͷมߋ͔Β3FBDU4'$͕3FBDU'$ʹมߋ

    IUUQTHJUIVCDPN%FpOJUFMZ5ZQFE%FpOJUFMZ5ZQFEQVMM
    
    

    View Slide

51. $MBTTίϯϙʔωϯτ͔Βܕͷࢀর
    

    View Slide

52. 4UBUFͷ࣮૷ํ๏
    w3FBDUIPPLTͩͱෆཁͳ஌ࣝ
    

    View Slide

53. ΞδΣϯμ
    wDSFBUFSFBDUBQQ
    wBXFTPNFUZQFTDSJQUMPBEFS
    wUTMPBEFS
    w!CBCFMQSFTFUUZQFTDSJQU
    w࣮૷5JQTΛগʑ
    w·ͱΊ
    

    View Slide

54. ·ͱΊ
    wBXFTPNFUZQFTDSJQUMPBEFS͸࢖༻͠ͳ͍
    wUTMPBEFSΛ࢖༻͢Δ
    wϏϧυύϑΥʔϚϯεΛ͍͋͛ͯ͘
    w!CBCFMQSFTFUUZQFTDSJQU͸ɺ࣌ʹ͸͋Γ
    w3FBDU5ZQF4DSJQU͸༷ʑͳ5JQT͕͋Δ
    

    View Slide

55. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠☺
    

    View Slide