---
title: 仮想DOMを理解する！
tags: 
author: [kyokucho1989](https://www.docswell.com/user/kyokucho1989)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/YE9YM8K3J3.jpg?width=480
description: フロントエンドLT会 #7
published: May 21, 22
canonical: https://www.docswell.com/s/kyokucho1989/ZXYEG4-2023-04-25-052934
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/YE9YM8K3J3.jpg)

仮想DOMを理解する！
フロントエンドLT会 #7 2022/5/21
@kyokucho1989


# Page. 2

![Page Image](https://bcdn.docswell.com/page/GE86L8RL7D.jpg)

1. 自己紹介
・kyokucho1989
・Webサービス作ってます
・Rails勉強してます
・広島在住
twitter: @kyokucho_1989
blog: https://matoyomi.hatenablog.com


# Page. 3

![Page Image](https://bcdn.docswell.com/page/LEL9LRKQJR.jpg)

1. 自己紹介
Lyt-note (ライトノート)
目標設定+振り返りができる日報アプリ
ベータ版開発中です。…


# Page. 4

![Page Image](https://bcdn.docswell.com/page/4JMZMR8KEW.jpg)

仮想DOMを理解したい


# Page. 5

![Page Image](https://bcdn.docswell.com/page/PJR6VR5679.jpg)

2.DOMってなに？
・WEP APIの一種
WEP API: WEBを利用したAPI
API (Application Programming Interface) とは、あるソフトウェアプログラム(アプ
リケーション)が、他のソフトウェアやハードウェア等、外部とやりとりをす
るために備えている機能や規則の集まりです
https://developer.mozilla.org/ja/docs/Glossary/API
・ブラウザで読み見こんだ文書を操作するためのAPI
・木構造をしている


# Page. 6

![Page Image](https://bcdn.docswell.com/page/PEXMZRKD7X.jpg)

2.DOMってなに？ -2
・木構造をしている


# Page. 7

![Page Image](https://bcdn.docswell.com/page/3EKG8R5DJD.jpg)

3.仮想DOMとはなにか
・仮想的なDOM
・ブラウザがもつDOMをJSで仮想的に表現したもの。
DOM
仮想DOM


# Page. 8

![Page Image](https://bcdn.docswell.com/page/L73N28KP75.jpg)

3.仮想DOMとはなにか -2
・普通のDOM：書き換えに全てのDOMを全部書き換え
・仮想DOM：変更前後で変わったところを検出。
最低限の箇所を書き換え
つまりはやい！


# Page. 9

![Page Image](https://bcdn.docswell.com/page/87DWZM33JG.jpg)

3.仮想DOMとはなにか -3
・ほんとうにはやくなる？
DOMが複雑じゃない場合は仮想DOMの方が
遅くなる場合もあるそうです…


# Page. 10

![Page Image](https://bcdn.docswell.com/page/VJP9DR4PE8.jpg)

4.おわりに
仮想DOMはまだまだ理解できない。
実際に使いながら理解していきたい。


# Page. 11

![Page Image](https://bcdn.docswell.com/page/2EVM1RXVEQ.jpg)

ご静聴、ありがとうございました。


