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
19
6.1k
Functional TypeScript
naoya
15
6.3k
TypeScript 関数型スタイルでバックエンド開発のリアル
naoya
72
35k
シェルの履歴とイクンリメンタル検索を使う
naoya
16
5.9k
20230227-engineer-type-talk.pdf
naoya
90
76k
関数型プログラミングと型システムのメンタルモデル
naoya
62
110k
TypeScript による GraphQL バックエンド開発
naoya
29
35k
フロントエンドのパラダイムを参考にバックエンド開発を再考する / TypeScript による GraphQL バックエンド開発
naoya
67
24k
「問題から目を背けず取り組む」 一休の開発チームが6年間で学んだこと
naoya
144
60k
Other Decks in Technology
See All in Technology
microCMS 最新リリース情報(microCMS Meetup 2025)
microcms
0
170
アジャイルテストで高品質のスプリントレビューを
takesection
0
120
モダンな現場と従来型の組織——そこに生じる "不整合" を解消してこそチームがパフォーマンスを発揮できる / Team-oriented Organization Design 20250825
mtx2s
6
870
夢の印税生活 / Life on Royalties
tmtms
0
290
第4回 関東Kaggler会 [Training LLMs with Limited VRAM]
tascj
12
1.9k
DeNA での思い出 / Memories at DeNA
orgachem
PRO
3
1.7k
現場が抱える様々な問題は “組織設計上” の問題によって生じていることがある / Team-oriented Organization Design 20250827
mtx2s
6
1.9k
制約理論(ToC)入門
recruitengineers
PRO
7
2.4k
小さなチーム 大きな仕事 - 個人開発でAIをフル活用する
himaratsu
0
130
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
30k
AIとTDDによるNext.js「隙間ツール」開発の実践
makotot
6
740
人と組織に偏重したEMへのアンチテーゼ──なぜ、EMに設計力が必要なのか/An antithesis to the overemphasis of people and organizations in EM
dskst
6
650
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.5k
Designing for humans not robots
tammielis
253
25k
Bash Introduction
62gerente
614
210k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Faster Mobile Websites
deanohume
309
31k
4 Signs Your Business is Dying
shpigford
184
22k
How to Ace a Technical Interview
jacobian
279
23k
A Tale of Four Properties
chriscoyier
160
23k
Designing Experiences People Love
moore
142
24k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Agile that works and the tools we love
rasmusluckow
329
21k
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Ͱɻ