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
670
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.1k
Railsワンマン運転の手引き / Rails one-man operation
betachelsea
0
960
相棒の選び方
betachelsea
0
740
実践OKR失敗レポート
betachelsea
0
150
ぼっちの開発 3-Step
betachelsea
0
140
Sketch is 便利 for Engineers
betachelsea
0
650
高専プロコンで初心者が競技プログラミングに挑戦するとこうなる
betachelsea
2
2.9k
BackboneにReactをチョイ足しして幸せになった話
betachelsea
1
1.2k
Electronをかじってみた
betachelsea
1
1k
Other Decks in Programming
See All in Programming
GraphQL あるいは React における自律的なデータ取得について
quramy
11
3k
Jakarta EE meets AI
ivargrimstad
1
520
Rubyのobject_id
qnighy
6
1.3k
Scala アプリケーションのビルドを改善してデプロイ時間を 1/4 にした話 | How I improved the build of my Scala application and reduced deployment time by 4x
nomadblacky
1
180
Go1.23で入った errorsパッケージの小さなアプデ
kuro_kurorrr
2
390
LangChainでWebサイトの内容取得やGitHubソースコード取得
shukob
0
160
What you can do with Ruby on WebAssembly
kateinoigakukun
0
170
Ruby Parser progress report 2024
yui_knk
2
230
Securify_エンジニア採用資料
3shake
0
100
エンジニア1年目で複雑なコードの改善に取り組んだ話
mtnmr
3
2k
はじめてみよう量子プログラミング
itokoichi01
0
210
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
0
120
Featured
See All Featured
Creatively Recalculating Your Daily Design Routine
revolveconf
215
12k
Principles of Awesome APIs and How to Build Them.
keavy
125
16k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
227
52k
Done Done
chrislema
180
16k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
29
2.6k
GraphQLとの向き合い方2022年版
quramy
43
13k
A Philosophy of Restraint
colly
202
16k
Docker and Python
trallard
39
3k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
38
9.2k
We Have a Design System, Now What?
morganepeng
48
7.1k
A Tale of Four Properties
chriscoyier
155
22k
Designing for Performance
lara
604
68k
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ɺͯ͠Έ·͠ΐ͏ʂ ͓͠·͍