2018/11/19

自作フレームワークをつくって学ぶ 仮想DOM実践入門

昨今の代表的なJavaScriptフレームワーク(React、Vue.jsなど)には「仮想DOM(Virtual DOM)」という概念が採用されているので、フロントエンド界隈の人は一度は耳にしたことがあるだろう。ただ、仮想DOMについて学ぼうと検索してもヒットするのは「フレームワークの使い方」ばかり。踏み込んでいても概念の説明どまりで、仮想DOMがどのように実装されているか解説した記事はすくない。

ということで、当記事では理解を深めるために仮想DOMを使ったフレームワークを自作し、仮想DOMに入門する!
そして、ReactやVue.jsを単なるブラックボックスのフレームワークではなく、中身を理解して使えるようになることを、当記事の目標とする。


フレームワークが完成すると以下のようなWebアプリケーションがつくれるようになる。

2018/11/13

DOM、Node、Elementの違いとそれぞれの使い分け

仮想DOMのフレームワークを開発しその解説記事を書いているときに、自分がDOM、Node、Elementの違いを正確に理解していないことに気づいた。頭の中でふんわりとDOM≒Node≒Elementという理解になっていたのだ。

ということで、この3つの違いについて調べた。