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
やさしい仮想DOM
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Ryo Nakamura
April 25, 2019
Technology
1
230
やさしい仮想DOM
about Virtual DOM
Ryo Nakamura
April 25, 2019
Tweet
Share
More Decks by Ryo Nakamura
See All by Ryo Nakamura
楽しいProxy
ryonkmr
2
120
Other Decks in Technology
See All in Technology
【Oracle Cloud ウェビナー】[Oracle AI Database + AWS] Oracle Database@AWSで広がるクラウドの新たな選択肢とAI時代のデータ戦略
oracle4engineer
PRO
2
180
Cloud Runでコロプラが挑む 生成AI×ゲーム『神魔狩りのツクヨミ』の裏側
colopl
0
130
私たち準委任PdEは2つのプロダクトに挑戦する ~ソフトウェア、開発支援という”二重”のプロダクトエンジニアリングの実践~ / 20260212 Naoki Takahashi
shift_evolve
PRO
2
180
We Built for Predictability; The Workloads Didn’t Care
stahnma
0
150
制約が導く迷わない設計 〜 信頼性と運用性を両立するマイナンバー管理システムの実践 〜
bwkw
3
1k
量子クラウドサービスの裏側 〜Deep Dive into OQTOPUS〜
oqtopus
0
140
Frontier Agents (Kiro autonomous agent / AWS Security Agent / AWS DevOps Agent) の紹介
msysh
3
180
Agile Leadership Summit Keynote 2026
m_seki
1
670
クレジットカード決済基盤を支えるSRE - 厳格な監査とSRE運用の両立 (SRE Kaigi 2026)
capytan
6
2.8k
30万人の同時アクセスに耐えたい!新サービスの盤石なリリースを支える負荷試験 / SRE Kaigi 2026
genda
4
1.4k
SREチームをどう作り、どう育てるか ― Findy横断SREのマネジメント
rvirus0817
0
340
usermode linux without MMU - fosdem2026 kernel devroom
thehajime
0
240
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
128
17k
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
mfonobong
2
280
Primal Persuasion: How to Engage the Brain for Learning That Lasts
tmiket
0
260
Groundhog Day: Seeking Process in Gaming for Health
codingconduct
0
96
Navigating the moral maze — ethical principles for Al-driven product design
skipperchong
2
250
The Impact of AI in SEO - AI Overviews June 2024 Edition
aleyda
5
740
The SEO Collaboration Effect
kristinabergwall1
0
350
Joys of Absence: A Defence of Solitary Play
codingconduct
1
290
Exploring the relationship between traditional SERPs and Gen AI search
raygrieselhuber
PRO
2
3.6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.7k
Why You Should Never Use an ORM
jnunemaker
PRO
61
9.7k
Prompt Engineering for Job Search
mfonobong
0
160
Transcript
RyoNkmr PROJECT DATE AUTHOR 2019-04-25 ͍͞͠ԾDOM @WE ARE JAVASCRIPTERS! #31
RyoNkmr •tw: @RyoNkmr_ •GH: RyoNkmr •frontend: 3 years+
͍͞͠ԾDOM
͕ࠢ͑ΔʁੈքΛֵ໋͢Δྗʁٹੈओʁ͍ʁ
ԾDOMͬͯੌ͍
ੌ͍→ຐ๏
ຐ๏→Θ͔ΒΜ
Α͘Θ͔Βͳ͍ →ා͍
ଟগΘ͔Δ →ଟগා͘ͳ͍
͍͞͠ԾDOM
ԾDOMͱ
ԾDOM࣮ͱ
DOM TreeΛ ͱͯ͠දݱ →ԾDOM Tree
ԾDOMTreeͷมߋΛ ݩʹ࠷খݶͷDOM APIΛ ར༻࣮ͯ͠ࡍͷDOMTree ʹө͢Δ
JSX
JSX ೖΕࢠͷؔ܈ ม
JSX ೖΕࢠͷؔ܈ ม ༧Ίఆٛͨؔ͠ͷ ࣮ͷΓ ԾDOM ԾDOM Tree
JSX ೖΕࢠͷؔ܈ ม ༧Ίఆٛͨؔ͠ͷ ࣮ͷΓ ԾDOM ԾDOM Tree (ҙͷλΠϛϯάͰ) DOM
API Λར༻ͯ͠ DOM ʹө
JSX ೖΕࢠͷؔ܈ ม ༧Ίఆٛͨؔ͠ͷ ࣮ͷΓ ԾDOM ԾDOM Tree (ҙͷλΠϛϯάͰ) DOM
API Λར༻ͯ͠ DOM ʹө DOM DOM Tree ϒϥβ DOM API
ʔ…
ͳΜͱͳ͘ ٕज़ཁૉΛ ཧղ͢Δ
JSX
JSX ೖΕࢠͷؔ܈ ม ༧Ίఆٛͨؔ͠ͷ ࣮ͷΓ ԾDOM ԾDOM Tree (ҙͷλΠϛϯάͰ) DOM
API Λར༻ͯ͠ DOM ʹө DOM DOM Tree ϒϥβ DOM API
JSX ೖΕࢠͷؔ܈ ม ༧Ίఆٛͨؔ͠ͷ ࣮ͷΓ ԾDOM ԾDOM Tree (ҙͷλΠϛϯάͰ) DOM
API Λར༻ͯ͠ DOM ʹө DOM DOM Tree ϒϥβ DOM API
const goodOldDays = <p style="width: 240px;”> 昔は良かったなあ </p> React.js Ͱ͓ͳ͡ΈͰ͢Ͷ
͜Ε͕
var goodOldDays = React.createElement( "p", { style: "width: 240px;" },
"昔は良かったなあ" ); ͜͏ͳΔ ※@babel/preset-react ʹ௨͚ͨͩ͠
DOM
JSX ೖΕࢠͷؔ܈ ม ༧Ίఆٛͨؔ͠ͷ ࣮ͷΓ ԾDOM ԾDOM Tree (ҙͷλΠϛϯάͰ) DOM
API Λར༻ͯ͠ DOM ʹө DOM DOM Tree ϒϥβ DOM API
JSX ೖΕࢠͷؔ܈ ม ༧Ίఆٛͨؔ͠ͷ ࣮ͷΓ ԾDOM ԾDOM Tree (ҙͷλΠϛϯάͰ) DOM
API Λར༻ͯ͠ DOM ʹө DOM DOM Tree ϒϥβ DOM API
Document Object Model
<!DOCTYPE html> <html> <head> <title>やさしいVirtualDOM</title> </head> <body> <h1>やさしいVirtualDOM</h1> <p>昔々あるところに、おじいさんとおばあさんとNull</p> </body>
</html> HTML
DOM Tree
DOM Tree p body head h1 ੲʑ ͋Δͱ͜Ζʹ… ͍͞͠ VirtualDOM
document html
JSX ೖΕࢠͷؔ܈ ม ༧Ίఆٛͨؔ͠ͷ ࣮ͷΓ ԾDOM ԾDOM Tree (ҙͷλΠϛϯάͰ) DOM
API Λར༻ͯ͠ DOM ʹө DOM DOM Tree ϒϥβ DOM API
DOM & DOM API JavaScript DOM Tree DOM API
DOM API body Լͷ̍ݸͷཁૉ͘Ε JavaScript DOM Tree DOM API
DOM API body Լͷ̍ݸͷཁૉ͘Ε JavaScript DOM Tree DOM API ͍͋Αʂ
h1 Ұஸʂ
DOM API body Լͷ̍ݸͷཁૉ͘Ε ͦͷ h1 ͷςΩετڭ͑ͯ JavaScript DOM Tree
DOM API ͍͋Αʂ h1 Ұஸʂ
DOM API body Լͷ̍ݸͷཁૉ͘Ε ͍͞͠ VirtualDOM JavaScript DOM Tree DOM
API ͍͋Αʂ h1 Ұஸʂ ͦͷ h1 ͷςΩετڭ͑ͯ
DOM API ͦΕΛ ”શʹཧղͨ͠” ʹ ॻ͖͑ͯ JavaScript DOM Tree DOM
API body Լͷ̍ݸͷཁૉ͘Ε ͍͞͠ VirtualDOM ͍͋Αʂ h1 Ұஸʂ ͦͷ h1 ͷςΩετڭ͑ͯ
ԾDOM
JSX ೖΕࢠͷؔ܈ ม ༧Ίఆٛͨؔ͠ͷ ࣮ͷΓ ԾDOM ԾDOM Tree (ҙͷλΠϛϯάͰ) DOM
API Λར༻ͯ͠ DOM ʹө DOM DOM Tree ϒϥβ DOM API
JSX ೖΕࢠͷؔ܈ ม ༧Ίఆٛͨؔ͠ͷ ࣮ͷΓ ԾDOM ԾDOM Tree (ҙͷλΠϛϯάͰ) DOM
API Λར༻ͯ͠ DOM ʹө DOM DOM Tree ϒϥβ DOM API
ԾDOM ԾDOM JavaScript
ϫγͷ৺ͷதʹ͋Δ DOM ԾDOM ԾDOM JavaScript
JSX ೖΕࢠͷؔ܈ ม ༧Ίఆٛͨؔ͠ͷ ࣮ͷΓ ԾDOM ԾDOM Tree (ҙͷλΠϛϯάͰ) DOM
API Λར༻ͯ͠ DOM ʹө DOM DOM Tree ϒϥβ DOM API
JSX ೖΕࢠͷؔ܈ ม ༧Ίఆٛͨؔ͠ͷ ࣮ͷΓ ԾDOM ԾDOM Tree (ҙͷλΠϛϯάͰ) DOM
API Λར༻ͯ͠ DOM ʹө DOM DOM Tree ϒϥβ DOM API
ԾDOMΛDOMʹө͢Δ
ઃܭॻΛ࣮ʹө͢Δ
DOM Tree DOM API ϫγͷ৺ͷதʹ͋Δ DOM ԾDOMΛDOMʹө͢Δ JavaScript ԾDOM
DOM Tree DOM API JavaScript ԾDOM <section> Λ࡞ͬͯ <h1>ͱ<p>Λࢠཁૉͱ ͯ͠࡞ͬͯೖΕͯ…
ԾDOMΛDOMʹө͢Δ
ԾDOMΛDOMʹө͢Δ ͨͷΉͰ DOM Tree DOM API JavaScript ԾDOM
ͨͷΉͰ ԾDOMΛDOMʹө͢Δ ͍͋Αʂ DOM Tree DOM API JavaScript ԾDOM
ԾDOMΛDOMʹө͢Δ ͏͓͓͓͓͓͓͓ DOM Tree DOM API JavaScript ԾDOM
ԾDOMΛDOMʹө͢Δ ࢦࣔͲ͓ΓͰ͖ͨ DOM Tree DOM API JavaScript ԾDOM
ԾDOMΛDOMʹө͢Δ ͋ͬ͟͢ʂ ࢦࣔͲ͓ΓͰ͖ͨ JavaScript ԾDOM DOM Tree DOM API
͋ͬ͟͢ʂ ԾDOMΛDOMʹө͢Δ ᘳͩ JavaScript ԾDOM DOM Tree DOM API
ԾDOMͷมߋࠩͱ ࠷খݶͷDOM APIͷར༻
ԾDOM ͷมߋࠩΛΈͯ ࠷খݶ ͷ DOM API Λ͏ JavaScript ԾDOM ؾ͕มΘͬͨ
DOM Tree DOM API
ԾDOM ͷมߋࠩΛΈͯ ࠷খݶ ͷ DOM API Λ͏ ԾDOM JavaScript ؾ͕มΘͬͨ
DOM Tree DOM API
ԾDOM ͷมߋࠩΛΈͯ ࠷খݶ ͷ DOM API Λ͏ ༿ͷ৭ͱ ΩϥΩϥ͚ͩมΘΔ ͜͜Λ͜ͷ৭ʹ
(ଞ৮Εͳ͍) ԾDOM JavaScript DOM Tree DOM API
ԾDOM ͷมߋࠩΛΈͯ ࠷খݶ ͷ DOM API Λ͏ ͍͋Αʂ ԾDOM JavaScript
DOM Tree DOM API
ԾDOM ͷมߋࠩΛΈͯ ࠷খݶ ͷ DOM API Λ͏ ͋ͬ͟͢ʂ ࢦࣔͲ͓ΓͰ͖ͨ ԾDOM
JavaScript DOM Tree DOM API
jQueryͱซ༻͢Δͳͬͯ ͍ΘΕΔύλʔϯ
DOM Tree DOM API উखʹফͨ͠Ζ͆ ผਓ֨ jQuery JavaScript ԾDOM
DOM Tree DOM API JavaScript ԾDOM ผਓ֨ jQuery উखʹফͨ͠Ζ͆ ʢ͋Εʁϫγͷ
ҙࢥʹͯ͠ ମ͕উखʹʣ ফͯ͘͠Ε
͍͋Αʂ DOM Tree DOM API JavaScript ԾDOM ผਓ֨ jQuery উखʹফͨ͠Ζ͆
DOM Tree DOM API JavaScript ԾDOM ผਓ֨ jQuery ফͤͳ͍ࠜͬ͜ Ҏ֎ফͨ͠
DOM Tree DOM API ফͤͳ͍ࠜͬ͜ Ҏ֎ফͨ͠ ϫϩλ JavaScript ԾDOM ผਓ֨
jQuery
ԾDOM ͷมߋࠩΛΈͯ ࠷খݶ ͷ DOM API Λ͏ ؾ͕มΘͬͨ ʢਖ਼ؾʣ DOM
Tree DOM API JavaScript ԾDOM ผਓ֨ jQuery
༿ͷ৭ͱ ΩϥΩϥ͚ͩ มΘΔ ͜͜Λ͜ͷ৭ʹ (ଞ৮Εͳ͍) ԾDOM ͷมߋࠩΛΈͯ ࠷খݶ ͷ DOM
API Λ͏ DOM Tree DOM API JavaScript ԾDOM ผਓ֨ jQuery
ԾDOM ͷมߋࠩΛΈͯ ࠷খݶ ͷ DOM API Λ͏ ͍͋Αʂ DOM Tree
DOM API JavaScript ԾDOM ผਓ֨ jQuery
༿ͬͺ͕ ͳ͍Αʂ ແཧʂ ԾDOM ͷมߋࠩΛΈͯ ࠷খݶ ͷ DOM API Λ͏
DOM Tree DOM API JavaScript ԾDOM ผਓ֨ jQuery
DOM Tree DOM API JavaScript ԾDOM ผਓ֨ jQuery
jQuery ͷ DOM ૢ࡞ͱ ซ༻͢ΔͱյΕΔ
·ͱΊ
ԾDOMΛݩʹ DOMʹө͢Δ࣮ 1. σʔλˠදࣔ
ԾDOMͷมԽͷ͔ࠩΒ શମΛߋ৽͢ΔͷͰͳ͘ ඞཁͳ෦ͷΈө͢Δ 2. ࠩߋ৽
JSX ೖΕࢠͷؔ܈ ม ༧Ίఆٛͨؔ͠ͷ ࣮ͷΓ ԾDOM ԾDOM Tree (ҙͷλΠϛϯάͰ) DOM
API Λར༻ͯ͠ DOM ʹө DOM DOM Tree
طଘͷ খ͞ΊͷVDOM࣮ ϥΠϒϥϦΛࢀߟʹ
࣮ͯ͠ΈΔͱ ຐ๏͡Όͳͯ͘ ׂͱటष͍͜ͱΛ ͬͯΔͷ͕Θ͔Δͱ ࢥ͍·͢
࡞ͬͯΈΑ͏ʂ VirtualNeko (https://github.com/RyoNkmr/vdom)
ࣗ࡞ϑϨʔϜϫʔΫΛֶͭͬͯ͘Ϳ ԾDOM࣮ફೖ | Black Everyday Company (https://kuroeveryday.blogspot.com/2018/11/how-to- create-virtual-dom-framework.html) ࢀߟ HyperApp
(https://github.com/jorgebucaran/hyperapp)
͝ਗ਼ௌ ͋Γ͕ͱ͏ ͍͟͝·ͨ͠