仮想DOMって何が嬉しいの？

そもそもDOMとは

Document Object Modelの略称
HTMLなどを解釈してツリー構造で表現したもの

知らねーって人は、この記事とか見たらわかりやすいです。

従来のDOM操作

ここでいう「従来の」とは、Vanilla JSやjQueryのことを指します。
この場合、DOMを直接操作していました。
↓みたいな感じ

li.appendChild(div); // liタグの子要素にdivタグを設定
div.appendChild(p); // divタグの子要素にpタグを設定

問題点1

これ、複雑になるともう何しているのかよくわからなくなるんですよね。
jQueryで複雑なコード書いているとfirstとかどれ指してんだ状態になりかねないです。
あとからそのコードを読む人も困ります。この記事では可読性がどうこうとか講釈垂れませんが、可読性とか知らねーって人はリーダブルコードとか読んでください

問題点2

加えて、画面の表示(レンダリング)に時間がかかるという問題もあります。
想像してみてください、
NetflixやAmazon Prime、YouTubeを開いたときに、なかなか動画の一覧やサムネイルが表示されなかったらイラっときませんか？ 私だったらブラウザバックしちゃいます。(そしてTwitterを開く)

そこで仮想DOMの登場

仮想DOMとはJavaScriptのオブジェクトで仮想的に作られたDOMのこと
要素の追加や削除等をする際に、いきなりDOMを操作するのではなく、JavaScript上で仮想DOMを操作して、差分を出してから実際のDOMに反映する

具体的な流れは、

1. ある操作をJavaScriptで行う
2. 操作前と操作後で、「これだけ差分があるよ〜」というのをJavaScriptで比較
3. その変更差分のみをDOMに反映する

変更差分のみをDOMに反映するので、レンダリングコストが下がるというメリットがあります。
また、仮想DOMを利用したライブラリにReactやVueがありますが、これらのコードは従来のコードと比べると読みやすいです。

そして、何より、なんか難しそう〜と思った人に朗報です！
この仮想DOMは意識しなくても大丈夫なように、なっています!!(React等を使う場合)

なので、まあ、Reactとか使うときに裏ではこういう動きをしているんだな〜ぐらいに認識していただけたらいいかなと思います。