📝

Reactエンジニア1年生がDOM、仮想DOMについてまとめる

2022/02/09に公開

最近、PJでReactを本格的に使い始めたことで、
「Reactってどういう仕組みで動いている?」と疑問に感じました。

その中で、"仮想DOM"というものがあるらしく、
それが何の役割を持っているのか全くわからなかったので、調べました。

簡単ですが、疑問に思ったことを調べてまとめたものを記事にします。

この記事を読んでほしい人

  • React、VueなどのモダンJavaScriptを触っている若手エンジニア
  • 特にJavaScriptをがっつり勉強してこなかった人
  • 今までバックエンド主体だったが、フロントエンドも最近触るようになった人

DOMとは?

  • Document Object Model
  • JavaScriptでHTMLの要素を操作するための仕組みのこと
  • 各要素を「ノード」という言葉で説明される
    • HTMLでいう「エレメント」や「タグ」のこと
  • HTML文書をツリー構造として扱う。
    • このツリー構造をDOMツリーという。
  • Chrome Dev toolにて確認ができる。

仮想DOMとは?

  • バーチャルなDOMのこと。
  • ReactやVueなどのモダンJavaScriptで用いられている。

仮想DOMの役割は?

  • HTMLのDOMツリーを常に監視して、修正や変更をリアルタイムに反映することを可能にする。

なぜリアルDOMではなく、仮想DOMなのか?

  • JSで構築されるリアルDOMの場合と仮想DOMの場合で比較すると、仮想DOMのほうがメリットが大きい。

リアルDOMの場合

  • 状態を常にチェックすることはできない。

  • レンダリングコストに問題が生じやすい。

  • ソースコードが肥大化すると、どこでなにをしているのか分かりづらい。

  • そういう処理が必要な場合は自分で書かないといけない。

  • 生のJSの場合

    // id=testを持つ要素の配下にHello World!!
    var textElement = document.createElement("p");
    textElement.textContent = "Hello World!!";
    document.getElementById("test").appendChild(textElement);
    
  • jQueryの場合

    // id=testを持つ要素の配下にHello World!!
    var textElement = $("<p>").text("Hello World!!");
    $("test").append(text)
    

仮想DOMの場合

  • 状態を常にチェックしている。
  • リアルDOMとの差分を比較して、変更箇所のみをリアルDOMに反映するため、DOMへの操作を最小限に抑えることができる。

参考文献

https://www.amazon.co.jp/モダンJavaScriptの基本から始める-React実践の教科書-最新ReactHooks対応-Informatics-IDEA/dp/481561072X/ref=asc_df_481561072X/?tag=jpgo-22&linkCode=df0&hvadid=529847636104&hvpos=&hvnetw=g&hvrand=8792880267008764631&hvpone=&hvptwo=&hvqmt=&hvdev=c&hvdvcmdl=&hvlocint=&hvlocphy=1009250&hvtargid=pla-1408443117961&psc=1&th=1&psc=1
https://zenn.dev/ryofrontenginer/articles/edfce254795efc
https://eh-career.com/engineerhub/entry/2020/02/18/103000

Discussion