解説
「仮想DOM」（Virtual DOM）は、「DOM」（Document Object Model）を仮想化したものです。
DOMはツリー状の構造をしており、HTMLなどの文書から情報を読み取ったり、操作したりするためのものです。WebページではJavaSciptがそのプログラムを担っています。
WebブラウザのDOMは複雑なものなので、そのまま利用すると、処理にそれなりの時間がかかります。仮想DOMでは、その計算を低コストで行い、差分の結果だけを生のDOMに反映させるアプローチで高速化を図っています。
仮想DOMを利用したJavaScriptのライブラリでは、ReactとVue.jsが人気があります。
サンプル
「Vue.js」の簡単なサンプルを掲載します。
ファイルはUTF-8で保存してください。検証はGoogle Chromeで行っています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>「Vue.js」のサンプル</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style>
#appCount span, #appCount button {font-size: 300%;}
</style>
</head>
<body>
<div id="appCount">
<span>{{ count }}</span>
<button v-on:click="countMessage">Count</button>
<button v-on:click="resetMessage">Reset</button>
</div>
<script>
const app = new Vue({
el: '#appCount',
data: {
count: 0
},
methods: {
countMessage: function () {
this.count ++;
},
resetMessage: function () {
this.count = 0;
}
}
});
</script>
</body>
</html>
