Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
初心者のためのReact入門
Search
takepo
September 25, 2018
Programming
3
4.3k
初心者のためのReact入門
2018/09/25に【サポーターズCoLab勉強会】初心者のためのReact入門 というイベントで登壇させていただいた時の資料です。
takepo
September 25, 2018
Tweet
Share
More Decks by takepo
See All by takepo
作りながら学ぶReactアプリケーション
takepo
1
12k
React×ReduxにおけるTypeScript入門
takepo
10
4.7k
初心者に向けたサンプル付きReact入門と勉強法について
takepo
0
5.7k
React入門 2018
takepo
4
2.7k
リモートワーク+リモートでの新技術のキャッチアップ
takepo
0
120
Other Decks in Programming
See All in Programming
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
110
Hotwire or React? ~アフタートーク・本編に含めなかった話~ / Hotwire or React? after talk
harunatsujita
1
120
Amazon Qを使ってIaCを触ろう!
maruto
0
400
Generative AI Use Cases JP (略称:GenU)奮闘記
hideg
1
290
Creating a Free Video Ad Network on the Edge
mizoguchicoji
0
120
距離関数を極める! / SESSIONS 2024
gam0022
0
280
ActiveSupport::Notifications supporting instrumentation of Rails apps with OpenTelemetry
ymtdzzz
1
230
macOS でできる リアルタイム動画像処理
biacco42
9
2.4k
シールドクラスをはじめよう / Getting Started with Sealed Classes
mackey0225
4
640
Contemporary Test Cases
maaretp
0
130
Remix on Hono on Cloudflare Workers
yusukebe
1
290
【Kaigi on Rails 2024】YOUTRUST スポンサーLT
krpk1900
1
330
Featured
See All Featured
Gamification - CAS2011
davidbonilla
80
5k
Music & Morning Musume
bryan
46
6.2k
Done Done
chrislema
181
16k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Producing Creativity
orderedlist
PRO
341
39k
Fashionably flexible responsive web design (full day workshop)
malarkey
405
65k
KATA
mclloyd
29
14k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Code Review Best Practice
trishagee
64
17k
Art, The Web, and Tiny UX
lynnandtonic
297
20k
Designing the Hi-DPI Web
ddemaree
280
34k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
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