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
20
6.5k
Functional TypeScript
naoya
15
6.4k
TypeScript 関数型スタイルでバックエンド開発のリアル
naoya
72
36k
シェルの履歴とイクンリメンタル検索を使う
naoya
16
6.3k
20230227-engineer-type-talk.pdf
naoya
90
78k
関数型プログラミングと型システムのメンタルモデル
naoya
62
110k
TypeScript による GraphQL バックエンド開発
naoya
29
36k
フロントエンドのパラダイムを参考にバックエンド開発を再考する / TypeScript による GraphQL バックエンド開発
naoya
67
24k
「問題から目を背けず取り組む」 一休の開発チームが6年間で学んだこと
naoya
144
60k
Other Decks in Technology
See All in Technology
多様な事業ドメインのクリエイターへ 価値を届けるための営みについて
massyuu
1
470
M5製品で作るポン置きセルラー対応カメラ
sayacom
0
170
Geospatialの世界最前線を探る [2025年版]
dayjournal
0
160
関係性が駆動するアジャイル──GPTに人格を与えたら、対話を通してふりかえりを習慣化できた話
mhlyc
0
130
許しとアジャイル
jnuank
1
140
やる気のない自分との向き合い方/How to Deal with Your Unmotivated Self
sanogemaru
0
430
From Prompt to Product @ How to Web 2025, Bucharest, Romania
janwerner
0
120
AI駆動開発を推進するためにサービス開発チームで 取り組んでいること
noayaoshiro
0
230
SwiftUIのGeometryReaderとScrollViewを基礎から応用まで学び直す:設計と活用事例
fumiyasac0921
0
150
VCC 2025 Write-up
bata_24
0
190
[Keynote] What do you need to know about DevEx in 2025
salaboy
0
110
10年の共創が示す、これからの開発者と企業の関係 ~ Crossroad
soracom
PRO
1
640
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
331
21k
Navigating Team Friction
lara
189
15k
Building an army of robots
kneath
306
46k
Statistics for Hackers
jakevdp
799
220k
It's Worth the Effort
3n
187
28k
Gamification - CAS2011
davidbonilla
81
5.5k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Designing for humans not robots
tammielis
254
26k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
970
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Ͱɻ