仮想DOMを使ったJavaScriptライブラリまとめ

ここ数年JavaScript界隈で注目を集めたのがVirtual DOM（仮想DOM）です。DOMをJavaScriptから操作する場合、その状態を管理するのが問題になりますが、Virtual DOMではDOMの描画から開放されるのでロジックとビューの分離が可能になります。

そんなVirtual DOMを提供するライブラリを紹介します。

React – A JavaScript library for building user interfaces

Virtual DOMを最初に広めたのがReactです。画期的な概念であり、JavaScriptプログラマにとって大きな変革になりました。次期バージョンからReact Fiberとなり、レンダリング処理などが高速化すると言われています。

元々Virtual DOMによってDOMとは切り離された技術になっていますので、React Nativeによってスマートフォンアプリの描画に使われたり、コミュニティベースではReact CanvasでCanvasへの描画、React Consoleというコンソールアプリケーション開発用のソフトウェアも作られています。

React – A JavaScript library for building user interfaces

Vue.js

Reactが独自のタグを定義するのに対してVue.jsでは元々のHTMLタグを活用したVirtual DOM利用ができます。そのため学習コストが低く、利用者が増えています。Reactと同じようにサーバサイドレンダリングにも対応しています。

シンプルな仕組みで、ランタイムもコンパクトです。Virtual DOMの仕組みも高速なのが売りです。

Vue.js

Maquette

ReactはJSXを覚える必要がありますが、Maquetteは純粋なJavaScriptだけで記述できます。以下はサンプルコードです。

GZip圧縮すると3KBになるというコンパクトなサイズも売りです。

Maquette

Preact | Preact: Fast 3kb React alternative with the same ES6 API. Components & Virtual DOM.

Reactの代替と銘打っているライブラリです。React向けに作られているコンポーネントがそのまま使えるようになっているのがポイントです。

パフォーマンスやサイズに重点を置いており、Reactを使っている方の悩みを解決する存在と言えそうです。

Preact | Preact: Fast 3kb React alternative with the same ES6 API. Components & Virtual DOM.

WebReflection/hyperHTML: A Fast & Light Virtual DOM Alternative

hyperHTMLはシンプルなVirtual DOMライブラリとなっています。onclickなどは別な関数を定義して、そちらに飛ばす仕組みになっています。以下はサンプルコードです。

WebReflection/hyperHTML: A Fast & Light Virtual DOM Alternative

anthonyshort/deku: Render interfaces using pure functions and virtual DOM

Reduxと組み合わせて使うこともできるVirtual DOMライブラリです。軽量なReactといった雰囲気があります。ピュアなJavaScriptで記述できるのがポイントです。

Reactで書いた場合の半分くらいのサイズになるようです。

anthonyshort/deku: Render interfaces using pure functions and virtual DOM

---

Virtual DOMはWebアプリケーションが大型化していく中で見逃せない概念になっています。かといってReactやVue.jsで開発するのに苦痛を感じる方もいるでしょう。そうした時にはVirtual DOMのライブラリを採用するのも手でしょう。

DOMの状態管理が大変になってきていたら導入を検討してみてはいかがでしょう。