仮想DOMを理解する!
フロントエンドLT会 #7 2022/5/21
@kyokucho1989
1. 自己紹介
・kyokucho1989
・Webサービス作ってます
・Rails勉強してます
・広島在住
twitter: @kyokucho_1989
blog: https://matoyomi.hatenablog.com
1. 自己紹介
Lyt-note (ライトノート)
目標設定+振り返りができる日報アプリ
ベータ版開発中です。…
仮想DOMを理解したい
2.DOMってなに?
・WEP APIの一種
WEP API: WEBを利用したAPI
API (Application Programming Interface) とは、あるソフトウェアプログラム(
アプリケーション)が、他のソフトウェアやハードウェア等、外部とやりとり
をするために備えている機能や規則の集まりです
https://developer.mozilla.org/ja/docs/Glossary/API
・ブラウザで読み見こんだ文書を操作するためのAPI
・木構造をしている
2.DOMってなに? -2
・木構造をしている
3.仮想DOMとはなにか
・仮想的なDOM
・ブラウザがもつDOMをJSで仮想的に表現したもの。
DOM 仮想DOM
3.仮想DOMとはなにか -2
・普通のDOM:書き換えに全てのDOMを全部書き換え
・仮想DOM:変更前後で変わったところを検出。
最低限の箇所を書き換え
つまりはやい!
3.仮想DOMとはなにか -3
・ほんとうにはやくなる?
DOMが複雑じゃない場合は仮想DOMの方が
遅くなる場合もあるそうです…
4.おわりに
仮想DOMはまだまだ理解できない。
実際に使いながら理解していきたい。
ご静聴、ありがとうございました。

仮想DOMを理解する