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

by takepo

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

-BODFST

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

ϝοηʔδ

Slide 6

Slide 6 text

ϓϩδΣΫτ؅ཧ

Slide 7

Slide 7 text

QPPL

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

໨࣍ 3FBDUͱ͸ w 3FBDU w $PNQPOFOU w +49 Α͘ฉ͘͜ΕγϦʔζ ษڧ๏ ·ͱΊ w QSPQTͱTUBUF w $PNQPOFOUϥΠϑαΠΫϧ

Slide 10

Slide 10 text

3FBDUͱ͸ʁ

Slide 11

Slide 11 text

3FBDUͱ͸ʁ w 'BDFCPPL੡ͷΦʔϓϯιʔε w +BWB4DSJQUͰ6*Λ࡞ΔͨΊ͚ͩͷϥΠϒϥϦ w .7$Ͱ͍͏7JFXͷΈʹಛԽ͍ͯ͠Δ w $PNQPOFOUΛͭ͘Δ͚ͩ w σʔλͷྲྀΕ͸୯Ұํ޲ w Ծ૝%0.ͰॲཧΛߦ͏

Slide 12

Slide 12 text

ར༻͍ͯ͠Δاۀ

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

$PNQPOFOUͷαϯϓϧ

Slide 16

Slide 16 text

+49͸)5.-ͬΆ͍

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

QSPQTΛ࢖ͬͨαϯϓϧ

Slide 19

Slide 19 text

-JTU*UFN$PNQPOFOU

Slide 20

Slide 20 text

"QQ$PNQPOFOU

Slide 21

Slide 21 text

͜Μͳ෩ʹ΋͔͚·͢

Slide 22

Slide 22 text

TUBUFΛ࢖ͬͨαϯϓϧ

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

"QQ$PNQPOFOU

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

IUUQTRJJUBDPNLBXBDIJJUFNTCGDGFBF

Slide 27

Slide 27 text

3FBDUͱҰॹʹ Α͘ฉ͘ίϨ͸

Slide 28

Slide 28 text

͜Εͳʹʁ w 3FEVY w ZBSO w #BCFM w XFCQBDL w qPX w $44.PEVMFT

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

ษڧ๏

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

·ͱΊ

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

Ұॹʹָ͠Έ·͠ΐ͏

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

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