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

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

従来のやり方

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

• innerHTMLにHTML文字列を代入する
• createElementやsetAttributeなどの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でない環境でも便利かもしれない、と少し思いました。