Upgrade to Pro — share decks privately, control downloads, hide ads and more …

初心者のためのReact入門

44e1d764e11da2c4235c255904e60a7f?s=47 takepo
September 25, 2018

 初心者のためのReact入門

2018/09/25に【サポーターズCoLab勉強会】初心者のためのReact入門 というイベントで登壇させていただいた時の資料です。

44e1d764e11da2c4235c255904e60a7f?s=128

takepo

September 25, 2018
Tweet

More Decks by takepo

Other Decks in Programming

Transcript

  1. ॳ৺ऀͷͨΊͷ3FBDUೖ໳ αϙʔλʔζ$P-BCษڧձ 5BLFTIJNB/BIPLP

  2. ஛ౡࡊึࢠ!UBLFQP   ೣͱ฻Β͍ͨ͠ܥ ޻େଔ8FCΤϯδχΞ ϥϯαʔζ೥໨ ࣗ࡞ΩʔϘʔυʹڵຯ௡ʑ +BWB4DSJQU1)13VCZ(P 3FBDUྺ͸೥ܦͪ·ͨ͠ ͸͡Ίʹ

    QSPGJMF
  3. -BODFST ձࣾ֓ཁ  

  4.  

  5.   -BODFST ϝοηʔδػೳ

  6.   -BODFST ϓϩδΣΫτ؅ཧ

  7.   -BODFST QPPL

  8. 3FBDU 3FEVYͷ41"ͰͰ͖͍ͯΔ ΋ͱ΋ͱ8FC͚ͩͰ࡞͍ͬͯͨ $PSEPWBͷ্ʹ৐ͤͯ J04ɾ"OESPJEΞϓϦ΋ϦϦʔε 8FCɾJ04ɾ"OESPJEͷ։ൃ·Δͬͱɻ   QPPL ࢓༷

  9. ৽نࣄۀઈࢍ։ൃதʂ 3FBDUº3FEVYº5ZQF4DSJQU "1*αʔόʔ͸(Pݴޠ ;FQMJOͰσβΠϯͷڞ༗ "1*࢓༷ॻΛNPDLαʔόʔԽ   ͸͡Ίʹ ͍·

  10.  3FBDUͱ͸  3FBDU  &4͓͞Β͍  $PNQPOFOU  +49

     ҰॹʹΑ͘ฉ͘ίϨ  ษڧ๏  ·ͱΊ  QSPQTͱTUBUF  $PNQPOFOUϥΠϑαΠΫϧ   ͸͡Ίʹ ໨࣍
  11. 3FBDU  

  12. 'BDFCPPL੡ͷΦʔϓϯιʔε +BWB4DSJQUͰ6*Λ࡞ΔͨΊ͚ͩͷϥΠϒϥϦ .7$Ͱ͍͏7JFXͷΈʹಛԽ͍ͯ͠Δ ϥΠϒϥϦ͕๛෋ -FBSO0ODF 8SJUF"OZXIFSF  $PNQPOFOUΛͭ͘Δ͚ͩ  σʔλͷྲྀΕ͕୯Ұํ޲

     Ծ૝%0.ͰॲཧΛߦ͏   3FBDU  ֓ཁ
  13.   3FBDU  ར༻͍ͯ͠Δاۀ

  14. 7VF ֶशίετ͕௿͍ εϞʔϧελʔτͰ͖Δ -BMBWFM͕αϙʔτ͍ͯͯ͠૬ੑ͹͙ͭΜ "OHVMBS 5ZQF4DSJQU ϑϧελοΫ ϥΠϒϥϦΛ௥Ճ͠ͳͯ͘΋جຊඋΘ͍ͬͯΔ  

    3FBDU  ΄͔ͱͷҧ͍
  15. DSFBUFSFBDUBQQͱ͍͏ͻͳܗΛ࢖͓͏ʂ OQNJOTUBMMHDSFBUFSFBDUBQQ DSFBUFSFBDUBQQΞϓϦ໊ DEΞϓϦ໊ OQNTUBSU   3FBDU  ͸͡Ί͔ͨ

  16.   3FBDU  ͸͡Ί͔ͨ

  17. ͜Ε͚ͩͰ 0,✨  

  18. &4  

  19.   3FBDU  &4 &$."4DSJQU +BWB4DSJQUͷݴޠ࢓༷ શͯͷϒϥ΢βͰରԠͯ͠ΔΘ͚Ͱ͸ͳ͍ #BCFMͰτϥϯεύΠϧ͢Δඞཁ͕͋Δ

  20.   &4 ಛ௃ MFU΍DPOTUͰม਺એݴ ࠶એݴ΍࠶୅ೖෆՄೳͳએݴ͕Ͱ͖ΔͷͰ ೋॏఆٛɾ༧ظͤ͵࠶୅ೖΛ๷͛Δ

  21.   &4 MFU΍$POTUͰม਺એݴ

  22.   &4 DMBTTߏจ͕࢖͑Δ

  23.   &4 ಛ௃ Ξϩʔؔ਺ Λ࢖ͬͯؔ਺ϦςϥϧΛهड़͢Δ͜ͱ͕Ͱ͖Δ GVODUJPOΛ͍͍ͪͪॻ͔ͳͯ͘ྑ͍

  24.   &4 Ξϩʔؔ਺

  25. ଞʹ΋৭ʑศརͳ ΋ͷ͕͋Δ͚Ͳ ͍ͬͨΜ0,  

  26. DPNQPOFOU  

  27. ࠶ར༻Մೳͳύʔπ ࣗ෼Ͱࣗ෼ͷঢ়ଶΛ؅ཧ͢Δ جຊతʹ$PNQPOFOUΛ࡞ͬͯ૊Έ߹Θͤͯ ΞϓϦέʔγϣϯΛ࡞͍ͬͯ͘ +49ͳͲΛ࢖ͬͯهड़͢Δ   3FBDU  $PNQPOFOU

  28. ͜Ε΋'BDFCPPL੡ +BWB4DSJQUͷߏจதʹ 9.-෩ͷ΋ͷΛͦͷ··ॻ͚Δ )5.-ͱࣅ͍ͯΔͷͰ׳ΕΕ͹ σβΠφʔͰ΋Θ͔Γ΍͍͢ʂ   3FBDU  +49

  29.   3FBDU  $PNQPOFOUαϯϓϧ

  30.   3FBDU  +49͸)5.-ͬΆ͍

  31. QSPQT $PNQPOFOUੜ੒࣌ʹ਌͔Β౉͞ΕΔΦϒδΣΫτ $PNQPOFOU͕ը໘͔Βഉআ͞ΕΔ·Ͱෆมͷ஋ *NNVUBCMFͰ͋Γ֎෦ͱͷΠϯλʔϑΣʔεͷ໾ׂ TUBUF ಈతʹ஋ΛมԽͤ͞ΒΕΔΦϒδΣΫτ $PNQPOFOU಺Ͱอ࣋   $PNQPOFOU

    QSPQTͱTUBUF
  32.   QSPQTͱTUBUF QSPQTͷαϯϓϧ

  33. ਌$PNQPOFOU͔Βࢠ$PNQPOFOU΁஋Λ౉͢ ࢠ$PNQPOFOUUFYUlUFYUl ࢠ$PNQPOFOUͰ஋Λड͚ͱͬͯදࣔ EJW\UIJTQSPQTUFYU^EJW   QSPQTΛ࢖ͬͨαϯϓϧ QSPQTͷ͔͍͔ͭͨ

  34.   QSPQTͷαϯϓϧ -JTU*UFN$PNQPOFOU

  35.   QSPQTͷαϯϓϧ "QQ$PNQPOFOU

  36.   QSPQTͱTUBUF QSPQTͷαϯϓϧ

  37.   QSPQTͷαϯϓϧ "QQ$PNQPOFOU

  38.   QSPQTͷαϯϓϧ "QQ$PNQPOFOUͷվྑ

  39.   QSPQTͱTUBUF TUBUFΛ࢖ͬͨαϯϓϧ

  40. ࣮ࡍʹΧ΢ϯτͤ͞Δ஋ΛTUBUFͰ࣋ͨͤΔ TUBUF͸ಈతʹ஋ΛมԽͤ͞ΒΕΔͷͰ ϘλϯΛԡͨ࣌͠ʹDPNQPOFOU಺Ͱ TUBUFͷ஋ΛมԽͤ͞Δ   TUBUFΛ࢖ͬͨαϯϓϧ ͭ͘Γͷઆ໌

  41. TUBUFͷॳظԽΛ͢Δ DPOTUSVDUPSͰ  UIJTTUBUF\DPVOU^ TUBUFͷDPVOUΛදࣔ EJW\UIJTTUBUFDPVOU^EJW TUBUFͷ஋Λॻ͖׵͑Δ UIJTTFU4UBUF \DPVOU^ 

      TUBUFΛ࢖ͬͨαϯϓϧ TUBUFͷ͔͍͔ͭͨ
  42.   TUBUFΛ࢖ͬͨαϯϓϧ "QQ$PNQPOFOU

  43.   QSPQTͱTUBUF TUBUFΛ࢖ͬͨαϯϓϧ

  44. $PNQPOFOUʹ͸ϥΠϑαΠΫϧϝιου͕͋Δ %0.͕Ϛ΢ϯτΞϯϚ΢ϯτ͞ΕΔͱ͖΍ɺ QSPQT͕มԽ͢Δͱ͖ͳͲͷλΠϛϯάͰݺ͹ΕΔ ϝιου "1*Λݺͼ͍ͨ౳༻్ʹ߹Θͤͯ࢖͑Δ   $PNQPOFOU $PNQPOFOUͷϥΠϑαΠΫϧ

  45. IUUQTRJJUBDPNLBXBDIJJUFNTCGDGFBF

  46. WͰԼه͕ඇਪ঑ɺࠓޙ࡟আ༧ఆ⚠ UNSAFE_ʹϦωʔϜ͞Ε͍ͯΔ DPNQPOFOU8JMM.PVOU DPNQPOFOU8JMM6QEBUF DPNQPOFOU8JMM3FDFJWF1SPQT ɹHFU%FSJWFE4UBUF'SPN1SPQTΛ࢖͏   $PNQPOFOUͷϥΠϑαΠΫϧ ͍͖͞Μͷ͸ͳ͠

  47. 3FBDUͱҰॹʹ Α͘ฉ͋͘Ε͜Ε  

  48.  3FEVY  ZBSO  #BCFM  XFCQBDL  

    3FBDUͱྑ͘Ұॹʹฉ͋͘Ε͜Ε ঺հ͢ΔϞϊ  qPX  5ZQF4DSJQU  $44.PEVMFT  +FTU
  49. 3FBDU͕ѻ͏TUBUFΛ Ұݩ؅ཧ͢ΔͨΊͷϑϨʔϜϫʔΫ ΞϓϦ͕େ͖͘ͳͬͯ $PNQPOFOUಉ͕࢜ґଘ͋͠͏Α͏ʹͳΔͱ TUBUFͷ؅ཧΛ͢Δ͜ͱ͕େมʹͳΔ 3FEVYΛ࢖͏͜ͱͰ3FBDUͷ$PNQPOFOUͰ͸ TUBUFΛ؅ཧͤͣʹQSPQT͚ͩΛ࢖͏Α͏ʹͰ͖Δ   3FBDUͱྑ͘Ұॹʹฉ͋͘Ε͜Ε

    3FEVY
  50. ύοέʔδ؅ཧπʔϧ ϑϩϯτͰར༻͢ΔϥΠϒϥϦΛ QBDLBHFKTPOͱ͍͏ϑΝΠϧͰ؅ཧ 3VCZͰ͍͏CVOEMFS ߴ଎ʂ   3FBDUͱྑ͘Ұॹʹฉ͋͘Ε͜Ε ZBSO

  51. ZBSOͷΠϯετʔϧ CSFXJOTUBMMZBSO ϓϩδΣΫτ৽ن࡞੒ ZBSOJOJU ύοέʔδ௥Ճ ZBSOBEE<QBDLBHF> ϓϩδΣΫτͷશͯͷґଘؔ܎ͷΠϯετʔϧ ZBSO  

    3FBDUͱྑ͘Ұॹʹฉ͋͘Ε͜Ε ZBSO
  52. ύοέʔδͷߋ৽ ݹ͘ͳ͍ͬͯΔύοέʔδҰཡΛදࣔͯ͠બ୒Ͱ͖Δ ZBSOVQHSBEFJOUFSBDUJWF   3FBDUͱྑ͘Ұॹʹฉ͋͘Ε͜Ε ZBSO

  53. &$."4DSJQUͷτϥϯείϯύΠϥ 3FBDU͸ੜ+4ͩͱ͠ΜͲ͍ͷͰ&4Ͱهड़ ͨͩ͠&4 +49͸ϒϥ΢βͰಈ͔ͳ͍ɻɻɻ &4ɺ+49&4ʹม׵ͯ͘͠ΕΔ   3FBDUͱྑ͘Ұॹʹฉ͋͘Ε͜Ε #BCFM

  54. ΞηοτΛੜ੒͢ΔϏϧυπʔϧ ෳ਺ͷιʔεΛҰͭʹ·ͱΊΒΕΔ KT͚ͩͰͳ͘DTTͱ͔΋ѻ͑Δ #BCFM΋XFCQBDLͷϏϧυͰߦ͏   3FBDUͱྑ͘Ұॹʹฉ͋͘Ε͜Ε 8FCQBDL

  55. +BWBTDSJQU͸ಈతܕ෇͚ݴޠ ੩తܕνΣοΫΛͯ͘͠Εͯɺ ࣮ߦલʹܕΤϥʔΛݕग़Ͱ͖Δ 6TFSͳͲಠࣗʹܕ΋ఆٛͰ͖ΔͷͰ ίʔυ͕ϦʔμϒϧʹͳΔ ઌ಄ʹʮ!qPXʯΛ͚ͭΔ͚ͩ   3FBDUͱྑ͘Ұॹʹฉ͋͘Ε͜Ε GMPX

  56. ϚΠΫϩιϑτ͕ͭͬͨ͘ݴޠ KTʹରͯ͠੩తܕ෇͚͕Ͱ͖Δ 54KTʹίϯύΠϧ͕ඞཁ 3FBDU/BUJWF΋UTʹରԠͨ͠Γͱ࠷ۙਓؾ "OHVMBSͷඪ४ରԠͰ΋͋Δ   3FBDUͱྑ͘Ұॹʹฉ͋͘Ε͜Ε 5ZQF4DSJQU

  57. DTTΛ$PNQPOFOU͝ͱʹ࣋ͨͤΒΕΔπʔϧ Ϗϧυ࣌ʹিಥ͕ى͖ͳ͍Α͏ʹ ໊લ͕ࣗಈੜ੒͞ΕͯϚοϐϯάͯ͘͠ΕΔ #&.౳ͷ໋໊نଇͱ͔ߟ͑ͳͯ͘ྑ͍ ίϯϙδγϣϯ΋࢖͑Δ   3FBDUͱྑ͘Ұॹʹฉ͋͘Ε͜Ε $44.PEVMFT

  58. 'BDFCPPL੡Ϣχοτςετπʔϧ ͜ΕҰݸͰςετपΓΛׂͱ·͔ͳͬͯ͘ΕΔ ςετϥϯφʔ Ξαʔγϣϯ ϞοΫ εφοϓγϣοτςετ   3FBDUͱྑ͘Ұॹʹฉ͋͘Ε͜Ε +FTU

  59. ͱΓ͍͋͑ͣͬͺ͍͋ΔͷͰ ͜Μͳͷ͋ΔΜͩఔ౓Ͱ࠷ॳ͸ྑ͍ͱࢥ͍·͢ DSFBUFSFBDUBQQΈͯΈͯ IUUQTHJUIVCDPNGBDFCPPLDSFBUFSFBDU BQQ   3FBDUͱྑ͘Ұॹʹฉ͋͘Ε͜Ε ·ͱΊ

  60. ษڧํ๏  

  61. ҰԠ΍ͬͱ೥ʹͳΓ·͢ɻ ࠷ॳ࢝Ίͨ͜Ζ +BWB4DSJQUࣗମ͋Μ·Γ৮ͬͨ͜ͱͳ͍ ֮͑Δ͜ͱ͍Ζ͍Ζ͋Γ͗ͯ͢Θ͚Θ͔Μͳ͍ ೔ຊޠυΩϡϝϯτ΋গͳͯ͘ಡΊͳ͍ ᤨຑ਄ൃ঱⚡   ษڧํ๏ Θͨ͠ͷ3FBDUϨϕϧ

  62. ·ͩ·ֶͩͿ͜ͱ͍Ζ͍Ζ͋Δ͚Ͳָ͍͠ 3FBDUωλͰϒϩάΛॻ͚ΔΑ͏ʹͳͬͨʂ Φʔϓϯιʔε͕ಡΊΔΑ͏ʹͳͬͨʂ 044׆ಈ࢝Ίͯ3FBDUͷϥΠϒϥϦ࡞੒ͨ͠Γ Ͱ͖ΔΑ͏ʹͳͬͨʂ ͸ͯϒ΍4/4Ͱ ٕज़ωλΛνΣοΫ͢Δश׳͕͍ͭͨʂ   Θͨ͠ͷ3FBDUϨϕϧ

    Α͏΍͘
  63. ᶃ ެࣜνϡʔτϦΞϧ ᶄ νʔϜͰྠಡձ ᶅ Ұਓ3FBDUKT"EWFOU$BMFOEBS ᶆ Φʔϓϯιʔεʹίϛοτ ᶇ ΦʔϓϯιʔεΛಡΉ

    ᶈ ࣮຿Ͱͷ։ൃ ᶉ ࠷৽ٕज़ͷΩϟονΞοϓ   ษڧํ๏ ͳʹΛ΍͖͔ͬͯͨ
  64. 3FBDUͷ֓ཁΛ͔ͭΈͭͭਐΊΔ αϯϓϧ͚ͩͰͳͪ͘ΐͬͱࣗ෼ͰΞϨϯδɻ 3FEVY΋ಉ࣌ʹΠϯϓοτ͢Δඞཁ͕͋ͬͨͷͰ ಉ͘͡νϡʔτϦΞϧΛ΍ͬͯΈΔ   ษڧํ๏ ެࣜνϡʔτϦΞϧ

  65. ։ൃνʔϜΈΜͳ΄΅3FBDUॳ৺ऀ 0`3FJMMZͷೖ໳3FBDUΛ࢖༻ͯ͠ྠಡձ ղઆ͢ΔਓΛճ͠ͳ͕Βຖ೔෼ؒ νʔϜؒͷ஌ࣝڞ༗΍໨ઢ߹ΘͤΛͨ͠   ษڧํ๏ νʔϜͰྠಡձ

  66. ˏLPCB͞ΜʹΑΔ2JJUBͷΞυϕϯτΧϨϯμʔ جຊతͳͱ͜Ζ͕׬݁ʹॻ͔Ε͍ͯΔ ಡΉ͚ͩͰͳ͘ɺ٧·ͬͨͱ͖ʹௐ΂Δͷʹศར ಛʹϥΠϑαΠΫϧͷͱ͜Ζ͸ ৗʹݟ͑Δͱ͜Ζʹஔ͍͓ͯ͘ͱΑ͍͔΋   ษڧํ๏ Ұਓ3FBDUKT"EWFOU$BMFOEBS

  67. ։ൃͨ͠ιʔεΛΦʔϓϯιʔεϥΠϒϥϦԽ ະϚʔδ͕ͩػೳ௥ՃͷίϛοτΛࢼΈͨ ֎͔Βίʔυ͕ݟΒΕΔɺ ࢖ΘΕΔ͔΋͠Εͳ͍ۓுײΛ࣋ͬͯͰ͖ͯྑ͔ͬͨ   ษڧํ๏ Φʔϓϯιʔεʹίϛοτ

  68. ΦʔϓϯιʔεԽ͞Ε͍ͯΔίʔυΛಡΉ ࣮ࡍʹ࢖͍ͬͯΔϥΠϒϥϦΛݟΔͱ ಈ͖΋Θ͔Δ͠ྑ͍ ࠷ॳ͸ܰΊͷ΋ͷ΍ελʔ͕ଟ͍ਓؾͷ΋ͷΛ ͓͢͢Ί͸.BUFSJBM6*   ษڧํ๏ ΦʔϓϯιʔεΛಡΉ

  69. ݁ہ࣮ફ͕Ұ൪ ࣮຿ʹݶΒͣखΛಈ͔ͯ͠ݟΔ͜ͱ͕େࣄ ϨϏϡʔͰࢦఠΛ΋Β͑Δ ଞͷਓͷίʔυ΋ΈΕΔ ͭ·͍ͮͨ࣌ʹάάΔɺڭ͑ͯ΋Β͏   ษڧํ๏ ࣮຿Ͱͷ։ൃ

  70. ࠓ·Ͱଞݴޠ౳ֶͿ࣌͸ຊͱ͔͕΄ͱΜͲ Ͱ΋ϑϩϯτपΓͷਐԽͷεϐʔυ͕ૣ͍ͷͰ ͭͶʹΩϟονΞοϓͷඞཁ͕͋Δ ͸ͯͿɺRJJUBɺ4/4౳Λຖ೔νΣοΫ   ษڧํ๏ ࠷৽৘ใͷΩϟονΞοϓ

  71. &4 ॳ৺ऀ޲ֶ͚शαΠτͷ1SPHBUFͰΩϟονΞοϓ 2JJUBͷ·ͱΊهࣄ͞ΒͬͱಡΉ 3FBDU ʮ3FBDU։ൃݱ৔ͷڭՊॻʯ ͋ͱ͸ࣗ෼Ͱਅࣅͯ࡞ͬͯಈ͔ͯ͠ݟΔ   ษڧํ๏ ͍·͔Β΍ΔͳΒ

  72. ։ൃϝϯόʔ͕ॻ͍ͨϒϩάެ։த w ϥϯαʔζྲྀ3FBDUKTSFEVYΞϓϦ։ൃೖ໳ w 3FBDU3FEVYΛ༻͍ͨ41"৽نαʔϏεΛӡ ༻ͯ͠ಘͨ஌ݟͱ࣮૷ྫ w +BWB4DSJQUॳ৺ऀͷࢲ͕ɺ3FBDUº3FEVYʹΑΔ 41"։ൃͷҰһʹͳΔ·Ͱ ͳͲͳͲɻ

      ษڧํ๏ ϥϯαʔζΤϯδχΞϒϩά
  73. ·ͱΊ  

  74. ͍͞͝ʹ ·ͱΊ 3FBDU͸ෑډߴͦ͏ʹࢥ͑Δ͚Ͳݪཧ͸؆୯ -FBSO0ODF 8SJUF"OZXIFSF $PNQPOFOUͷ૊Έ߹ΘͤͳͷͰɺ QSPQTͱTUBUFΛ͓͑͞Ε͹࡞ΕΔʂ ·ͣ͸ެࣜνϡʔτϦΞϧ͔Βɻ ͋ͱ͸౰ͨΓલ͚ͩͲ࣮ફ͕େࣄ ࠓ͸΋͏৘ใ΋ଟ͍ͷͰେৎ෉ʂ

     
  75. ͍͞͝ʹ ͤΜͰΜ 5XJUUFS!UBLFQP ࢿྉΞοϓɺ8FC·ΘΓͷ࠷৽৘ใྲྀͯ͠·͢ʂ .&/5"UBLFQP ॳ৺ऀ޲͚ʂ8FCϓϩάϥϛϯάͷ૬ஊʹ৐Γ·͢ʂ ۙʑ3FBDU·ΘΓͷ૬ஊ΋΍Δ༧ఆ  

  76. 3FBDU஥ؒ ืूதͰ͢ʂ  

  77. ͍ͬ͠ΐʹ ָ͠Έ·͠ΐ͏  

  78.  

  79.  

  80. ࢀߟจݙ 3FBDUKTͱ͸ IUUQRJJUBDPNLPCBJUFNTEDBGBCCG 3FEVYೖ໳ʲμΠδΣετ൛ʳ෼Ͱཧղ͢Δ3FEVYͷجૅ IUUQRJJUBDPNLJJUBJUFNTBGCDGC