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
Naoya Ito
April 24, 2015
Technology
81
17k
React概論
React meetup #1 での発表資料
Naoya Ito
April 24, 2015
Tweet
Share
More Decks by Naoya Ito
See All by Naoya Ito
Haskell でアルゴリズムを抽象化する / 関数型言語で競技プログラミング
naoya
17
4.9k
Functional TypeScript
naoya
15
6.2k
TypeScript 関数型スタイルでバックエンド開発のリアル
naoya
71
34k
シェルの履歴とイクンリメンタル検索を使う
naoya
8
3.2k
20230227-engineer-type-talk.pdf
naoya
89
75k
関数型プログラミングと型システムのメンタルモデル
naoya
62
100k
TypeScript による GraphQL バックエンド開発
naoya
28
35k
フロントエンドのパラダイムを参考にバックエンド開発を再考する / TypeScript による GraphQL バックエンド開発
naoya
67
24k
「問題から目を背けず取り組む」 一休の開発チームが6年間で学んだこと
naoya
144
59k
Other Decks in Technology
See All in Technology
強化されたAmazon Location Serviceによる新機能と開発者体験
dayjournal
2
210
Wasm元年
askua
0
140
rubygem開発で鍛える設計力
joker1007
2
200
mrubyと micro-ROSが繋ぐロボットの世界
kishima
2
290
20250625 Snowflake Summit 2025活用事例 レポート / Nowcast Snowflake Summit 2025 Case Study Report
kkuv
1
310
How Community Opened Global Doors
hiroramos4
PRO
1
120
AWS アーキテクチャ作図入門/aws-architecture-diagram-101
ma2shita
29
11k
5min GuardDuty Extended Threat Detection EKS
takakuni
0
140
Welcome to the LLM Club
koic
0
170
Microsoft Build 2025 技術/製品動向 for Microsoft Startup Tech Community
torumakabe
2
270
HiMoR: Monocular Deformable Gaussian Reconstruction with Hierarchical Motion Representation
spatial_ai_network
0
110
Model Mondays S2E02: Model Context Protocol
nitya
0
220
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
134
9.3k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Optimizing for Happiness
mojombo
379
70k
Why You Should Never Use an ORM
jnunemaker
PRO
57
9.4k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.3k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Music & Morning Musume
bryan
46
6.6k
Being A Developer After 40
akosma
90
590k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Transcript
3FBDU֓ /BPZB*UP ,BJ[FO1MBUGPSN *OD 3FBDUKTNFFUVQ
3FBDUهࣄॻ͖·ͨ͠
ޙฤӶҙࣥච தͰ͢
3FBDU
3FBDU • 'BDFCPPL • 1)1ϑϨʔϜϫʔΫͷ9)1ͷҠ২ͱͯ͠։ൃ ͞Εͨͷ͕͖͔͚ͬ – 9)1ŋŋŋ͘Β͍ •
)5.-ͷதʹ1)1ίʔυΛຒΊࠐΉͷͰͳ͘1)1ͷ தʹ9.-GSBHNFOUTΛϦςϥϧͰॻ͚ΔΑ͏ʹͨ͠ MJLF+49 • ಠࣗλάΛఆٛՄೳ㱺SFVTBCMFDPNQPOFOUT
3FBDUͱ • 6*։ൃ༻ͷ+BWB4DSJQUϥΠϒϥϦ • 3FBDU͕ఏڙ͢Δͷ7JFXͷΈ • *UTHPBMJTUPCFTJNQMF EFDMBSBUJWFBOE DPNQPTBCMF XJLJQFEJB
3FBDU%FWFMPQFS5PPMT Ͱ'BDFCPPLΛݟΔͱɺ ͔֬ʹϓϩμΫγϣϯͰ ΘΕ͍ͯΔ
ൃ • 1)1ͰຖճϖʔδΛॻ͖͑ͯͨɻ؆୯ͩͬ ͨ • +BWB4DSJQUͰ6*։ൃ͢ΔΑ͏ʹͳͬͯ %0.ૢ࡞Ͱෳࡶʹͳͬͨ • 9)1Λ+BWB4DSJQUʹҠ২ͯ͠ɺಉ͡ύϥμ ΠϜͰ։ൃͰ͖ͳ͍͔
• ैདྷͱ·ͬͨ͘ҟͳΔํ๏Ͱ%0.Λѻ͏ • खಈͰ%0.Λߋ৽ͯ͠ঢ়ଶΛཧ͢Δͱ͍ͬͨچଶґ વͱͨ͠։ൃํ๏εέʔϥϏϦςΟͷͰྼ͍ͬͯΔ • ϢʔβʔΠϯλϑΣʔεΛΑΓએݴతʹهड़Ͱ͖Δɻͦ ͯ͠Ծ%0.ʹΑΓ%0.ͷߋ৽࠷খʹ͑ΒΕΔ
Ͳ͏͍͏͜ͱͩ
˺αʔόʔαΠυͰॻ͚Δ • 7JFXৗʹશߋ৽ – Ϟσϧ͕ߋ৽͞ΕͨΒ7JFXΛશ෦ߋ৽ – 7JFXΛߋ৽͔ͨͬͨ͠Βશ෦ϨϯμϦϯά ͠ͳ͓͢ – ߽తϓϩάϥϛϯά • 7JFXએݴతʹఆٛ )5.-ͩ͠
ͭ·Γ
ैདྷͷΓํ ໋ྩతͳ%0.ૢ ࡞ίʔυ܈
ैདྷͷख๏ͷ͠͞ • %0.ૢ࡞ͷ͠͞ – %0.͕ঢ়ଶΛ͍࣋ͬͯΔ – άϩʔόϧ – ඇಉظ ͍ͭɺͲ͔͜Βॻ͖ ͑ΒΕΔ͔Θ͔Β ͳ͍ঢ়ଶΛؒҧ͍ͳ ͘ཧ͠ͳ͚Εͳ
Βͳ͍
3FBDUͰ
7JFXએݴతʹ ఆٛ TFU4UBUF ͢Δͱ SFOEFS Ͱ7JFX͕ ·Δ͝ͱߋ৽
σʔλ͕มΘͬͨΒ 7JFXશߋ৽ αʔόʔαΠυͱಉ͡ߟ͑ํ
4UBUFͱ+49 • 4UBUF – มԽ͢Δ ঢ়ଶ Λѻ͏ػߏ – ํσʔλόΠϯσΟϯά –
setState()Ͱม͑Δͱɺ7JFXͷ࠶ඳը͕Δ • +49 – ϦςϥϧͰ9.-Ά͍ͷΛॻ͚Δ – એݴతͳهड़ ݫີʹ+49ͷ͓͔͛Ͱએݴ తɺͱ͍͏Θ͚Ͱͳ͍Ͱ͢ɻ +49ඞਢͰͳ͍
શ෦ؙ͝ͱߋ৽Ͱɺޮ͕ѱ͍ ͦ͜Ͱ7JSUVBM%0.
7JSUVBM%0. • 3FBDUͷόοΫΤϯυʹ͋Δ %0.ߏΛநԽͨ͠σʔλ ߏ • σʔλϞσϧͷঢ়ଶมԽʹ߹Θ ͤͯ7JSUVBM%0.ͷલޙͷ EJ⒎Λࢉग़ •
ੜ%0.࠶ඳըΛࠩͷ͋ͬͨ Օॴ͚ͩߦ͏ source: React’s diff algorithm h4p://calendar.perfplanet.com/2013/diff/
3FBDUͷ %0.ͷߋ৽ ΠϕϯτͷԠ )551ϦΫΤετ "KBY ɺϧʔ ςΟϯάɺϞσϧɺӬଓσʔλͳ Ͳײ͠ͳ͍ɻଞͷͷͬͯ Ͷ
ॏཁͳ͜ͱ • αʔόʔαΠυͰ͍͚Δ – 4UBUFʹΑΔσʔλόΠϯσΟϯάɺએݴతͳ7JFXߏங +49 ɺ7JSUVBM%0. • ίϯϙʔωϯτࢦ –
%0.ͷ࡞༻ΛίϯϙʔωϯτʹہॴԽ • σʔλϑϩʔ͕໌֬ – εςʔτϨείϯϙʔωϯτ – ίϯϙʔωϯτͷ*'1SPQTͱ4UBUF ͜ͷลΛҙࣝͤͣʹ ͍ͬͯͯॴΛ ׆͔ͤͳ͍
5PEP"QQίϯϙʔωϯτ 5PEP*OQVUίϯϙʔωϯτͱ 5PEP-JTUίϯϙʔωϯτͰ ߏ $PNQPTJUJPO
TodoApp <TodoInput /> <TodoList /> ίϯϙʔωϯ τ+49Ͱ ࢀর
࣮VMMJ 3FBDUίϯϙʔ ωϯτ
TodoApp TodoInput TodoList input ul
li todos={this.state.todos} onAdd={this.onAdd} ίϯϙʔωϯτͷ ͷड͚͠ 1SPQT ଐੑ ͕*'
ίϯϙʔωϯτԽ Πϕϯτೖग़ྗɺͦ ͷίϯϙʔωϯτΫϥε ʹہॴԽ͞ΕΔ
TodoApp TodoInput TodoList State σʔλϑϩʔ 4UBUFʹ࣋ͨͤͯɺ
ࢠʹ1SPQTͰ͢ɻ 1SPQTෆมʹ͠ɺࢠ 4UBUFΛ࣋ͨͳ͍ε ςʔτϨείϯϙʔωϯ τ
ͭ·Γ • γϯϓϧͳύϥμΠϜͰॻ͚Δ – αʔόʔαΠυ – εςʔτϨεঢ়ଶΛؾʹ͠ͳ͍͍ͯ͘ • σʔλϑϩʔ͕໌֬ͳͷͰ࣮Օॴʹ໎͍͕গ ͳ͍
• ͦͷίϯϙʔωϯτʹ·ͭΘΔίʔυͦͷί ϯϙʔωϯτʹ͋ΔͷͰݟ௨͕͠ྑ͍
ੜ࢈ੑΑΓ৴པੑ • ੜ࢈ੑΛߴΊΔϥΠϒϥϦͱ͍͏ΑΓ • ՄಡੑɺอकੑͳͲظతͳ৴པੑʹॏ ͖Λஔ͍͍ͯΔ ίʔυॻ࣌ؒ͘ΑΓಡ Ή࣌ؒͷํ͕͍ͩΖ CZ'BDFCPPL
'"2 • +49ϏϧυͲ͏͢Δͷ – τϥϯεύΠϥ͏ SFBDUUPPMT #SPXTFSJGZ #BCFMͳͲ •
K2VFSZซ༻Ͱ͖Δ – Ͱ͖ΔͰ͖Δ͚Ͳ%0.ૢ࡞ύϥμΠϜ͕ҧ͏ͷͰɺΑ͘ Θ͔Μͳ͍ͰΔ͖Ͱͳ͍ BKBYͱ͔ߏΘͳ͍ • ϦΞΫςΟϒϓϩάϥϛϯά 31 ͳͷ – σʔλϑϩʔʹணએݴత͋ͨΓ͕ʮϦΞΫςΟϒʯ – ͨͩ͠ʮϦΞΫςΟϒʯͷݴ༿ͷҙຯ͕͗͢ΔͷͰཁҙ • 3FBDU͚ͩͰ31ΛѲ͠Α͏ͱ͢Δͱཕɺ͔ • 'VODUJPOBM3FBDUJWF1SPHSBNNJOHํ໘Ͳ͏ͧ
͓·͚*NNVUBCMFKT • GBDFCPPLJNNVUBCMFKT • *NNVUBCMFͳσʔλߏΛఏڙ͢ΔϥΠϒϥ Ϧ – var map2 =
map1.set('key', value); – ඇഁյతʹૢ࡞Ͱ͖Δσʔλߏ – -JTU .BQ 4FU 4FR • 4UBUFͰѻ͏σʔλߏ༻ʹ͏ͱḿΔ
3FBDU໋ྩతˠએݴత • ໋ྩతͰ͋ͬͨ7JFXͷΈཱͯ %0.ૢ࡞ Λɺ એݴతͳύϥμΠϜʹ • ʮσʔλϞσϧʹมߋ͕͋ͬͨΒ%0.Λؙ͝ ͱߋ৽ʯ –
ඇޮͳ෦7JSUVBM%0.͕ղܾ ϑϩϯτΤϯυ6*։ൃΛɺ αʔόʔαΠυͱಉ͡ ߽తϓϩάϥϛϯάελ Πϧʹ͢
13࠾༻ͯ͠·͢ ʮ,BJ[FO࠾༻ʯͰݕࡧɻڵ ຯ͋Δ͚ͩͰՄɻͦͷ ߹8BOEUFEMZͰɻ