Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
初心者のためのReact入門
takepo
September 25, 2018
Programming
3
4.2k
初心者のためのReact入門
2018/09/25に【サポーターズCoLab勉強会】初心者のためのReact入門 というイベントで登壇させていただいた時の資料です。
takepo
September 25, 2018
Tweet
Share
More Decks by takepo
See All by takepo
作りながら学ぶReactアプリケーション
takepo
1
11k
React×ReduxにおけるTypeScript入門
takepo
10
4.2k
初心者に向けたサンプル付きReact入門と勉強法について
takepo
0
5.3k
React入門 2018
takepo
4
2.5k
リモートワーク+リモートでの新技術のキャッチアップ
takepo
0
79
Other Decks in Programming
See All in Programming
レビュー駆動学習のススメ_StaPy#83
soogie
0
330
SwiftUIで「意図」を伝える / swiftui_intention
uhooi
2
150
10Xの検索を10xしたい
metalunk
2
240
Amazon SageMakerでImagenを動かして猫画像生成してみた
hotoke_neko
0
120
一口目から美味しいReactのスルメ本🦑
taro28
2
700
Git操作編
smt7174
2
260
モデルの定義に基づくバリデーションを実現するためのpydantic入門
daikikatsuragawa
0
120
WindowsコンテナDojo:第6回 Red Hat OpenShift入門
oniak3ibm
PRO
0
180
Rust、何もわからない...#3
estie
0
170
FullStack eXchange, July 2022
brucel
0
200
kintone × LINE Bot で餃子検定Botを作った話
naberina
0
350
Now in Android Overview
aosa4054
1
420
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
47
7.7k
A Modern Web Designer's Workflow
chriscoyier
689
180k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
21
1.4k
Mobile First: as difficult as doing things right
swwweet
213
7.6k
What’s in a name? Adding method to the madness
productmarketing
11
1.6k
jQuery: Nuts, Bolts and Bling
dougneiner
56
6.4k
Intergalactic Javascript Robots from Outer Space
tanoku
260
25k
Code Review Best Practice
trishagee
44
9.8k
Thoughts on Productivity
jonyablonski
44
2.4k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
29
4.4k
The Straight Up "How To Draw Better" Workshop
denniskardys
225
130k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
181
15k
Transcript
ॳ৺ऀͷͨΊͷ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ϥΠϑαΠΫϧ ͡Ίʹ ࣍
3FBDU
'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,✨
&4
3FBDU &4 &$."4DSJQU +BWB4DSJQUͷݴޠ༷ શͯͷϒϥβͰରԠͯ͠ΔΘ͚Ͱͳ͍ #BCFMͰτϥϯεύΠϧ͢Δඞཁ͕͋Δ
&4 ಛ MFUDPOTUͰมએݴ ࠶એݴ࠶ೖෆՄೳͳએݴ͕Ͱ͖ΔͷͰ ೋॏఆٛɾ༧ظͤ͵࠶ೖΛ͛Δ
&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ͱ͔ѻ͑Δ #BCFMXFCQBDLͷϏϧυͰߦ͏ 3FBDUͱྑ͘Ұॹʹฉ͋͘Ε͜Ε 8FCQBDL
+BWBTDSJQUಈతܕ͚ݴޠ ੩తܕνΣοΫΛͯ͘͠Εͯɺ ࣮ߦલʹܕΤϥʔΛݕग़Ͱ͖Δ 6TFSͳͲಠࣗʹܕఆٛͰ͖ΔͷͰ ίʔυ͕ϦʔμϒϧʹͳΔ ઌ಄ʹʮ!qPXʯΛ͚ͭΔ͚ͩ 3FBDUͱྑ͘Ұॹʹฉ͋͘Ε͜Ε GMPX
ϚΠΫϩιϑτ͕ͭͬͨ͘ݴޠ KTʹରͯ͠੩తܕ͚͕Ͱ͖Δ 54KTʹίϯύΠϧ͕ඞཁ 3FBDU/BUJWFUTʹରԠͨ͠Γͱ࠷ۙਓؾ "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