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
2k
Railsワンマン運転の手引き / Rails one-man operation
betachelsea
0
890
相棒の選び方
betachelsea
0
680
実践OKR失敗レポート
betachelsea
0
130
ぼっちの開発 3-Step
betachelsea
0
140
Sketch is 便利 for Engineers
betachelsea
0
650
高専プロコンで初心者が競技プログラミングに挑戦するとこうなる
betachelsea
2
2.8k
BackboneにReactをチョイ足しして幸せになった話
betachelsea
1
1.2k
Electronをかじってみた
betachelsea
1
990
Other Decks in Programming
See All in Programming
今、知っておきたい! 生成AIエージェントの世界
elith
3
350
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
690
スキーマ駆動開発による品質とスピードの両立 - 私達は何故、スキーマを書くのか
kentaroutakeda
0
170
HUIT新歓2024「競技プログラミング、やってみませんか?」
slephy2784
1
270
Ruby Pattern Matching
bkuhlmann
0
930
MicrosoftのPlatform Engineeringガイドを読んで実際になにかやってみた
ymd65536
1
320
R言語の環境構築と基礎 Tokyo.R 112
bob3bob3
0
270
Code Reviews
bkuhlmann
4
890
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
170
#phpcon_odawara オープン・クローズドなテストフィクスチャを求めて / open closed test fixtures
77web
3
230
코틀린으로 멀티플랫폼 만들기
pangmoo
0
150
Hanami and htmx
bkuhlmann
0
210
Featured
See All Featured
Facilitating Awesome Meetings
lara
42
5.6k
How to train your dragon (web standard)
notwaldorf
73
5.2k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
2
3.4k
The Power of CSS Pseudo Elements
geoffreycrofte
60
5k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
19
1.7k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
14
1.6k
Faster Mobile Websites
deanohume
299
30k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
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ɺͯ͠Έ·͠ΐ͏ʂ ͓͠·͍