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
210
ぼっちの開発 3-Step
betachelsea
0
200
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
CSC305 Lecture 01
javiergs
PRO
1
400
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
210
Catch Up: Go Style Guide Update
andpad
0
210
明日から始めるリファクタリング
ryounasso
0
130
CSC305 Lecture 06
javiergs
PRO
0
210
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
790
NetworkXとGNNで学ぶグラフデータ分析入門〜複雑な関係性を解き明かすPythonの力〜
mhrtech
3
1.2k
CSC305 Lecture 05
javiergs
PRO
0
210
Serena MCPのすすめ
wadakatu
4
950
いま中途半端なSwift 6対応をするより、Default ActorやApproachable Concurrencyを有効にしてからでいいんじゃない?
yimajo
2
390
Railsだからできる 例外業務に禍根を残さない 設定設計パターン
ei_ei_eiichi
0
410
XP, Testing and ninja testing ZOZ5
m_seki
3
570
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Facilitating Awesome Meetings
lara
56
6.6k
Building Applications with DynamoDB
mza
96
6.7k
GraphQLとの向き合い方2022年版
quramy
49
14k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.3k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Why Our Code Smells
bkeepers
PRO
339
57k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
Practical Orchestrator
shlominoach
190
11k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Context Engineering - Making Every Token Count
addyosmani
5
210
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ɺͯ͠Έ·͠ΐ͏ʂ ͓͠·͍