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
April 25, 2018
Programming
0
5.8k
初心者に向けたサンプル付きReact入門と勉強法について
2018/04/23に【サポーターズ勉強会】React入門というイベントで登壇させていただいた時の資料です。
takepo
April 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
3
4.4k
React入門 2018
takepo
4
2.7k
リモートワーク+リモートでの新技術のキャッチアップ
takepo
0
130
Other Decks in Programming
See All in Programming
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
390
Performance for Conversion! 分散トレーシングでボトルネックを 特定せよ
inetand
0
130
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
marcoroth
0
640
🔨 小さなビルドシステムを作る
momeemt
3
670
AIでLINEスタンプを作ってみた
eycjur
1
230
OSS開発者という働き方
andpad
5
1.7k
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
510
Android 16 × Jetpack Composeで縦書きテキストエディタを作ろう / Vertical Text Editor with Compose on Android 16
cc4966
1
180
Kiroの仕様駆動開発から見えてきたAIコーディングとの正しい付き合い方
clshinji
1
210
アセットのコンパイルについて
ojun9
0
120
時間軸から考えるTerraformを使う理由と留意点
fufuhu
15
4.6k
Namespace and Its Future
tagomoris
6
700
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
Music & Morning Musume
bryan
46
6.8k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Automating Front-end Workflow
addyosmani
1370
200k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Statistics for Hackers
jakevdp
799
220k
Visualization
eitanlees
148
16k
Fireside Chat
paigeccino
39
3.6k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
A designer walks into a library…
pauljervisheath
207
24k
Transcript
3FBDUೖ αϙʔλʔζ$P-BCษڧձ 5BLFTIJNB/BIPLP
ࣗݾհ ϥϯαʔζ-1'ࣄۀ෦ ଔͷ৽ଔͷΤϯδχΞ ࠷ۙ3FBDU $BLF1)1 3BJMTͱࡶ৯ؾຯ ۂ໘σΟεϓϨΠಋೖ✨ िϑϦʔϥϯε࢝Ί·ͨ͠ ࠷ۙࣗ࡞ΩʔϘʔυʹڵຯ͋Γ·͢ 3FBDUྺҎ্ܦͪ·ͨ͠
ౡࡊึࢠ !UBLFQP
-BODFST
None
ϝοηʔδ
ϓϩδΣΫτཧ
QPPL
QPPL ͱͱ8FCͰ࡞͍ͬͯͨ $PSEPWBͷ্ʹͤͯ J04 "OESPJEΞϓϦϦϦʔε ݱࡏ8FC J04 "OESPJEͷ։ൃ·Δͬͱ3FBDUͰɻ
࣍ 3FBDUͱ w 3FBDU w $PNQPOFOU w +49
Α͘ฉ͘͜ΕγϦʔζ ษڧ๏ ·ͱΊ w QSPQTͱTUBUF w $PNQPOFOUϥΠϑαΠΫϧ
3FBDUͱʁ
3FBDUͱʁ w 'BDFCPPLͷΦʔϓϯιʔε w +BWB4DSJQUͰ6*Λ࡞ΔͨΊ͚ͩͷϥΠϒϥϦ w .7$Ͱ͍͏7JFXͷΈʹಛԽ͍ͯ͠Δ w $PNQPOFOUΛͭ͘Δ͚ͩ w
σʔλͷྲྀΕ୯Ұํ w Ծ%0.ͰॲཧΛߦ͏
ར༻͍ͯ͠Δاۀ
$PNQPOFOU ࠶ར༻Մೳͳύʔπ ࣗͰࣗͷঢ়ଶΛཧ جຊతʹ$PNQPOFOUΛ࡞ͬͯΈ߹Θͤͯ ΞϓϦέʔγϣϯΛ࡞͍ͬͯ͘ +49ΛͬͨΓͯ͠هड़
+49 ͜Ε'BDFCPPL +BWB4DSJQUͷߏจதʹ 9.-෩ͷͷΛͦͷ··ॻ͚Δ )5.-ͱࣅ͍ͯΔͷͰ ඇΤϯδχΞͰΘ͔Γ͍͢ʂ
$PNQPOFOUͷαϯϓϧ
+49)5.-ͬΆ͍
QSPQTͱTUBUF QSPQT $PNQPOFOUੜ࣌ʹ͔Β͞ΕΔΦϒδΣΫτ $PNQPOFOU͕ը໘͔Βഉআ͞ΕΔ·Ͱෆมͷ *NNVUBCMFͰ͋Γ֎෦ͱͷΠϯλʔϑΣʔεͷׂ TUBUF ಈతʹΛมԽͤ͞ΒΕΔΦϒδΣΫτ $PNQPOFOUͰอ࣋
QSPQTΛͬͨαϯϓϧ
-JTU*UFN$PNQPOFOU
"QQ$PNQPOFOU
͜Μͳ෩ʹ͔͚·͢
TUBUFΛͬͨαϯϓϧ
ͭ͘Γ ࣮ࡍʹΧϯτͤ͞ΔΛTUBUFͰ࣋ͨͤΔ TUBUFಈతʹΛมԽͤ͞ΒΕΔͷͰ ϘλϯΛԡͨ࣌͠ʹTUBUFͷΛมԽͤ͞Δ
"QQ$PNQPOFOU
$PNQPOFOUͷϥΠϑαΠΫϧ $PNQPOFOUʹϥΠϑαΠΫϧϝιου͕͋Δ ϚϯτΞϯϚϯτ͞ΕΔͱ͖ɺ 1SPQT͕มԽ͢Δͱ͖ͳͲͷλΠϛϯάͰݺΕ Δϝιου "1*Λݺͼ͍ͨ༻్ʹ߹Θͤͯ͑Δ
IUUQTRJJUBDPNLBXBDIJJUFNTCGDGFBF
3FBDUͱҰॹʹ Α͘ฉ͘ίϨ
͜Εͳʹʁ w 3FEVY w ZBSO w #BCFM w XFCQBDL w
qPX w $44.PEVMFT
3FEVYʁ 3FBDU͕ѻ͏TUBUFΛ Ұݩཧ͢ΔͨΊͷϑϨʔϜϫʔΫ ΞϓϦ͕େ͖͘ͳͬͯ $PNQPOFOUಉ͕࢜ґଘ͋͠͏Α͏ʹͳΔͱ TUBUFͷཧΛ͢Δ͜ͱ͕େมʹͳΔ 3FEVYΛ͏͜ͱͰ3FBDUͷ$PNQPOFOUͰ TUBUFΛཧͤͣʹQSPQT͚ͩΛ͏Α͏ʹͰ͖Δ
ZBSOʁ ύοέʔδཧπʔϧ ϑϩϯτͰར༻͢ΔϥΠϒϥϦΛ QBDLBHFKTPOͱ͍͏ϑΝΠϧͰཧɻ 3VCZͰ͍͏CVOEMFS ߴʂ
#BCFMʁ &$."4DSJQUͷτϥϯείϯύΠϥ 3FBDUੜ+4ͩͱ͠ΜͲ͍ͷͰ&4Ͱهड़ ͨͩ͠&4 +49ϒϥβͰಈ͔ͳ͍ɻɻɻ &4ɺ+49&4ʹมͯ͘͠ΕΔ
XFCQBDLʁ ΞηοτΛੜ͢ΔϏϧυπʔϧ ෳͷιʔεΛҰͭʹ·ͱΊΒΕΔ KT͚ͩͰͳ͘DTTͱ͔ѻ͑Δ #BCFMXFCQBDLͷϏϧυͰߦ͏
qPXʁ +BWBTDSJQUಈతܕ͚ݴޠ ੩తܕνΣοΫΛͯ͘͠Εͯɺ ࣮ߦલʹܕΤϥʔΛݕग़Ͱ͖Δ 6TFSͳͲಠࣗʹܕఆٛͰ͖ΔͷͰ ίʔυ͕ϦʔμϒϧʹͳΔ
$44.PEVMFTʁ DTTΛ$PNQPOFOU͝ͱʹ࣋ͨͤΒΕΔπʔϧ Ϗϧυ࣌ʹিಥ͕ى͖ͳ͍Α͏ʹ ໊લ͕ࣗಈੜ͞ΕͯϚοϐϯάͯ͘͠ΕΔ #&.ͷ໋໊نଇͱ͔ߟ͑ͳͯ͘ྑ͍ ίϯϙδγϣϯ͑Δ
͍Ζ͍Ζհ͠·͕ͨ͠ ͱΓ͍͋͑ͣͬͺ͍͋ΔͷͰ ͜Μͳͷ͋ΔΜͩఔͰ࠷ॳɻɻ DSFBUFSFBDUBQQΈͯΈͯ IUUQTHJUIVCDPNGBDFCPPLDSFBUFSFBDU BQQ
͜Ε͚ͩͰ0,✨ OQNJOTUBMMHDSFBUFSFBDUBQQ DSFBUFSFBDUBQQNZ@BQQ DENZ@BQQ OQNTUBSU
ษڧ๏
Θͨ͠ͷ3FBDUϨϕϧ ҰԠͬͱʹͳΓ·͢ɻ ࠷ॳ࢝Ίͨ͜Ζ +BWB4DSJQUࣗମ͋Μ·Γ৮ͬͨ͜ͱͳ͍ ֮͑Δ͜ͱ͍Ζ͍Ζ͋Γ͗ͯ͢Θ͚Θ͔Μͳ͍ ᤨຑൃ⚡
Α͏͘ɻ ·ͩ·ֶͩͿ͜ͱ͍Ζ͍Ζ͋Δ͚Ͳָ͍͠ 3FBDUωλͰϒϩάΛॻ͚ΔΑ͏ʹͳͬͨʂ Φʔϓϯιʔε͕ಡΊΔΑ͏ʹͳͬͨʂ 044׆ಈ࢝Ίͯ3FBDUͷϥΠϒϥϦ࡞ͨ͠ΓͰ ͖ΔΑ͏ʹͳͬͨʂ ͯϒ4/4Ͱ ٕज़ωλΛνΣοΫ͢Δश׳͕͍ͭͨʂ
ษڧ๏ ᶃ ެࣜνϡʔτϦΞϧ ᶄ νʔϜͰྠಡձ ᶅ Ұਓ3FBDUKT"EWFOU$BMFOEBS ᶆ Φʔϓϯιʔεʹίϛοτ ᶇ
ΦʔϓϯιʔεΛಡΉ ᶈ ࣮Ͱͷ։ൃ ᶉ ࠷৽ٕज़ͷΩϟονΞοϓ
·ͣެࣜνϡʔτϦΞϧ 3FBDUͷ֓ཁΛ͔ͭΈͭͭਐΊΔ αϯϓϧ͚ͩͰͳͪ͘ΐͬͱࣗͰΞϨϯδɻ 3FEVYಉ࣌ʹΠϯϓοτ͢Δඞཁ͕͋ͬͨͷͰ ಉ͘͡νϡʔτϦΞϧΛͬͯΈΔ
νʔϜͰྠಡձ ։ൃνʔϜΈΜͳ΄΅3FBDUॳ৺ऀ 0`3FJMMZͷೖ3FBDUΛ༻ͯ͠ྠಡձ ղઆ͢ΔਓΛճ͠ͳ͕Βຖؒ νʔϜؒͷࣝڞ༗ઢ߹ΘͤΛͨ͠
Ұਓ3FBDUKT"EWFOU$BMFOEBS ˏLPCB͞ΜʹΑΔ2JJUBͷΞυϕϯτΧϨϯμʔ جຊతͳͱ͜Ζ͕݁ʹॻ͔Ε͍ͯΔ ಡΉ͚ͩͰͳ͘ɺ٧·ͬͨͱ͖ʹௐΔͷʹศར ಛʹϥΠϑαΠΫϧͷͱ͜Ζ ৗʹݟ͑Δͱ͜Ζʹஔ͍͓ͯ͘ͱΑ͍͔
Φʔϓϯιʔεʹίϛοτ ։ൃͨ͠ιʔεΛΦʔϓϯιʔεϥΠϒϥϦԽ ະϚʔδ͕ͩػೳՃͷίϛοτΛࢼΈͨ ֎͔Βίʔυ͕ݟΒΕΔɺΘΕΔ͔͠Εͳ͍ ۓுײΛ࣋ͬͯͰ͖ͯྑ͔ͬͨ
ΦʔϓϯιʔεΛಡΉ ΦʔϓϯιʔεԽ͞Ε͍ͯΔίʔυΛಡΉ ࣮ࡍʹ͍ͬͯΔϥΠϒϥϦΛݟΔͱಈ͖Θ͔ Δ͠ྑ͍ ࠷ॳܰΊͷͷελʔ͕ଟ͍ਓؾͷͷΛ ͓͢͢Ί.BUFSJBM6*
࣮Ͱͷ։ൃ ݁ہ࣮ફ͕Ұ൪ ࣮ʹݶΒͣखΛಈ͔ͯ͠ݟΔ͜ͱ͕େࣄ ϨϏϡʔͰࢦఠΛΒ͑Δ ଞͷਓͷίʔυΈΕΔ ͭ·͍ͮͨ࣌ʹάάΔɺڭ͑ͯΒ͏
࠷৽ใͷΩϟονΞοϓ ࠓ·ͰଞݴޠֶͿ࣌ຊͱ͔͕΄ͱΜͲ ͰϑϩϯτपΓͷਐԽͷεϐʔυ͕ૣ͍ͷͰ ৗʹΩϟονΞοϓ͢Δඞཁ͕͋Δ ͯͿɺRJJUBɺ4/4ΛຖνΣοΫ
ϥϯαʔζΤϯδχΞϒϩά ։ൃϝϯόʔ͕ॻ͍ͨϒϩάެ։த w ϥϯαʔζྲྀ3FBDUKTSFEVYΞϓϦ։ൃೖ w 3FBDU3FEVYΛ༻͍ͨ41"৽نαʔϏεΛӡ ༻ͯ͠ಘͨݟͱ࣮ྫ w +BWB4DSJQUॳ৺ऀͷࢲ͕ɺ3FBDUº3FEVYʹΑΔ 41"։ൃͷҰһʹͳΔ·Ͱ
ͳͲͳͲɻ
·ͱΊ
·ͱΊ 3FBDUෑډߴͦ͏ʹࢥ͑Δ͚Ͳݪཧ؆୯ $PNQPOFOUͷΈ߹ΘͤͳͷͰɺ QSPQTͱTUBUFΛ͓͑͞Ε࡞ΕΔʂ ·ͣެࣜνϡʔτϦΞϧ͔Βɻ ͋ͱͨΓલ͚ͩͲ࣮ફ͕େࣄ ࠓ͏ใଟ͍ͷͰେৎʂ
͍͞͝ʹ !UBLFQP ࠓճͷొஃࢿྉΖΖ UXJUUFS͔Βྲྀͦ͏ͱࢥ͍ͬͯ·͢ جຊɺ3FBDUΛ͡Ίͱͯ͠ 8FC·ΘΓͷ࠷৽هࣄ͍Ζ͍ΖγΣ Ξͯͭ͠Ϳ͍ͯ·͢ʂ ੋඇUXJUUFSϑΥϩʔ͍ͯͩ͘͠͞ ࣭ؾܰʹͲ͏ͧʙʂ
Ұॹʹָ͠Έ·͠ΐ͏
None
ࢀߟจݙ 3FBDUKTͱ IUUQRJJUBDPNLPCBJUFNTEDBGBCCG 3FEVYೖʲμΠδΣετ൛ʳͰཧղ͢Δ3FEVYͷجૅ IUUQRJJUBDPNLJJUBJUFNTBGCDGC