やさしい仮想DOM

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 ೖΕࢠͷؔ਺܈ ม׵ ༧Ίఆٛͨؔ͠਺ͷ ࣮૷ͷ໭Γ஋ Ծ૝DOM Ծ૝DOM Tree

JSX ೖΕࢠͷؔ਺܈ ม׵ ༧Ίఆٛͨؔ͠਺ͷ ࣮૷ͷ໭Γ஋ Ծ૝DOM Ծ૝DOM Tree (೚ҙͷλΠϛϯάͰ) DOM
API Λར༻ͯ͠ 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 ʹ௨͚ͨͩ͠

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

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

Ծ૝DOM Ծ૝DOM JavaScript

ϫγͷ৺ͷதʹ͋Δ DOM Ծ૝DOM Ծ૝DOM JavaScript

Ծ૝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. ࠩ෼ߋ৽

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)

͝ਗ਼ௌ ͋Γ͕ͱ͏ ͍͟͝·ͨ͠

やさしい仮想DOM

やさしい仮想DOM

More Decks by Ryo Nakamura

Other Decks in Technology

Featured

Transcript