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.5k
初心者に向けたサンプル付きReact入門と勉強法について
takepo
0
5.6k
React入門 2018
takepo
4
2.6k
リモートワーク+リモートでの新技術のキャッチアップ
takepo
0
100
Other Decks in Programming
See All in Programming
Deno に Web 標準 API を実装する / Implementing Web Standard API to Deno
petamoriken
0
350
オブジェクト指向は必要なのか / Is object-oriented needed?
kishida
27
19k
PHP 8.3で追加されたjson_validate()を徹底的に深掘りしてみよう
mashirou1234
1
720
htmx is fun!
codehex
2
190
ONE WEDGE_Company_Information
1wedge
0
170
Laravel標準バリデーションでできること
hmb_ok
2
360
C# 大統一理論推進委員会 会員のための Unity Package Manager プロジェクト構成案
monry
PRO
0
580
15分間でふんわり理解するDocker @ Matsuriba MAX
ukwhatn
PRO
1
340
RubyVM を PHP で実装する 〜Hello World を出力するまで〜
memory1994
PRO
1
490
DocC Tutorial と TCA におけるテスト機能の紹介
kalupas226
1
330
品質が高いコードって何?Rev2.1
ickx
1
490
Learning PHP and Static Analysis with PHP Parser
inouehi
1
250
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
781
250k
KATA
mclloyd
14
11k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
A better future with KSS
kneath
230
16k
Keith and Marios Guide to Fast Websites
keithpitt
407
22k
Designing with Data
zakiwarfel
94
4.8k
Optimizing for Happiness
mojombo
369
69k
How to name files
jennybc
62
92k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
1
1.2k
Optimising Largest Contentful Paint
csswizardry
7
2.3k
Art, The Web, and Tiny UX
lynnandtonic
288
19k
[RailsConf 2023] Rails as a piece of cake
palkan
21
3.8k
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