Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

やさしい仮想DOM

Avatar for Ryo Nakamura Ryo Nakamura
April 25, 2019
Technology
1
230

 やさしい仮想DOM

about Virtual DOM

Avatar for Ryo Nakamura

Ryo Nakamura

April 25, 2019
Tweet

More Decks by Ryo Nakamura

See All by Ryo Nakamura
楽しいProxy
Avatar for Ryo Nakamura ryonkmr
2
120

Other Decks in Technology

See All in Technology
AWSの新機能をフル活用した「re:Inventエージェント」開発秘話
Avatar for みのるん minorun365
2
470
松尾研LLM講座2025 応用編Day3「軽量化」 講義資料
Avatar for Aratako aratako
7
4.1k
Connection-based OAuthから学ぶOAuth for AI Agents
Avatar for GMO Flatt Security flatt_security
0
380
テストセンター受験、オンライン受験、どっちなんだい？
Avatar for Yuuki Yamashita yama3133
0
170
M&Aで拡大し続けるGENDAのデータ活用を促すためのDatabricks権限管理 / AEON TECH HUB #22
Avatar for GENDA genda
0
260
Entity Framework Core におけるIN句クエリ最適化について
Avatar for tkym htkym
0
130
ソフトウェアエンジニアとAIエンジニアの役割分担についてのある事例
Avatar for KNOWLEDGE WORK / 株式会社ナレッジワーク kworkdev
PRO
0
280
さくらのクラウド開発ふりかえり2025
Avatar for kazeburo kazeburo
2
1.2k
Building Serverless AI Memory with Mastra × AWS
Avatar for vvatanabe vvatanabe
0
600
LayerX QA Night#1
Avatar for koyaman2 koyaman2
0
270
ActiveJobUpdates
Avatar for Kuniaki IGARASHI igaiga
1
320
100以上の新規コネクタ提供を可能にしたアーキテクチャ
Avatar for yu-kioo ooyukioo
0
260

Featured

See All Featured
Writing Fast Ruby
Avatar for Erik Berlin sferik
630
62k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
55k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
432
66k
End of SEO as We Know It (SMX Advanced Version)
Avatar for Michael King ipullrank
2
3.8k
SEO for Brand Visibility & Recognition
Avatar for Aleyda Solis aleyda
0
4.1k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
31
5.7k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
65
8.3k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.6k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
1
1.3k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.1k
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
0
30k
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
8
35k

Transcript

  1. RyoNkmr PROJECT DATE AUTHOR 2019-04-25 ΍͍͞͠Ծ૝DOM @WE ARE JAVASCRIPTERS! #31

  2. RyoNkmr •tw: @RyoNkmr_ •GH: RyoNkmr •frontend: 3 years+

  3. ΍͍͞͠Ծ૝DOM

  4. ͕ࠢ਒͑ΔʁੈքΛֵ໋͢Δྗʁٹੈओʁ͸΍͍ʁ

  5. Ծ૝DOMͬͯੌ͍

  6. ੌ͍→ຐ๏

  7. ຐ๏→Θ͔ΒΜ

  8. Α͘Θ͔Βͳ͍ →ා͍

  9. ଟগΘ͔Δ →ଟগා͘ͳ͍

  10. ΍͍͞͠Ծ૝DOM

  11. Ծ૝DOMͱ͸

  12. Ծ૝DOM࣮૷ͱ͸

  13. DOM TreeΛ
 ஋ͱͯ͠දݱ →Ծ૝DOM Tree

  14. Ծ૝DOMTreeͷมߋΛ
 ݩʹ࠷খݶͷDOM APIΛ ར༻࣮ͯ͠ࡍͷDOMTree ʹ൓ө͢Δ

  15. JSX

  16. JSX ೖΕࢠͷؔ਺܈ ม׵

  17. JSX ೖΕࢠͷؔ਺܈ ม׵ ༧Ίఆٛͨؔ͠਺ͷ ࣮૷ͷ໭Γ஋ Ծ૝DOM Ծ૝DOM Tree

  18. JSX ೖΕࢠͷؔ਺܈ ม׵ ༧Ίఆٛͨؔ͠਺ͷ ࣮૷ͷ໭Γ஋ Ծ૝DOM Ծ૝DOM Tree (೚ҙͷλΠϛϯάͰ) DOM

    API Λར༻ͯ͠ DOM ʹ൓ө

  19. JSX ೖΕࢠͷؔ਺܈ ม׵ ༧Ίఆٛͨؔ͠਺ͷ ࣮૷ͷ໭Γ஋ Ծ૝DOM Ծ૝DOM Tree (೚ҙͷλΠϛϯάͰ) DOM

    API Λར༻ͯ͠ DOM ʹ൓ө DOM DOM Tree ϒϥ΢β DOM API

  20. ΁ʔ…

  21. ͳΜͱͳ͘ ٕज़ཁૉΛ ཧղ͢Δ

  22. JSX

  23. JSX ೖΕࢠͷؔ਺܈ ม׵ ༧Ίఆٛͨؔ͠਺ͷ ࣮૷ͷ໭Γ஋ Ծ૝DOM Ծ૝DOM Tree (೚ҙͷλΠϛϯάͰ) DOM

    API Λར༻ͯ͠ DOM ʹ൓ө DOM DOM Tree ϒϥ΢β DOM API

  24. JSX ೖΕࢠͷؔ਺܈ ม׵ ༧Ίఆٛͨؔ͠਺ͷ ࣮૷ͷ໭Γ஋ Ծ૝DOM Ծ૝DOM Tree (೚ҙͷλΠϛϯάͰ) DOM

    API Λར༻ͯ͠ DOM ʹ൓ө DOM DOM Tree ϒϥ΢β DOM API

  25. const goodOldDays = <p style="width: 240px;”> 昔は良かったなあ </p> React.js Ͱ͸͓ͳ͡ΈͰ͢Ͷ

    ͜Ε͕

  26. var goodOldDays = React.createElement( "p", { style: "width: 240px;" },

    "昔は良かったなあ" ); ͜͏ͳΔ ※@babel/preset-react ʹ௨͚ͨͩ͠

  27. DOM

  28. JSX ೖΕࢠͷؔ਺܈ ม׵ ༧Ίఆٛͨؔ͠਺ͷ ࣮૷ͷ໭Γ஋ Ծ૝DOM Ծ૝DOM Tree (೚ҙͷλΠϛϯάͰ) DOM

    API Λར༻ͯ͠ DOM ʹ൓ө DOM DOM Tree ϒϥ΢β DOM API

  29. JSX ೖΕࢠͷؔ਺܈ ม׵ ༧Ίఆٛͨؔ͠਺ͷ ࣮૷ͷ໭Γ஋ Ծ૝DOM Ծ૝DOM Tree (೚ҙͷλΠϛϯάͰ) DOM

    API Λར༻ͯ͠ DOM ʹ൓ө DOM DOM Tree ϒϥ΢β DOM API

  30. Document Object Model

  31. <!DOCTYPE html> <html> <head> <title>やさしいVirtualDOM</title> </head> <body> <h1>やさしいVirtualDOM</h1> <p>昔々あるところに、おじいさんとおばあさんとNull</p> </body>

    </html> HTML

  32. DOM Tree

  33. DOM Tree p body head h1 ੲʑ ͋Δͱ͜Ζʹ… ΍͍͞͠ VirtualDOM

    document html

  34. JSX ೖΕࢠͷؔ਺܈ ม׵ ༧Ίఆٛͨؔ͠਺ͷ ࣮૷ͷ໭Γ஋ Ծ૝DOM Ծ૝DOM Tree (೚ҙͷλΠϛϯάͰ) DOM

    API Λར༻ͯ͠ DOM ʹ൓ө DOM DOM Tree ϒϥ΢β DOM API

  35. DOM & DOM API JavaScript DOM Tree DOM API

  36. DOM API body ௚Լͷ̍ݸ໨ͷཁૉ͘Ε JavaScript DOM Tree DOM API

  37. DOM API body ௚Լͷ̍ݸ໨ͷཁૉ͘Ε JavaScript DOM Tree DOM API ͍͋Αʂ

    h1 Ұஸʂ

  38. DOM API body ௚Լͷ̍ݸ໨ͷཁૉ͘Ε ͦͷ h1 ಺ͷςΩετڭ͑ͯ JavaScript DOM Tree

    DOM API ͍͋Αʂ h1 Ұஸʂ

  39. DOM API body ௚Լͷ̍ݸ໨ͷཁૉ͘Ε ΍͍͞͠ VirtualDOM JavaScript DOM Tree DOM

    API ͍͋Αʂ h1 Ұஸʂ ͦͷ h1 ಺ͷςΩετڭ͑ͯ

  40. DOM API ͦΕΛ ”׬શʹཧղͨ͠” ʹ
 ॻ͖׵͑ͯ JavaScript DOM Tree DOM

    API body ௚Լͷ̍ݸ໨ͷཁૉ͘Ε ΍͍͞͠ VirtualDOM ͍͋Αʂ h1 Ұஸʂ ͦͷ h1 ಺ͷςΩετڭ͑ͯ

  41. Ծ૝DOM

  42. JSX ೖΕࢠͷؔ਺܈ ม׵ ༧Ίఆٛͨؔ͠਺ͷ ࣮૷ͷ໭Γ஋ Ծ૝DOM Ծ૝DOM Tree (೚ҙͷλΠϛϯάͰ) DOM

    API Λར༻ͯ͠ DOM ʹ൓ө DOM DOM Tree ϒϥ΢β DOM API

  43. JSX ೖΕࢠͷؔ਺܈ ม׵ ༧Ίఆٛͨؔ͠਺ͷ ࣮૷ͷ໭Γ஋ Ծ૝DOM Ծ૝DOM Tree (೚ҙͷλΠϛϯάͰ) DOM

    API Λར༻ͯ͠ DOM ʹ൓ө DOM DOM Tree ϒϥ΢β DOM API

  44. Ծ૝DOM Ծ૝DOM JavaScript

  45. ϫγͷ৺ͷதʹ͋Δ DOM Ծ૝DOM Ծ૝DOM JavaScript

  46. JSX ೖΕࢠͷؔ਺܈ ม׵ ༧Ίఆٛͨؔ͠਺ͷ ࣮૷ͷ໭Γ஋ Ծ૝DOM Ծ૝DOM Tree (೚ҙͷλΠϛϯάͰ) DOM

    API Λར༻ͯ͠ DOM ʹ൓ө DOM DOM Tree ϒϥ΢β DOM API

  47. JSX ೖΕࢠͷؔ਺܈ ม׵ ༧Ίఆٛͨؔ͠਺ͷ ࣮૷ͷ໭Γ஋ Ծ૝DOM Ծ૝DOM Tree (೚ҙͷλΠϛϯάͰ) DOM

    API Λར༻ͯ͠ DOM ʹ൓ө DOM DOM Tree ϒϥ΢β DOM API

  48. Ծ૝DOMΛDOMʹ൓ө͢Δ

  49. ઃܭॻΛ࣮෺ʹ൓ө͢Δ

  50. DOM Tree DOM API ϫγͷ৺ͷதʹ͋Δ DOM Ծ૝DOMΛDOMʹ൓ө͢Δ JavaScript Ծ૝DOM

  51. DOM Tree DOM API JavaScript Ծ૝DOM <section> Λ࡞ͬͯ <h1>ͱ<p>Λࢠཁૉͱ ͯ͠࡞ͬͯೖΕͯ…

    Ծ૝DOMΛDOMʹ൓ө͢Δ

  52. Ծ૝DOMΛDOMʹ൓ө͢Δ ͨͷΉͰ DOM Tree DOM API JavaScript Ծ૝DOM

  53. ͨͷΉͰ Ծ૝DOMΛDOMʹ൓ө͢Δ ͍͋Αʂ DOM Tree DOM API JavaScript Ծ૝DOM

  54. Ծ૝DOMΛDOMʹ൓ө͢Δ ͏͓͓͓͓͓͓͓ DOM Tree DOM API JavaScript Ծ૝DOM

  55. Ծ૝DOMΛDOMʹ൓ө͢Δ ࢦࣔͲ͓ΓͰ͖ͨ DOM Tree DOM API JavaScript Ծ૝DOM

  56. Ծ૝DOMΛDOMʹ൓ө͢Δ ͋ͬ͟͢ʂ ࢦࣔͲ͓ΓͰ͖ͨ JavaScript Ծ૝DOM DOM Tree DOM API

  57. ͋ͬ͟͢ʂ Ծ૝DOMΛDOMʹ൓ө͢Δ ׬ᘳͩ JavaScript Ծ૝DOM DOM Tree DOM API

  58. Ծ૝DOMͷมߋࠩ෼ͱ
 ࠷খݶͷDOM APIͷར༻

  59. Ծ૝DOM ͷมߋࠩ෼ΛΈͯ
 ࠷খݶ ͷ DOM API Λ࢖͏ JavaScript Ծ૝DOM ؾ͕มΘͬͨ

    DOM Tree DOM API

  60. Ծ૝DOM ͷมߋࠩ෼ΛΈͯ
 ࠷খݶ ͷ DOM API Λ࢖͏ Ծ૝DOM JavaScript ؾ͕มΘͬͨ

    DOM Tree DOM API

  61. Ծ૝DOM ͷมߋࠩ෼ΛΈͯ
 ࠷খݶ ͷ DOM API Λ࢖͏ ༿ͷ৭ͱ
 ΩϥΩϥ͚ͩมΘΔ ͜͜Λ͜ͷ৭ʹ

    (ଞ͸৮Εͳ͍) Ծ૝DOM JavaScript DOM Tree DOM API

  62. Ծ૝DOM ͷมߋࠩ෼ΛΈͯ
 ࠷খݶ ͷ DOM API Λ࢖͏ ͍͋Αʂ Ծ૝DOM JavaScript

    DOM Tree DOM API

  63. Ծ૝DOM ͷมߋࠩ෼ΛΈͯ
 ࠷খݶ ͷ DOM API Λ࢖͏ ͋ͬ͟͢ʂ ࢦࣔͲ͓ΓͰ͖ͨ Ծ૝DOM

    JavaScript DOM Tree DOM API

  64. jQueryͱซ༻͢Δͳͬͯ ͍ΘΕΔύλʔϯ

  65. DOM Tree DOM API উखʹফͨ͠Ζ͆ ผਓ֨ jQuery JavaScript Ծ૝DOM

  66. DOM Tree DOM API JavaScript Ծ૝DOM ผਓ֨ jQuery উखʹফͨ͠Ζ͆ ʢ͋Εʁϫγͷ

    ҙࢥʹ൓ͯ͠਎ ମ͕উखʹʣ ফͯ͘͠Ε

  67. ͍͋Αʂ DOM Tree DOM API JavaScript Ծ૝DOM ผਓ֨ jQuery উखʹফͨ͠Ζ͆

  68. DOM Tree DOM API JavaScript Ծ૝DOM ผਓ֨ jQuery ফͤͳ͍ࠜͬ͜ Ҏ֎ফͨ͠

  69. DOM Tree DOM API ফͤͳ͍ࠜͬ͜ Ҏ֎ফͨ͠ ϫϩλ JavaScript Ծ૝DOM ผਓ֨

    jQuery

  70. Ծ૝DOM ͷมߋࠩ෼ΛΈͯ
 ࠷খݶ ͷ DOM API Λ࢖͏ ؾ͕มΘͬͨ
 ʢਖ਼ؾʣ DOM

    Tree DOM API JavaScript Ծ૝DOM ผਓ֨ jQuery

  71. ༿ͷ৭ͱ
 ΩϥΩϥ͚ͩ มΘΔ ͜͜Λ͜ͷ৭ʹ (ଞ͸৮Εͳ͍) Ծ૝DOM ͷมߋࠩ෼ΛΈͯ
 ࠷খݶ ͷ DOM

    API Λ࢖͏ DOM Tree DOM API JavaScript Ծ૝DOM ผਓ֨ jQuery

  72. Ծ૝DOM ͷมߋࠩ෼ΛΈͯ
 ࠷খݶ ͷ DOM API Λ࢖͏ ͍͋Αʂ DOM Tree

    DOM API JavaScript Ծ૝DOM ผਓ֨ jQuery

  73. ༿ͬͺ͕ ͳ͍Αʂ
 ແཧʂ Ծ૝DOM ͷมߋࠩ෼ΛΈͯ
 ࠷খݶ ͷ DOM API Λ࢖͏

    DOM Tree DOM API JavaScript Ծ૝DOM ผਓ֨ jQuery

  74. DOM Tree DOM API JavaScript Ծ૝DOM ผਓ֨ jQuery

  75. jQuery ͷ DOM ૢ࡞ͱ ซ༻͢ΔͱյΕΔ

  76. ·ͱΊ

  77. Ծ૝DOMΛݩʹ DOMʹ൓ө͢Δ࣮૷ 1. σʔλˠදࣔ

  78. Ծ૝DOMͷมԽͷࠩ෼͔Β શମΛߋ৽͢ΔͷͰ͸ͳ͘ ඞཁͳ෦෼ͷΈ൓ө͢Δ 2. ࠩ෼ߋ৽

  79. JSX ೖΕࢠͷؔ਺܈ ม׵ ༧Ίఆٛͨؔ͠਺ͷ ࣮૷ͷ໭Γ஋ Ծ૝DOM Ծ૝DOM Tree (೚ҙͷλΠϛϯάͰ) DOM

    API Λར༻ͯ͠ DOM ʹ൓ө DOM DOM Tree

  80. طଘͷ খ͞ΊͷVDOM࣮૷ ϥΠϒϥϦΛࢀߟʹ

  81. ࣮૷ͯ͠ΈΔͱ ຐ๏͡Όͳͯ͘ ׂͱటष͍͜ͱΛ ΍ͬͯΔͷ͕Θ͔Δͱ ࢥ͍·͢

  82. ࡞ͬͯΈΑ͏ʂ VirtualNeko (https://github.com/RyoNkmr/vdom)

  83. ࣗ࡞ϑϨʔϜϫʔΫΛֶͭͬͯ͘Ϳ Ծ૝DOM࣮ફೖ໳ | Black Everyday Company (https://kuroeveryday.blogspot.com/2018/11/how-to- create-virtual-dom-framework.html) ࢀߟ HyperApp

    (https://github.com/jorgebucaran/hyperapp)

  84. ͝ਗ਼ௌ ͋Γ͕ͱ͏ ͍͟͝·ͨ͠