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
18
5.9k
Functional TypeScript
naoya
15
6.3k
TypeScript 関数型スタイルでバックエンド開発のリアル
naoya
72
35k
シェルの履歴とイクンリメンタル検索を使う
naoya
8
3.2k
20230227-engineer-type-talk.pdf
naoya
89
76k
関数型プログラミングと型システムのメンタルモデル
naoya
62
100k
TypeScript による GraphQL バックエンド開発
naoya
28
35k
フロントエンドのパラダイムを参考にバックエンド開発を再考する / TypeScript による GraphQL バックエンド開発
naoya
67
24k
「問題から目を背けず取り組む」 一休の開発チームが6年間で学んだこと
naoya
144
60k
Other Decks in Technology
See All in Technology
家族の思い出を形にする 〜 1秒動画の生成を支えるインフラアーキテクチャ
ojima_h
1
580
マルチプロダクト×マルチテナントを支えるモジュラモノリスを中心としたアソビューのアーキテクチャ
disc99
1
360
形式手法特論:位相空間としての並行プログラミング #kernelvm / Kernel VM Study Tokyo 18th
ytaka23
3
1k
データ基盤の管理者からGoogle Cloud全体の管理者になっていた話
zozotech
PRO
0
400
JAWS AI/ML #30 AI コーディング IDE "Kiro" を触ってみよう
inariku
3
330
【CEDEC2025】『ウマ娘 プリティーダービー』における映像制作のさらなる高品質化へ!~ 豊富な素材出力と制作フローの改善を実現するツールについて~
cygames
PRO
0
240
バクラクによるコーポレート業務の自動運転 #BetAIDay
layerx
PRO
1
890
UDDのススメ - 拡張版 -
maguroalternative
1
350
Serverless Meetup #21
yoshidashingo
1
110
Claude Codeは仕様駆動の夢を見ない
gotalab555
23
5.6k
Unson OS|48時間で「売れるか」を判定する AI 市場検証プラットフォーム
unson
0
180
Kiroから考える AIコーディングツールの潮流
oikon48
4
680
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
790
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Mobile First: as difficult as doing things right
swwweet
223
9.9k
Become a Pro
speakerdeck
PRO
29
5.5k
Why Our Code Smells
bkeepers
PRO
337
57k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
Adopting Sorbet at Scale
ufuk
77
9.5k
Practical Orchestrator
shlominoach
190
11k
What's in a price? How to price your products and services
michaelherold
246
12k
Unsuck your backbone
ammeep
671
58k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
The Cult of Friendly URLs
andyhume
79
6.5k
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Ͱɻ