Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

やさしい仮想DOM

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

 やさしい仮想DOM

about Virtual DOM

Avatar for Ryo Nakamura

Ryo Nakamura

April 25, 2019

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
Vibe Coding で作ったプロダクトをどう安全に動かすか / How to Safely Run Products Built with Vibe Coding
Avatar for Akira Maeda glidenote
0
570
「どのログを見ればいい？」 から始めた サーバーレス障害解析
Avatar for y_waka1 y_waka1
1
150
今話題のAI「Jev」って何？ 宇宙最速で学ぶ会
Avatar for みのるん minorun365
PRO
33
21k
人間はどの意思決定を手放せるのか
Avatar for Yoshitaka Kawashima kawasima
16
8.3k
AI感のないAWS構成図をAIエージェントに描かせたい！
Avatar for さご sagochiko
1
370
ScotSecure West 2026 - Glasgow
Avatar for Ray Bugg raybugg
0
170
絵ではじめるKubernetesセキュリティ
Avatar for Aoi Takahashi aoi1
5
710
AIエージェントの一手は 誰も見ていない - Falco拡張OSS「Prempti」とeBPFで サーバーレス実行基盤を二層防御する
Avatar for がっきー（がっきー） keitah
1
570
AI coding 整合正規方法
Avatar for philipz philipz
0
550
音声コミュニティを守るAI監視基盤_ 90%以上の入力削減を支えたServerless設計と運用判断
Avatar for 岡修平 shuheioka123
0
100
白金鉱業Meetup Vol.25 アウトカムが二値のデータに対するCausal Impact
Avatar for BrainPad brainpadpr
0
300
GoのInterface内部構造から学ぶ！最高パフォーマンスを出すコード設計
Avatar for Yappli Developers yappli_developers
1
290

Featured

See All Featured
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1369
210k
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
Avatar for Aleyda Solis aleyda
2
2.2k
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
1
570
The Spectacular Lies of Maps
Avatar for Per Axbom axbom
PRO
1
1k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
23k
The agentic SEO stack - context over prompts
Avatar for schlessera schlessera
0
940
Design in an AI World
Avatar for tapps tapps
1
330
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
32k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
State of Search Keynote: SEO is Dead Long Live SEO
Avatar for Ryan Jones ryanjones
0
280
Organizational Design Perspectives: An Ontology of Organizational Design Elements
Avatar for Dr. Kim W Petersen kimpetersen
PRO
1
830

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. ͝ਗ਼ௌ ͋Γ͕ͱ͏ ͍͟͝·ͨ͠