見出し画像

仮想DOMって何？というかDOMって何？？？

ゆうたろう｜みんなで課題のゴールへ向かう案内人

さーてみなさんお待ちかね。

ReactとHTMLの違いって結局何よ

シリーズ、始まりました・・・！（全然待ってない）


今回は・・・！！

ジョコジョコジョコジョコ・・・

ジョン！

仮想DOMかDOMか編となります！！！



HUNTER×HUNTERの
アルカナニカ編みたいだなあって思ったそこのあなた、
気が合いすぎるのでご飯行きましょう。



そんなことは置いといて、まずそもそも論で

DOMってなんやねん・・！！


じゃないでしょうか？


DOMは
「Document Object Model 」の略で
読み方はそのまま「どむ」っていいます



みんな大好きMDNからも引用させていただきましょう・・！

DOM (Document Object Model) は、すべての HTML または XML ベースのマークアップ言語の文書を表現・操作する API です。 DOM はブラウザーで文書構造をノードのツリーとして読み込み、それぞれのノードを文書の一部（例えば要素、テキスト文字列、コメント）として表します。

DOM は文書内のすべてのノードにアクセスし操作するためにコードをブラウザー内で実行することができるので、ウェブ上で最も使用されいる API のひとつです。ノードの生成や移動、変更が可能です。イベントリスナーをノードに追加し、特定のイベントの発生時に実行させることもできます。

mdn web docs

API・・・？
ノード・・・・？

なーんか小難しいことが書いてありますが、

HTMLやCSSをJavaScriptなどのプログラミング言語からアクセスできるようにするための仕組み

と捉えてもらったら大丈夫です！


親の顔より見てるかもしれませんが、

// DOMが読み込まれたら処理するよ！
document.addEventListener('DOMContentLoaded',function(){
   // js-hogeっていうクラスを取得して'hoo'っていう変数にいれる
   const hoo = document.querySelector('.js-hoge');
   console.log(hoo);
})

上記の記述も「DOMを使って操作している」ということになります。



なので僕と同じようなコーダーさんの場合、
「 ふーん、いつものやつね 」
くらいの温度感でOKです🙆


DOMツリーって呼ばれます


すっごい便利だし、今でもよーく使われてる。

ただ、デメリットもありましてですね・・・

それは・・・・

要素が変更されたときのDOMの更新が遅い


ということ。


どういうことかと言うと、、


JavaScriptとかで

  • 「この要素をここに差し込んで〜！！」とか

  • 「この位置までスクロールしたらふわっと出現させて〜！！」とか

って要素を変更したりするじゃないですか。


その時、裏っかわではDOMがぜーーーんぶ書き換わってるんですよね。

全っ然関係ないところも含めて。


 「 え？駄目なの  」


という感じですよね。


数10pくらいの規模ならあまり気にならないんですけど、
50p以上とかの大規模なものになってくると話は別。


「 全然動かないじゃん・・・ 」


ってパフォーマンスの低下につながってしまいます😢



そこで生まれたのが

仮想DOM！！！！



DOMの軽量版的なもので
JavaScriptのオブジェクトとして表現されるDOMのことになります。


一応React公式（古いver）から引用してきましょうか

仮想 DOM とは？

仮想 DOM (virtual DOM; VDOM) は、インメモリに保持された想像上のまたは「仮想の」UI 表現が、ReactDOM のようなライブラリによって「実際の」DOM と同期されるというプログラミング上の概念です。このプロセスは差分検出処理 (reconciliation)と呼ばれます。

このアプローチにより React の宣言型 API が可能になっています。あなたは UI をどのような状態にしたいのか React に伝え、React は必ず DOM をその状態と一致させます。これにより、React なしではアプリケーションを構築するために避けて通れない属性の操作やイベントハンドリング、および手動での DOM 更新が抽象化されます。

React Docs(Legacy)



ええ、全然覚えなくていいですｗ



覚えておいてほしいのはこの1点だけ。


仮想DOMは差分を検知したとこだけ更新する



ということ！！！


これまで変更されたら
ぜーーーーんぶ更新していたのがDOM。


それを仮想DOMで構築することで 、
変更した箇所だけを検知して
ピンポイントで更新してくれるようになる！！


だからReactは大規模サイトに良く使用されるんですね〜



どうでしょうか？

「Reactのパフォーマンスが良い！」

っていう理由がわかっていただけたなら嬉しいです☺️



てか、こうやってアウトプットしてると

  • 自分の理解も深まるし

  • 理解が深まると面白いし

  • 面白いからもっとやろうってなるし

って感じですっごくいいですね・・・・・！


これからもアウトプット続けていきます！！


次はお待ちかねのpropsとか書こうかな・・


気になる！って方は「スキ」を押してくれると
すっごく喜びます！！！！！！


ではでは！！

いいなと思ったら応援しよう！