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
Functional TypeScript
naoya
11
4.8k
TypeScript 関数型スタイルでバックエンド開発のリアル
naoya
57
25k
シェルの履歴とイクンリメンタル検索を使う
naoya
7
2.9k
20230227-engineer-type-talk.pdf
naoya
82
37k
関数型プログラミングと型システムのメンタルモデル
naoya
53
66k
TypeScript による GraphQL バックエンド開発
naoya
27
27k
フロントエンドのパラダイムを参考にバックエンド開発を再考する / TypeScript による GraphQL バックエンド開発
naoya
66
23k
「問題から目を背けず取り組む」 一休の開発チームが6年間で学んだこと
naoya
142
57k
一休の現在と、ここまでの道のり
naoya
89
40k
Other Decks in Technology
See All in Technology
事前準備が肝!AI活用のための業務改革
layerx
PRO
1
380
Swift Testingのconfirmationを コードリーディング/Dive into Swift Testing confirmation
laprasdrum
2
260
OR学会2024秋_短期収益と将来のオフ方策評価性能を考慮したクーポン割当方策混合比の決定
recruitengineers
PRO
4
460
【株式会社ELYZA】|GENIAC成果報告会 自社開発モデルプレゼンテーション
elyza
1
280
JEP 480: Structured Concurrency
aya_ebata
0
130
eBPFのこれまでとこれから
yutarohayakawa
10
3.2k
Developer Experienceを向上させる基盤づくりの取り組み事例集
coconala_engineer
0
150
AIを活用した柔軟かつ効率的な社内リソース検索への取り組み
cygames
0
180
「自動テストのプラクティスを効果的に学ぶためのカードゲーム」 ( #sqip2024 )
teyamagu
PRO
2
180
プロダクトエンジニアを支えるための開発生産性向上施策
tsukakei
0
140
忙しい人のためのLangGraph概要まとめ
__ymgc__
1
190
ロリポップ! for Gamersを支えるインフラ/lolipop for gamers infrastructure
takumakume
0
130
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
53
8.9k
Practical Orchestrator
shlominoach
185
10k
A better future with KSS
kneath
235
17k
Faster Mobile Websites
deanohume
304
30k
Optimizing for Happiness
mojombo
375
69k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
363
22k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
29
2.6k
Documentation Writing (for coders)
carmenintech
65
4.3k
GraphQLの誤解/rethinking-graphql
sonatard
65
9.8k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
23
1.7k
For a Future-Friendly Web
brad_frost
174
9.3k
Visualization
eitanlees
142
15k
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Ͱɻ