Posted at

picodomでリアルDOMを作ってみた

More than 1 year has passed since last update.

すべてを仮想DOM化して運用する状況なら別ですが、ブラウザJavaScriptでいろいろ操作していると、どうしてもDOMノードを作らないといけないことがあります。そんなときにもpicodomを使ってみてもいいんじゃないか、ということをちらっと思った次第です。


従来のやり方

JavaScriptでDOMノードを作ろうと思えば、大きく分けて2つの方法があります。



  • innerHTMLにHTML文字列を代入する


  • createElementsetAttributeなどのDOM APIを駆使する

ただ、文字列から生成するとパースのコストが発生しますし、文字列を変化させようとすればXSSの危険もあります。一方、DOM APIを直接使うとコードが冗長になって、どんなDOMを生成しているのか見えづらくなってしまいます。

jQueryがあれば、$('<elem />', {属性オブジェクト})の形で作ることもできますが、さすがにこのためだけにjQueryを入れるのもアホらしい話です。


既存のものの活用

で、プロジェクトにすでにpicodomを使っていたので、そこから起こす、という方法を取ってみることにしました。

import {patch} from 'picodom';

const toRealDom = vdom => {
const div = document.createElement('div');
patch(null, vdom, div);
return div.firstChild;
}

もちろん設定すればJSXでも動かせます(jsFiddle)。簡潔・高速・安全、そしてライブラリも軽量ということで、仮想DOMでない環境でも便利かもしれない、と少し思いました。