仮想DOMは本当に“速い”のか？ DOM操作の新しい考え方を、フレームワークを実装して理解しよう
最近のJavaScriptフレームワークで利用される「仮想DOM」について、リアルDOMの違い、メリット・デメリット、仮想DOMを使ったフレームワーク開発などを、ダーシノ（bc_rikko）さんが解説します。
480
はじめまして、ダーシノ（@bc_rikko）です。さくらインターネットでフロントエンドエンジニアをする傍ら、NES.cssというファミコン風CSSフレームワークを開発しています。
さっそくですが、皆さんは、ReactやVue.jsといったJavaScriptフレームワークを使ったことがありますか？ そういったフレームワークで使われている、仮想DOMについて知っていますか？
「聞いたことない」「聞いたことはあるけど、どう実装されているかは知らない」「熟知している」。いろいろなレベルの方がいらっしゃると思います。
仮想DOMはJavaScriptフレームワークに隠蔽（いんぺい）されており、私たち利用者が意識することはほとんどありません。ですが、仮想DOMの仕組みを知り、フレームワークがどのように動いているかを知ることで、解決できる問題がグンと増えます。
当記事は、フロントエンドの初心者～中級者を対象に、仮想DOMとは何か？ 従来のDOM操作との違いは？ 仮想DOMを使うメリット・デメリットは？ などを、実際にJavaScriptフレームワークを実装しながら解説していきます。
- そもそもDOM（Document Object Model）とは何か？
- 混同しがちなDOMとNode、そしてElement
- 仮想DOMとレンダリングのコスト
- フレームワークで仮想DOMはどのように実装されているか
- リアルDOM vs. 仮想DOM
- 仮想DOMを使ったフレームワークを開発して理解を深める
- 自作フレームワークを使ったWebアプリケーション開発
- 仮想DOMは銀の弾丸ではない
- まとめ ── DOMと仮想DOM
筆者はこれまで参考記事にあるように、仮想DOMについて複数の記事をブログで公開してきました。当記事では、これらを元に加筆修正するとともに、新たに仮想DOMのデメリットや、仮想DOMを使わない代替手段にも踏み込んで解説しています。
そもそもDOM（Document Object Model）とは何か？
エンジニアHubに会員登録すると
続きをお読みいただけます（無料）。
続きをお読みいただけます（無料）。
登録ボタンを押すと、利用規約とプライバシーポリシーに同意したことになります。
登録のメリット
- すべての過去記事を読める
- 過去のウェビナー動画を
視聴できる - 企業やエージェントから
スカウトが届く