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
VirtualDOMをお勉強しました-React.jsチュートリアル所感-
Search
betachelsea
January 12, 2015
Programming
0
680
VirtualDOMをお勉強しました-React.jsチュートリアル所感-
https://github.com/betachelsea/reactjs-tutorial
betachelsea
January 12, 2015
Tweet
Share
More Decks by betachelsea
See All by betachelsea
Enjoy Ruby Next Step
betachelsea
0
2.2k
Railsワンマン運転の手引き / Rails one-man operation
betachelsea
0
1.1k
相棒の選び方
betachelsea
0
830
実践OKR失敗レポート
betachelsea
0
200
ぼっちの開発 3-Step
betachelsea
0
190
Sketch is 便利 for Engineers
betachelsea
0
670
高専プロコンで初心者が競技プログラミングに挑戦するとこうなる
betachelsea
2
3k
BackboneにReactをチョイ足しして幸せになった話
betachelsea
1
1.2k
Electronをかじってみた
betachelsea
1
1k
Other Decks in Programming
See All in Programming
State of CSS 2025
benjaminkott
1
120
CSC305 Summer Lecture 12
javiergs
PRO
0
110
🔨 小さなビルドシステムを作る
momeemt
1
480
TDD 実践ミニトーク
contour_gara
0
140
フロントエンドのmonorepo化と責務分離のリアーキテクト
kajitack
2
140
画像コンペでのベースラインモデルの育て方
tattaka
3
1.9k
Dart 参戦!!静的型付き言語界の隠れた実力者
kno3a87
0
210
管你要 trace 什麼、bpftrace 用下去就對了 — COSCUP 2025
shunghsiyu
0
470
モバイルアプリからWebへの横展開を加速した話_Claude_Code_実践術.pdf
kazuyasakamoto
0
260
CSC305 Summer Lecture 05
javiergs
PRO
0
110
コーディングエージェント時代のNeovim
key60228
1
100
コンテキストエンジニアリング Cursor編
kinopeee
1
700
Featured
See All Featured
Visualization
eitanlees
147
16k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Become a Pro
speakerdeck
PRO
29
5.5k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Writing Fast Ruby
sferik
628
62k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Bash Introduction
62gerente
614
210k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Balancing Empowerment & Direction
lara
2
590
Transcript
LOUPE Study#14 2015/01/06 @beta_chelsea VirtualDOMΛ ͓ษڧ͠·ͨ͠ - React.js νϡʔτϦΞϧॴײ -
← webॻಓ.com ΑΓ
#ͱ
ͬ͞ͺΓΒͳ͔ͬͨͷͰ θϩ͔Βษڧ
࠷ۙͷ
ͬ͘͟ΓಡΜͩ݁Ռͷ ͓΅Ζ͛ͳཧղ
VirtualDOM֓೦ʢํ๏ʣ • DOMΛૢ࡞ͤͣɺDOMΛදݱ͢ΔjsΦϒδΣΫτΛ ৮ͬͯมߋΛཧ͠Α͏ͱ͍͏ํ๏ • ෦ͰมߋલޙͷdiffΛॲཧ͢Δ͜ͱͰܰಈ࡞Λ࣮ݱ • ৗʹθϩ͔Βॻ͖͢Α͏ʹॻ͘͜ͱ͕Ͱ͖Δ • Կ൪ͷཁૉʹ<li>Λૠೖ͢Δͱ͔Λߟ͑ͳͯ͘Α͍
• ↑ͦΕVirtualDOMͷ࣮͕ͬͯ͘ΕΔ • jQueryͷ$(“#hoge”).append(“<p>΄͛</p>”); ͏ΊΑ͏ͱ͍͏ํͬΆ͍ͷΛײ͡Δ
࣮ࣗମઓࠃ࣌ͬΆ͍ • facebook/react • Matt-Esch/virtual-dom • segmentio/deku • VirtualDOMʹదͨ͠Fluxͱ͍͏ߏͱ͔ʢ͜Ε֓೦ʣ •
etc…
ͱΓ͍͋͑ͣϞϊʹר͔ΕΖਫ਼ਆͰ ࠓҰ൪ࢿྉ͕ଟͦ͏ͳ facebook/react ΛݟͯΈΑ͏
2015ॻ͖ॳΊɿνϡʔτϦΞϧࣸܦ
2015ॻ͖ॳΊɿνϡʔτϦΞϧࣸܦ
ࣸܦ݁Ռ
ࣸܦ͔Βಘͨཧղ
ྫɿ 3000ϛϦඵޙʹ ʮϛϧΫʯΛʮڇೕʯʹม͠ͳ͍͞
ΨνjQueryʢੜDOMΛ৮Δํ๏ʣͩͱ ※ίʔυ݁ߏదͰ͢
VirtualDOMͷߟ͑ํͩͱ ※ίʔυ݁ߏదͰ͢
VirtualDOMͷϝϦοτ DOMૢ࡞ΛΑΓগͳ͘͢ΔͨΊʹ·ͳͯ͘Α͍ શσʔλΛͿͪ͜Ίউखʹൺֱɾमਖ਼Λͬͯ͘ΕΔ ͋ͱ͍Β͍͠ʢখ͍͞σʔλ͡ΌΘ͔ΒΜʣ VirtualDOMͷσϝϦοτ DOMૢ࡞લఏͷطଘϥΠϒϥϦͱ૬ੑ͕ѱ͍ VirtualDOM࣮͕Ѳ͍ͯ͠ͳ͍ͱ͜Ζ͔ΒԣΓ͕ ೖΔͱ߹ੑ͔औΕͳ͘ͳͬͯ͠·͏
͜Ε͔Β Ͳ͏ͳΔ
None
2015ɺͯ͠Έ·͠ΐ͏ʂ ͓͠·͍