初心者のためのReact入門

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

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

-BODFST ձࣾ֓ཁ

-BODFST ϝοηʔδػೳ

-BODFST ϓϩδΣΫτ؅ཧ

-BODFST QPPL

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

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

3FBDUͱ͸ 3FBDU &4͓͞Β͍ $PNQPOFOU +49
ҰॹʹΑ͘ฉ͘ίϨ ษڧ๏ ·ͱΊ QSPQTͱTUBUF $PNQPOFOUϥΠϑαΠΫϧ ͸͡Ίʹ ໨࣍

'BDFCPPL੡ͷΦʔϓϯιʔε +BWB4DSJQUͰ6*Λ࡞ΔͨΊ͚ͩͷϥΠϒϥϦ .7$Ͱ͍͏7JFXͷΈʹಛԽ͍ͯ͠Δ ϥΠϒϥϦ͕๛෋ -FBSO0ODF 8SJUF"OZXIFSF $PNQPOFOUΛͭ͘Δ͚ͩ σʔλͷྲྀΕ͕୯Ұํ޲
Ծ૝%0.ͰॲཧΛߦ͏ 3FBDU ֓ཁ

3FBDU ར༻͍ͯ͠Δاۀ

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

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

3FBDU ͸͡Ί͔ͨ

͜Ε͚ͩͰ 0,✨

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

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

&4 MFU΍$POTUͰม਺એݴ

&4 DMBTTߏจ͕࢖͑Δ

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

&4 Ξϩʔؔ਺

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

DPNQPOFOU

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

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

3FBDU $PNQPOFOUαϯϓϧ

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

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

QSPQTͱTUBUF QSPQTͷαϯϓϧ

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

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

QSPQTͷαϯϓϧ "QQ$PNQPOFOU

QSPQTͱTUBUF QSPQTͷαϯϓϧ

QSPQTͷαϯϓϧ "QQ$PNQPOFOU

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

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

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

TUBUFͷॳظԽΛ͢Δ DPOTUSVDUPSͰ UIJTTUBUF\DPVOU^ TUBUFͷDPVOUΛදࣔ EJW\UIJTTUBUFDPVOU^EJW TUBUFͷ஋Λॻ͖׵͑Δ UIJTTFU4UBUF \DPVOU^
TUBUFΛ࢖ͬͨαϯϓϧ TUBUFͷ͔͍͔ͭͨ

TUBUFΛ࢖ͬͨαϯϓϧ "QQ$PNQPOFOU

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

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

IUUQTRJJUBDPNLBXBDIJJUFNTCGDGFBF

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

3FBDUͱҰॹʹ Α͘ฉ͋͘Ε͜Ε

3FEVY ZBSO #BCFM XFCQBDL
3FBDUͱྑ͘Ұॹʹฉ͋͘Ε͜Ε ঺հ͢ΔϞϊ qPX 5ZQF4DSJQU $44.PEVMFT +FTU

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

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

ZBSOͷΠϯετʔϧ CSFXJOTUBMMZBSO ϓϩδΣΫτ৽ن࡞੒ ZBSOJOJU ύοέʔδ௥Ճ ZBSOBEE<QBDLBHF> ϓϩδΣΫτͷશͯͷґଘؔ܎ͷΠϯετʔϧ ZBSO
3FBDUͱྑ͘Ұॹʹฉ͋͘Ε͜Ε ZBSO

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

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

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

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

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

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

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

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

ษڧํ๏

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

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

ᶃ ެࣜνϡʔτϦΞϧ ᶄ νʔϜͰྠಡձ ᶅ Ұਓ3FBDUKT"EWFOU$BMFOEBS ᶆ Φʔϓϯιʔεʹίϛοτ ᶇ ΦʔϓϯιʔεΛಡΉ
ᶈ ࣮຿Ͱͷ։ൃ ᶉ ࠷৽ٕज़ͷΩϟονΞοϓ ษڧํ๏ ͳʹΛ΍͖͔ͬͯͨ

3FBDUͷ֓ཁΛ͔ͭΈͭͭਐΊΔ αϯϓϧ͚ͩͰͳͪ͘ΐͬͱࣗ෼ͰΞϨϯδɻ 3FEVY΋ಉ࣌ʹΠϯϓοτ͢Δඞཁ͕͋ͬͨͷͰ ಉ͘͡νϡʔτϦΞϧΛ΍ͬͯΈΔ ษڧํ๏ ެࣜνϡʔτϦΞϧ

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

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

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

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

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

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

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

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

·ͱΊ

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

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

3FBDU஥ؒ ืूதͰ͢ʂ

͍ͬ͠ΐʹ ָ͠Έ·͠ΐ͏

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

初心者のためのReact入門

初心者のためのReact入門

More Decks by takepo

Other Decks in Programming

Featured

Transcript