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

初心者に向けたサンプル付きReact入門と勉強法について

44e1d764e11da2c4235c255904e60a7f?s=47 takepo
April 25, 2018

 初心者に向けたサンプル付きReact入門と勉強法について

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

44e1d764e11da2c4235c255904e60a7f?s=128

takepo

April 25, 2018
Tweet

More Decks by takepo

Other Decks in Programming

Transcript

  1. 3FBDUೖ໳ αϙʔλʔζ$P-BCษڧձ 5BLFTIJNB/BIPLP

  2. ࣗݾ঺հ ϥϯαʔζ-1'ࣄۀ෦ ೥ଔͷ৽ଔ೥໨ͷΤϯδχΞ ࠷ۙ͸3FBDU $BLF1)1 3BJMTͱࡶ৯ؾຯ ۂ໘σΟεϓϨΠಋೖ✨ ि຤ϑϦʔϥϯε࢝Ί·ͨ͠ ࠷ۙ͸ࣗ࡞ΩʔϘʔυʹڵຯ͋Γ·͢ 3FBDUྺ͸೥Ҏ্ܦͪ·ͨ͠

    ஛ౡࡊึࢠ !UBLFQP
  3. -BODFST

  4. None
  5. ϝοηʔδ

  6. ϓϩδΣΫτ؅ཧ

  7. QPPL

  8. QPPL ΋ͱ΋ͱ8FCͰ࡞͍ͬͯͨ $PSEPWBͷ্ʹ৐ͤͯ J04 "OESPJEΞϓϦ΋ϦϦʔε ݱࡏ͸8FC J04 "OESPJEͷ։ൃ·Δͬͱ3FBDUͰɻ

  9. ໨࣍  3FBDUͱ͸ w 3FBDU w $PNQPOFOU w +49 

    Α͘ฉ͘͜ΕγϦʔζ  ษڧ๏  ·ͱΊ w QSPQTͱTUBUF w $PNQPOFOUϥΠϑαΠΫϧ
  10. 3FBDUͱ͸ʁ

  11. 3FBDUͱ͸ʁ w 'BDFCPPL੡ͷΦʔϓϯιʔε w +BWB4DSJQUͰ6*Λ࡞ΔͨΊ͚ͩͷϥΠϒϥϦ w .7$Ͱ͍͏7JFXͷΈʹಛԽ͍ͯ͠Δ w $PNQPOFOUΛͭ͘Δ͚ͩ w

    σʔλͷྲྀΕ͸୯Ұํ޲ w Ծ૝%0.ͰॲཧΛߦ͏
  12. ར༻͍ͯ͠Δاۀ

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

  14. +49 ͜Ε΋'BDFCPPL੡ +BWB4DSJQUͷߏจதʹ 9.-෩ͷ΋ͷΛͦͷ··ॻ͚Δ )5.-ͱࣅ͍ͯΔͷͰ ඇΤϯδχΞͰ΋Θ͔Γ΍͍͢ʂ

  15. $PNQPOFOUͷαϯϓϧ

  16. +49͸)5.-ͬΆ͍

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

  18. QSPQTΛ࢖ͬͨαϯϓϧ

  19. -JTU*UFN$PNQPOFOU

  20. "QQ$PNQPOFOU

  21. ͜Μͳ෩ʹ΋͔͚·͢

  22. TUBUFΛ࢖ͬͨαϯϓϧ

  23. ͭ͘Γ ࣮ࡍʹΧ΢ϯτͤ͞Δ஋ΛTUBUFͰ࣋ͨͤΔ TUBUF͸ಈతʹ஋ΛมԽͤ͞ΒΕΔͷͰ ϘλϯΛԡͨ࣌͠ʹTUBUFͷ஋ΛมԽͤ͞Δ

  24. "QQ$PNQPOFOU

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

  26. IUUQTRJJUBDPNLBXBDIJJUFNTCGDGFBF

  27. 3FBDUͱҰॹʹ Α͘ฉ͘ίϨ͸

  28. ͜Εͳʹʁ w 3FEVY w ZBSO w #BCFM w XFCQBDL w

    qPX w $44.PEVMFT
  29. 3FEVYʁ 3FBDU͕ѻ͏TUBUFΛ Ұݩ؅ཧ͢ΔͨΊͷϑϨʔϜϫʔΫ ΞϓϦ͕େ͖͘ͳͬͯ $PNQPOFOUಉ͕࢜ґଘ͋͠͏Α͏ʹͳΔͱ TUBUFͷ؅ཧΛ͢Δ͜ͱ͕େมʹͳΔ 3FEVYΛ࢖͏͜ͱͰ3FBDUͷ$PNQPOFOUͰ͸ TUBUFΛ؅ཧͤͣʹQSPQT͚ͩΛ࢖͏Α͏ʹͰ͖Δ

  30. ZBSOʁ ύοέʔδ؅ཧπʔϧ ϑϩϯτͰར༻͢ΔϥΠϒϥϦΛ QBDLBHFKTPOͱ͍͏ϑΝΠϧͰ؅ཧɻ 3VCZͰ͍͏CVOEMFS ߴ଎ʂ

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

  32. XFCQBDLʁ ΞηοτΛੜ੒͢ΔϏϧυπʔϧ ෳ਺ͷιʔεΛҰͭʹ·ͱΊΒΕΔ KT͚ͩͰͳ͘DTTͱ͔΋ѻ͑Δ #BCFM΋XFCQBDLͷϏϧυͰߦ͏

  33. qPXʁ +BWBTDSJQU͸ಈతܕ෇͚ݴޠ ੩తܕνΣοΫΛͯ͘͠Εͯɺ ࣮ߦલʹܕΤϥʔΛݕग़Ͱ͖Δ 6TFSͳͲಠࣗʹܕ΋ఆٛͰ͖ΔͷͰ ίʔυ͕ϦʔμϒϧʹͳΔ

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

  35. ͍Ζ͍Ζ঺հ͠·͕ͨ͠ ͱΓ͍͋͑ͣͬͺ͍͋ΔͷͰ ͜Μͳͷ͋ΔΜͩఔ౓Ͱ࠷ॳ͸ɻɻ DSFBUFSFBDUBQQΈͯΈͯ IUUQTHJUIVCDPNGBDFCPPLDSFBUFSFBDU BQQ

  36. ͜Ε͚ͩͰ0,✨ OQNJOTUBMMHDSFBUFSFBDUBQQ DSFBUFSFBDUBQQNZ@BQQ DENZ@BQQ OQNTUBSU

  37. ษڧ๏

  38. Θͨ͠ͷ3FBDUϨϕϧ ҰԠ΍ͬͱ೥ʹͳΓ·͢ɻ ࠷ॳ࢝Ίͨ͜Ζ +BWB4DSJQUࣗମ͋Μ·Γ৮ͬͨ͜ͱͳ͍ ֮͑Δ͜ͱ͍Ζ͍Ζ͋Γ͗ͯ͢Θ͚Θ͔Μͳ͍ ᤨຑ਄ൃ঱⚡

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

  40. ษڧ๏ ᶃ ެࣜνϡʔτϦΞϧ ᶄ νʔϜͰྠಡձ ᶅ Ұਓ3FBDUKT"EWFOU$BMFOEBS ᶆ Φʔϓϯιʔεʹίϛοτ ᶇ

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

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

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

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

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

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

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

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

    ͳͲͳͲɻ
  49. ·ͱΊ

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

  51. ͍͞͝ʹ !UBLFQP ࠓճͷొஃࢿྉ΋Ζ΋Ζ UXJUUFS͔Β΋ྲྀͦ͏ͱࢥ͍ͬͯ·͢ جຊ͸ɺ3FBDUΛ͸͡Ίͱͯ͠ 8FC·ΘΓͷ࠷৽هࣄ͍Ζ͍ΖγΣ Ξͯͭ͠Ϳ͍ͯ·͢ʂ ੋඇUXJUUFSϑΥϩʔ͍ͯͩ͘͠͞ ࣭໰౳΋ؾܰʹͲ͏ͧʙʂ

  52. Ұॹʹָ͠Έ·͠ΐ͏

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