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.4k
初心者のための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.8k
初心者に向けたサンプル付きReact入門と勉強法について
takepo
0
5.8k
React入門 2018
takepo
4
2.7k
リモートワーク+リモートでの新技術のキャッチアップ
takepo
0
130
Other Decks in Programming
See All in Programming
書き捨てではなく継続開発可能なコードをAIコーディングエージェントで書くために意識していること
shuyakinjo
0
190
No Install CMS戦略 〜 5年先を見据えたフロントエンド開発を考える / no_install_cms
rdlabo
0
430
PHPUnitの限界をPlaywrightで補完するテストアプローチ
yuzneri
0
370
Dart 参戦!!静的型付き言語界の隠れた実力者
kno3a87
0
160
Streamlitで実現できるようになったこと、実現してくれたこと
ayumu_yamaguchi
2
270
DataformでPythonする / dataform-de-python
snhryt
0
150
リッチエディターを安全に開発・運用するために
unachang113
1
350
バイブスあるコーディングで ~PHP~ 便利ツールをつくるプラクティス
uzulla
1
320
オホーツクでコミュニティを立ち上げた理由―地方出身プログラマの挑戦 / TechRAMEN 2025 Conference
lemonade_37
1
430
GUI操作LLMの最新動向: UI-TARSと関連論文紹介
kfujikawa
0
340
バイブコーディングの正体——AIエージェントはソフトウェア開発を変えるか?
stakaya
5
720
DynamoDBは怖くない!〜テーブル設計の勘所とテスト戦略〜
hyamazaki
0
180
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
70
11k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Bash Introduction
62gerente
614
210k
Git: the NoSQL Database
bkeepers
PRO
431
65k
Automating Front-end Workflow
addyosmani
1370
200k
How STYLIGHT went responsive
nonsquared
100
5.7k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
1k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
750
Adopting Sorbet at Scale
ufuk
77
9.5k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
870
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