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

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

@Twitter
https://twitter.com/__sakito__

Transcript

1. 3FBDU
   
   5ZQF4DSJQUͷ
 ؀ڥߏஙͱ࣮૷5JQT
2. wTBLJUP !@@TBLJUP@@
   w'SPOU&OE
   &OHJOFFS
   w3FBD XFCQBDL (BUTCZ+4
   w&WFOU
   w#POpSF
   'SPOUFOE
   w3FBDU
   NFFUVQ
   w*OTJEF
   'SPOUFOE
   
3. *OTJEF
   'SPOUFOE
   ͷ$'1ืूதʂʂ
 IUUQTEPDTHPPHMFDPNGPSNTEF '"*Q2-4q17/@435:#OK%5"(8CM,D;6H2W'Z#G(X9q%@HWJFXGPSN
4. ΞδΣϯμ wDSFBUFSFBDUBQQ
   wBXFTPNFUZQFTDSJQUMPBEFS
   wUTMPBEFS
   w!CBCFMQSFTFUUZQFTDSJQU
   w࣮૷5JQTΛগʑ
   w·ͱΊ
5. ࠓ೔͸ιʔείʔυΛ
 ղઆ͠ͳ͕ΒਐΈ·͢
6. ΞδΣϯμ wDSFBUFSFBDUBQQ
   wBXFTPNFUZQFTDSJQUMPBEFS
   wUTMPBEFS
   w!CBCFMQSFTFUUZQFTDSJQU
   w࣮૷5JQTΛগʑ
   w·ͱΊ
7. $SFBUF
   3FBDU
   "QQ w؆୯ʹࢼ͢ͷͳΒ$SFBUF
   3FBDU
   "QQͰ؀ڥ͕࡞ΕΔ
   IUUQTGBDFCPPLHJUIVCJPDSFBUFSFBDUBQQEPDTBEEJOHUZQFTDSJQU
8. $SFBUF
   3FBDU
   "QQΛ࢖Θͳ͍ղઆ wࠓ೔આ໌͢Δͷ͸ɺ$SFBUF
   3FBDU
   "QQΛ࢖Θͳ͍Ͱ
 3FBDU
   
   5ZQF4DSJQUͰ؀ڥΛߏங͢Δํ๏
   wϏϧυͷύϑΥʔϚϯενϡʔχϯά΍
 ࡉ͔͍ઃఆΛ͍ͨ͠ਓ΁
   w$SFBUF
   3FBDU
   "QQΛFKFDU͠ͳͯ͘΋͍͍Α͏ʹ
9. ΞδΣϯμ wDSFBUFSFBDUBQQ
   wBXFTPNFUZQFTDSJQUMPBEFS
   wUTMPBEFS
   w!CBCFMQSFTFUUZQFTDSJQU
   w࣮૷5JQTΛগʑ
   w·ͱΊ
10. 3FBDU
    
    5ZQF4DSJQUͰϏϧυ͢Δํ๏
 XFCQBDL
    WҎ߱Λ࢖༻͢Δ৔߹ wBXFTPNFUZQFTDSJQUMPBEFS
    wUTMPBEFS
    w!CBCFMQSFTFUUZQFTDSJQU
11. 3FBDU
    
    5ZQF4DSJQUͰϏϧυ͢Δํ๏
 XFCQBDLΛ࢖༻͢Δ৔߹ wBXFTPNFUZQFTDSJQUMPBEFS
    wUTMPBEFS
    w!CBCFMQSFTFUUZQFTDSJQU
12. BXFTPNFUZQFTDSJQUMPBEFS͸
 ΋͏࢖Θͳ͍ wBXFTPNFUZQFTDSJQUMPBEFSΛҰԠ্͕͛ͨɺ
 ࢖Θͳ͍ํ͕ྑ͍
    w5ZQF4DSJQUɺXFCQBDLͷมߋʹ௥͍͍͍ͭͯͳ͍
    wଟ͘ͷ*TTVF΍13͕ղܾ͞Ε͍ͯͳ͍
    wίϯύΠϧ଎౓͕஗͘ͳΔՄೳੑ͕͋Δɺ
 ͦ΋ͦ΋ίϯύΠϧ͢ΒͰ͖ͳ͍έʔε΋
    wৄ͍͠ཧ༝͸2JJUBʹॻ͍ͨ
 BXFTPNFUZQFTDSJQUMPBEFS͸΋͏࢖Θͳ͍Α͏ʹ͠Α͏ɺͦͷཧ༝
 IUUQTRJJUBDPN@@TBLJUP@@JUFNTEBCGC
13. 3FBDU
    
    5ZQF4DSJQUͰϏϧυ͢Δํ๏
 XFCQBDLΛ࢖༻͢Δ৔߹ wBXFTPNFUZQFTDSJQUMPBEFS
    wUTMPBEFS
    w!CBCFMQSFTFUUZQFTDSJQU
14. UTMPBEFSΛ࢖༻͢Δ
    d
    ४උ
    d
15. UTMPBEFSΛ࢖༻͢Δ
    d
    UTͷઃఆ
    d
16. UTMPBEFSΛ࢖༻͢Δ
    d
    XFCQBDLͷઃఆ
    d
17. UTMPBEFSΛ࢖༻͢Δ
    d
    IUNMͷ४උ
    d
18. UTMPBEFSΛ࢖༻͢Δ
    d
    IUNMͷ४උ
    d
19. UTMPBEFSΛ࢖༻͢Δ
    d
    IUNMͷ४උ
    d
20. UTMPBEFSΛ࢖༻͢Δ
    d
    3FBDUͷ४උ
    d
21. UTMPBEFSΛ࢖༻͢Δ
    d
    ϩʔΧϧىಈ
    d
22. UTMPBEFSΛ࢖༻͢Δ
    d
    ϩʔΧϧىಈ
    d
23. ىಈͰ͖ͨ
24. CBCFMΛ࢖༻͍ͨ͠৔߹
25. CBCFMΛ࢖༻͢Δ
    d
    ४උd
26. CBCFMΛ࢖༻͢Δ
    d
    XFCQBDLͷઃఆ
    d wίϯύΠϧͷղܾॱ
 54
    
 54
    $PNQJMFS
    
    
 +4
    
    
 #BCFM
    
    
 +4
27. ͜ΕͰCBCFMϓϥάΠϯ΋࢖͑Δ
28. ஫ҙ఺͕̎ͭ͋Δ⚠⚠
29. CBCFMΛ࢖༻͢Δ
    d
    ஫ҙ఺ͦͷ⚠
    d NPEVMFʹDPNNPOKTΛ
 ࢦఆ͍ͯ͠Δͱɺ
 CBCFM΁ม׵͢Δࡍʹґଘͷ
 ղܾ͕Ͱ͖ͳ͍ͷͰɺ
 CBCMFϓϥάΠϯ͕ޮ͔ͳ͍
30. CBCFMΛ࢖༻͢Δ
    d
    ஫ҙ఺ͦͷ⚠
    d wCBCFMMPBEFS͕UTMPBEFSΑΓઌʹॲཧ͞Ε͍ͯΔ
    wXFCQBDLͷMPBEFS͸ӈ͔Βࠨʹॲཧ͞ΕΔ
 IUUQTXFCQBDLKTPSHDPODFQUTMPBEFST
31. ΋ͬͱίϯύΠϧ࣌ؒΛ୹͘͢Δ
32. ίϯύΠϧ࣌ؒΛ୹͘͢Δ
    d
    ४උ
    d
33. ίϯύΠϧ࣌ؒΛ୹͘͢Δ
    d
    XFCQBDL
    d
34. ίϯύΠϧ࣌ؒΛ୹͘͢Δ
    d
    XFCQBDL
    d w௥Ճᶃ
 'PSL5T$IFDLFS8FCQBDL1MVHJOͰܕΤϥʔͷΈΛݕ ஌͢ΔΑ͏ʹ
    w௥Ճᶄ
 UTMPBEFSͷPQUJPOTʹIBQQZ1BDL.PEFΛࢦఆɺ
 ͜ΕͰܕΛແࢹ͠ 54
    
    +4ͷίϯύΠϧͷΈʹ
    w௥Ճᶅ
 UISFBEMPBEFSͰXFCQBDLΛϚϧνεϨουԽ
 ᶃͱᶄΛฒྻͰॲཧͰ͖ΔΑ͏ʹ
35. ίϯύΠϧ࣌ؒΛ୹͘͢Δ
    d
    XFCQBDL
    d wίϯύΠϧΛ࣮ߦͷྲྀΕ
 ᶃ
    54
    
    ܕνΣοΫ
    
    Τϥʔͷ༗ແΛදࣔ
 ᶄ
    54
    
    54
    $PNQJMFS
    
    +4
    
    #BCFM
    
    +4
    w͜Ε͕ฒྻͰߦ͑ΔΑ͏ʹͳΔ
36. ίϯύΠϧ࣌ؒΛ୹͘͢Δ
    d
    XFCQBDL
    d wมߋલͱมߋޙ
    wNT
    ͔Β
 NT ⬇
37. ઃఆΊΜͲ͍͘͞
38. ؆୯ʹ࣮૷Ͱ͖Δ
39. XFCQBDLDPOpHQMVHJOT
 IUUQTHJUIVCDPNOBNJDTXFCQBDLDPOpHQMVHJOT wXFCQBDLͷઃఆ͕٧·ͬͨϓϥάΠϯ
40. XFCQBDLDPOpHQMVHJOT
    d
    ࣮૷
    d w͜Ε͚ͩ
    wͨͩ͠ɺCBCFMͳͲͷ૊Έ߹Θͤ͸Ͱ͖ͳ͍ͷͰ஫ҙ
41. XFCQBDLDPOpHQMVHJOT
    d
    ࣮૷
    d wத਎
 IUUQTHJUIVCDPN5ZQF4USPOHUTMPBEFSCMPCNBTUFSFYBNQMFTUISFBEMPBEFS XFCQBDLDPOpHKT
42. 3FBDU
    
    5ZQF4DSJQUͰϏϧυ͢Δํ๏
 XFCQBDLΛ࢖༻͢Δ৔߹ wBXFTPNFUZQFTDSJQUMPBEFS
    wUTMPBEFS
    w!CBCFMQSFTFUUZQFTDSJQU
43. !CBCFMQSFTFUUZQFTDSJQU
    d
    ࣮૷
    d wެࣜυΩϡϝϯτ͕͢΂ͯɺ೉͍͠ઃఆ͸ͳ͍
 IUUQTCBCFMKTJPEPDTFOCBCFMQSFTFUUZQFTDSJQU
44. !CBCFMQSFTFUUZQFTDSJQU
    d
    ஫ҙ఺d wίϯύΠϧ࣌ʹܕΤϥʔΛग़͢͜ͱ͸Ͱ͖ͳ͍
    wલड़ͨ͠'PSL5T$IFDLFS8FCQBDL1MVHJOΛ࢖͏͔ɺ
 IVTLZͳͲͰίϛοτ࣌ʹUTDΛ࣮ߦ͢Δ͔͠ͳͦ͞͏
    wDSFBUFSFBDUBQQ΍/FYUKT͸
 'PSL5T$IFDLFS8FCQBDL1MVHJOΛ࢖༻͍ͯ͠Δ
45. !CBCFMQSFTFUUZQFTDSJQU
    d
    ஫ҙ఺d w!CBCFMQSFTFUUZQFTDSJQU͸ɺ
 !CBCFMQMVHJOUSBOTGPSNUZQFTDSJQUΛؚΜͰ͍Δ
 IUUQTCBCFMKTJPEPDTFOCBCFMQMVHJOUSBOTGPSNUZQFTDSJQU
    wαϙʔτ͞Ε͍ͯͳ͍߲໨͕ͭ͋Δ
46. UTMPBEFSͱ!CBCFMQSFTFUUZQFTDSJQU͸
 ͲͪΒ͕͍͍ͷ͔ʁ
47. ීஈ࢖͏ͳΒUTMPBEFS wαϙʔτ͞Ε͍ͯͳ͍ߏจͳͲ͕͋ΔͷͰɺ
 UTMPBEFSΛ࢖͏ͷ͕ແ೉
    w!CBCFMQSFTFUUZQFTDSJQU͸
 /FYUKT΍DSFBUFSFBDUBQQͷΑ͏ͳ+4ϑΝΠϧΛؚΉ
 ϥΠϒϥϦͷΑ͏ͳ΋ͷΛίϯύΠϧ͍ͨ͠ͱ͖ʹɺ
 ࢖༻͢ΔͱઃఆϑΝΠϧ͕൥ࡶʹͳΒͳ͍ར఺͕͋Δ
48. ΞδΣϯμ wDSFBUFSFBDUBQQ
    wBXFTPNFUZQFTDSJQUMPBEFS
    wUTMPBEFS
    w!CBCFMQSFTFUUZQFTDSJQU
    w࣮૷5JQTΛগʑ
    w·ͱΊ
49. ࣮૷5JQT(
50. 3FBDU
    4'$͸'$ʹมΘͬͨ wWͷมߋ͔Β3FBDU4'$͕3FBDU'$ʹมߋ
 IUUQTHJUIVCDPN%FpOJUFMZ5ZQFE%FpOJUFMZ5ZQFEQVMM
51. $MBTTίϯϙʔωϯτ͔Βܕͷࢀর
52. 4UBUFͷ࣮૷ํ๏ w3FBDU
    IPPLTͩͱෆཁͳ஌ࣝ
53. ΞδΣϯμ wDSFBUFSFBDUBQQ
    wBXFTPNFUZQFTDSJQUMPBEFS
    wUTMPBEFS
    w!CBCFMQSFTFUUZQFTDSJQU
    w࣮૷5JQTΛগʑ
    w·ͱΊ
54. ·ͱΊ wBXFTPNFUZQFTDSJQUMPBEFS͸࢖༻͠ͳ͍
    wUTMPBEFSΛ࢖༻͢Δ
    wϏϧυύϑΥʔϚϯεΛ͍͋͛ͯ͘
    w!CBCFMQSFTFUUZQFTDSJQU͸ɺ࣌ʹ͸͋Γ
    w3FBDU
    
    5ZQF4DSJQU͸༷ʑͳ5JQT͕͋Δ
55. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠☺