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
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
490
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
140
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
280
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
560
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
10
6k
Deep Dive into ~/.claude/projects
hiragram
14
2.6k
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
210
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.4k
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
530
AI Agent 時代のソフトウェア開発を支える AWS Cloud Development Kit (CDK)
konokenj
3
280
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
950
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
180
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
GraphQLとの向き合い方2022年版
quramy
49
14k
Writing Fast Ruby
sferik
628
62k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Code Review Best Practice
trishagee
69
19k
The World Runs on Bad Software
bkeepers
PRO
69
11k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Designing Experiences People Love
moore
142
24k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
YesSQL, Process and Tooling at Scale
rocio
173
14k
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ɺͯ͠Έ·͠ΐ͏ʂ ͓͠·͍