昨今の代表的なJavaScriptフレームワーク(React、Vue.jsなど)には「仮想DOM(Virtual DOM)」という概念が採用されているので、フロントエンド界隈の人は一度は耳にしたことがあるだろう。ただ、仮想DOMについて学ぼうと検索してもヒットするのは「フレームワークの使い方」ばかり。踏み込んでいても概念の説明どまりで、仮想DOMがどのように実装されているか解説した記事はすくない。 ということで、当記事では理解を深めるために仮想DOMを使ったフレームワークを自作し、仮想DOMに入門する! そして、ReactやVue.jsを単なるブラックボックスのフレームワークではなく、中身を理解して使えるようになることを、当記事の目標とする。 フレームワークが完成すると以下のようなWebアプリケーションがつくれるようになる。 TOC 記事が長くなりそうなのでも目次 そもそもDOMとは? D
![自作フレームワークをつくって学ぶ 仮想DOM実践入門](https://cdn-ak-scissors.b.st-hatena.com/image/square/b610060e45e791727afd5988517400ac8b8c6c6c/height=288;version=1;width=512/https%3A%2F%2Fblogger.googleusercontent.com%2Fimg%2Fb%2FR29vZ2xl%2FAVvXsEiPMqSXZpenvEI4q-2k74rJSyduvZSMMHm4yWci7xNXMhqfH6meztE4-S-28eFHw9MTGk4JU1lz12HP5sVf-HY3DMrfFCotiHupYrww8p9TLsZ6uKUqDpAJXmFQNis8eeI_9ds677yp7TZ4%2Fw1200-h630-p-k-no-nu%2Fvirtualdom.png)