virtual-domという、(その名の通り)仮想DOMの生成とdiffを行うシンプルなJavaScriptのライブラリがあります。 GitHubのexampleを見るとわかるのですが、このライブラリのみでも、シンプルな形で動的なビューを実現することができます。 このシンプルさがとても魅力的で、実際に使ってみたのですが、 分かったことをまとめたいと思います。 仮想DOMって? Reactなどで以前から採用されていて、最近流行している感じの 仮想DOM ですが、 重い本物のDOMとは別に、仮想のDOM(ただのJSオブジェクトなので軽い)のツリーを構築する 仮想DOMの構築を状態が変更されるたびに行って、前回の仮想DOMとのdiffをとって実DOMに適用する という形で動的なビューの実現に利用されます。 仮想であるので、ブラウザ上だけではなくサーバーサイドのHTMLレンダリングにも使えます。
![仮想DOMライブラリの「virtual-dom」だけでMV*なビューを書く - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/c4c9cfddf27bbdeffcb9ecdb25c3c224974711a6/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JUU0JUJCJUFFJUU2JTgzJUIzRE9NJUUzJTgzJUE5JUUzJTgyJUE0JUUzJTgzJTk2JUUzJTgzJUE5JUUzJTgzJUFBJUUzJTgxJUFFJUUzJTgwJThDdmlydHVhbC1kb20lRTMlODAlOEQlRTMlODElQTAlRTMlODElOTElRTMlODElQTdNViUyQSVFMyU4MSVBQSVFMyU4MyU5MyVFMyU4MyVBNSVFMyU4MyVCQyVFMyU4MiU5MiVFNiU5QiVCOCVFMyU4MSU4RiZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9MmMyMGNmZGUyNDc4YWJlMDYyMmViMmRkNjEwMTVmYWU%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwc2VhbmNoYXNfdCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NDI2NTRkMGE0Y2FkYzAxNDFhNTc5NjEzZjFhNWZkMDM%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D6aded3c37878ec70e4590e6b4745fe96)