フロントエンドLT会

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

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

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

4. 仮想DOMを理解したい

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

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

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

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

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

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

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