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

2917a3c430817eb71086f8973c06ebba?s=47 sakito
February 25, 2019
2.7k

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

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

@Twitter
https://twitter.com/__sakito__

2917a3c430817eb71086f8973c06ebba?s=128

sakito

February 25, 2019
Tweet

Transcript

  1. 3FBDU5ZQF4DSJQUͷ
 ؀ڥߏஙͱ࣮૷5JQT

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

    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. $SFBUF3FBDU"QQ w؆୯ʹࢼ͢ͷͳΒ$SFBUF3FBDU"QQͰ؀ڥ͕࡞ΕΔ IUUQTGBDFCPPLHJUIVCJPDSFBUFSFBDUBQQEPDTBEEJOHUZQFTDSJQU

  8. $SFBUF3FBDU"QQΛ࢖Θͳ͍ղઆ wࠓ೔આ໌͢Δͷ͸ɺ$SFBUF3FBDU"QQΛ࢖Θͳ͍Ͱ
 3FBDU 5ZQF4DSJQUͰ؀ڥΛߏங͢Δํ๏ wϏϧυͷύϑΥʔϚϯενϡʔχϯά΍
 ࡉ͔͍ઃఆΛ͍ͨ͠ਓ΁ w$SFBUF3FBDU"QQΛFKFDU͠ͳͯ͘΋͍͍Α͏ʹ

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

  10. 3FBDU 5ZQF4DSJQUͰϏϧυ͢Δํ๏
 XFCQBDLWҎ߱Λ࢖༻͢Δ৔߹ 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Λ࢖༻͢ΔdUTͷઃఆd

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

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

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

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

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

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

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

  23. ىಈͰ͖ͨ

  24. CBCFMΛ࢖༻͍ͨ͠৔߹

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

  26. CBCFMΛ࢖༻͢ΔdXFCQBDLͷઃఆ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. ίϯύΠϧ࣌ؒΛ୹͘͢ΔdXFCQBDLd

  34. ίϯύΠϧ࣌ؒΛ୹͘͢ΔdXFCQBDLd w௥Ճᶃ
 'PSL5T$IFDLFS8FCQBDL1MVHJOͰܕΤϥʔͷΈΛݕ ஌͢ΔΑ͏ʹ w௥Ճᶄ
 UTMPBEFSͷPQUJPOTʹIBQQZ1BDL.PEFΛࢦఆɺ
 ͜ΕͰܕΛແࢹ͠ 54+4ͷίϯύΠϧͷΈʹ w௥Ճᶅ
 UISFBEMPBEFSͰXFCQBDLΛϚϧνεϨουԽ


    ᶃͱᶄΛฒྻͰॲཧͰ͖ΔΑ͏ʹ
  35. ίϯύΠϧ࣌ؒΛ୹͘͢ΔdXFCQBDLd wίϯύΠϧΛ࣮ߦͷྲྀΕ
 ᶃ54ܕνΣοΫΤϥʔͷ༗ແΛදࣔ
 ᶄ5454$PNQJMFS+4#BCFM+4 w͜Ε͕ฒྻͰߦ͑ΔΑ͏ʹͳΔ

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

  37. ઃఆΊΜͲ͍͘͞

  38. ؆୯ʹ࣮૷Ͱ͖Δ

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

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

  41. XFCQBDLDPOpHQMVHJOTd࣮૷d wத਎
 IUUQTHJUIVCDPN5ZQF4USPOHUTMPBEFSCMPCNBTUFSFYBNQMFTUISFBEMPBEFS XFCQBDLDPOpHKT

  42. 3FBDU 5ZQF4DSJQUͰϏϧυ͢Δํ๏
 XFCQBDLΛ࢖༻͢Δ৔߹ wBXFTPNFUZQFTDSJQUMPBEFS wUTMPBEFS w!CBCFMQSFTFUUZQFTDSJQU

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

  44. !CBCFMQSFTFUUZQFTDSJQUd஫ҙ఺d wίϯύΠϧ࣌ʹܕΤϥʔΛग़͢͜ͱ͸Ͱ͖ͳ͍ wલड़ͨ͠'PSL5T$IFDLFS8FCQBDL1MVHJOΛ࢖͏͔ɺ
 IVTLZͳͲͰίϛοτ࣌ʹUTDΛ࣮ߦ͢Δ͔͠ͳͦ͞͏ wDSFBUFSFBDUBQQ΍/FYUKT͸
 'PSL5T$IFDLFS8FCQBDL1MVHJOΛ࢖༻͍ͯ͠Δ

  45. !CBCFMQSFTFUUZQFTDSJQUd஫ҙ఺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. 3FBDU4'$͸'$ʹมΘͬͨ wWͷมߋ͔Β3FBDU4'$͕3FBDU'$ʹมߋ
 IUUQTHJUIVCDPN%FpOJUFMZ5ZQFE%FpOJUFMZ5ZQFEQVMM

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

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

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

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

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