仮想DOMは本当に“速い”のか? DOM操作の新しい考え方を、フレームワークを実装して理解しよう
最近のJavaScriptフレームワークで利用される「仮想DOM」について、リアルDOMの違い、メリット・デメリット、仮想DOMを使ったフレームワーク開発などを、ダーシノ(bc_rikko)さんが解説します。
はじめまして、ダーシノ(@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に会員登録すると
続きをお読みいただけます(無料)。
続きをお読みいただけます(無料)。
登録ボタンを押すと、利用規約とプライバシーポリシーに同意したことになります。

- すべての過去記事を読める
- 過去のウェビナー動画を
視聴できる - 企業やエージェントから
スカウトが届く