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
型で語るカタ
irof
2
890
新しいモバイルアプリ勉強会(仮)について
uetyo
1
240
[SRE NEXT] 複雑なシステムにおけるUser Journey SLOの導入
yakenji
1
860
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
1
260
MCP連携で加速するAI駆動開発/mcp integration accelerates ai-driven-development
bpstudy
0
210
コーディングエージェント概観(2025/07)
itsuki_t88
1
470
kiroでゲームを作ってみた
iriikeita
0
110
AI Ramen Fight
yusukebe
0
120
Amazon Q CLI開発で学んだAIコーディングツールの使い方
licux
3
140
Google I/O Extended Incheon 2025 ~ What's new in Android development tools
pluu
1
210
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
21
9.8k
LLMは麻雀を知らなすぎるから俺が教育してやる
po3rin
3
1.6k
Featured
See All Featured
BBQ
matthewcrist
89
9.8k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Being A Developer After 40
akosma
90
590k
Unsuck your backbone
ammeep
671
58k
Producing Creativity
orderedlist
PRO
346
40k
Designing for Performance
lara
610
69k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
A Modern Web Designer's Workflow
chriscoyier
695
190k
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