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入門 2018
Search
takepo
January 25, 2018
Technology
2.8k
4
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
React入門 2018
takepo
January 25, 2018
More Decks by takepo
See All by takepo
作りながら学ぶReactアプリケーション
takepo
1
12k
React×ReduxにおけるTypeScript入門
takepo
10
5k
初心者のためのReact入門
takepo
3
4.4k
初心者に向けたサンプル付きReact入門と勉強法について
takepo
0
5.9k
リモートワーク+リモートでの新技術のキャッチアップ
takepo
0
140
Other Decks in Technology
See All in Technology
キャリアLT会#3
beli68
2
270
「守りたい体験」を渡すだけで E2E を生成させられるようになった話
hinac0
2
1.1k
reFACToring
moznion
0
590
Vポイント分析基盤におけるデータモデリング20年史
taromatsui_cccmkhd
4
770
Claude CodeとAmazon Bedrock AgentCoreでつくる、自分だけのAIアシスタント
ymae
0
110
なぜ、あなたのAPIは使われないのか? AX時代の設計原則、ガードレール、運用体制
yokawasa
1
230
A Bag-of-Documents Model for Query Specificity
dtunkelang
0
100
AI研修(Day1)【MIXI 26新卒技術研修】
mixi_engineers
PRO
1
1.2k
AIコード生成×サプライチェーン攻撃 — PHPが直面する“二重の信頼問題
shinyasaita
0
490
Webアプリ認証の全体像 / The Big Picture of Web App Authentication
kitano_yuichi
1
450
AWS環境のセキュリティ不安を解消した企業事例 ~よくある課題と対策を一挙公開~
asanoharuki
0
190
複数プロダクトで進めるAI機能実装 ── 実践から得たリアルな学びとロードマップ実現への挑戦 / AICon2026_yanari
rakus_dev
1
300
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
97
6.7k
How to Grow Your eCommerce with AI & Automation
katarinadahlin
PRO
1
230
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
helenjbeal
1
250
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
23k
SEO Brein meetup: CTRL+C is not how to scale international SEO
lindahogenes
1
2.8k
How to Think Like a Performance Engineer
csswizardry
28
2.7k
Testing 201, or: Great Expectations
jmmastey
46
8.2k
Building a Scalable Design System with Sketch
lauravandoore
463
34k
VelocityConf: Rendering Performance Case Studies
addyosmani
333
25k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
47
8.2k
Primal Persuasion: How to Engage the Brain for Learning That Lasts
tmiket
0
390
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
baasie
0
620
Transcript
3FBDUೖ 5BLFTIJNB/BIPLP
ࣗݾհ ϥϯαʔζϓϩμΫτ։ൃ෦ ଔͷ৽ଔ ৽نࣄۀαʔϏεQPPLͷ ϑϩϯτΤϯυΤϯδχΞΛ୲ ࠷ۙۂ໘σΟεϓϨΠಋೖ✨ िϑϦʔϥϯε࢝Ί·ͨ͠ 3FBDUྺܦͪ·ͨ͠ ౡࡊึࢠ !UBLFQP
-BODFST
None
ϝοηʔδ
ϓϩδΣΫτཧ
QPPL
QPPL ͱͱ8FCͰ࡞͍ͬͯͨ $PSEPWBͷ্ʹͤͯ J04 "OESPJEΞϓϦϦϦʔε ݱࡏ8FC J04 "OESPJEͷ։ൃ·Δͬͱɻ
࣍ 3FBDUͱ w 3FBDU w $PNQPOFOU w +49
Α͘ฉ͘͜ΕγϦʔζ ษڧ๏ ·ͱΊ w QSPQTͱTUBUF w $PNQPOFOUϥΠϑαΠΫϧ
3FBDUͱʁ
3FBDUͱʁ 'BDFCPPLͷΦʔϓϯιʔε +BWB4DSJQUͰ6*Λ࡞ΔͨΊ͚ͩͷϥΠϒϥϦ 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
ษڧ๏
Θͨ͠ͷ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Λ͓͑͞Ε࡞ΕΔʂ ·ͣެࣜνϡʔτϦΞϧ͔Βɻ ͋ͱͨΓલ͚ͩͲ࣮ફ͕େࣄ ࠓ͏ใଟ͍ͷͰେৎʂ
3FBDUؒ ืूதͰ͢ʂ
Ұॹʹָ͠Έ·͠ΐ͏
None
ࢀߟจݙ 3FBDUKTͱ IUUQRJJUBDPNLPCBJUFNTEDBGBCCG 3FEVYೖʲμΠδΣετ൛ʳͰཧղ͢Δ3FEVYͷجૅ IUUQRJJUBDPNLJJUBJUFNTBGCDGC