やさしい仮想DOM

about Virtual DOM

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